diff --git a/Model/Answer.cs b/Model/Answer.cs
index 0185bde..3b7703d 100644
--- a/Model/Answer.cs
+++ b/Model/Answer.cs
@@ -23,5 +23,7 @@ namespace Model
 
         public bool IsOtherOption { get; set; } = false;
         public string? ConditionJson { get; set; }
+        [NotMapped] // This won't be stored in database
+        public bool IsDeleted { get; set; } = false;
     }
 }
diff --git a/Services/Implemnetation/QuestionnaireRepository.cs b/Services/Implemnetation/QuestionnaireRepository.cs
index 09e7130..c27b9ff 100644
--- a/Services/Implemnetation/QuestionnaireRepository.cs
+++ b/Services/Implemnetation/QuestionnaireRepository.cs
@@ -47,7 +47,10 @@ namespace Services.Implemnetation
 
         public Questionnaire GetQuestionnaireWithQuestionAndAnswer(int? id)
         {
-            return _context.Questionnaires.AsNoTracking().Include(x => x.Questions).ThenInclude(x => x.Answers).FirstOrDefault(x=>x.Id==id);
+            return _context.Questionnaires  // ✅ No AsNoTracking for edit operations!
+                .Include(x => x.Questions)
+                .ThenInclude(x => x.Answers)
+                .FirstOrDefault(x => x.Id == id);
         }
 
         public async Task Update(Questionnaire questionnaire)
diff --git a/Web/Areas/Admin/Controllers/QuestionnaireController.cs b/Web/Areas/Admin/Controllers/QuestionnaireController.cs
index a367a73..b1a8afc 100644
--- a/Web/Areas/Admin/Controllers/QuestionnaireController.cs
+++ b/Web/Areas/Admin/Controllers/QuestionnaireController.cs
@@ -200,110 +200,130 @@ namespace Web.Areas.Admin.Controllers
 
             if (ModelState.IsValid)
             {
-                // Retrieve the existing questionnaire from the database
-                var existingQuestionnaire = _questionnaire.GetQuestionnaireWithQuestionAndAnswer(viewModel.Id);
-
-                if (existingQuestionnaire == null)
+                try
                 {
-                    return NotFound();
-                }
+                    using var transaction = await _context.Database.BeginTransactionAsync();
 
-                // Update the existing questionnaire with the data from the view model
-                existingQuestionnaire.Title = viewModel.Title;
-                existingQuestionnaire.Description = viewModel.Description;
-
-                var existingQuestionIds = existingQuestionnaire.Questions.Select(q => q.Id).ToList();
-
-                // Iterate through existing questions and remove those not found in the view model
-                foreach (var existingQuestion in existingQuestionnaire.Questions.ToList())
-                {
-                    if (!viewModel.Questions.Any(q => q.Id == existingQuestion.Id))
+                    try
                     {
-                        existingQuestionnaire.Questions.Remove(existingQuestion);
-                    }
-                    await _questionnaire.Update(existingQuestionnaire);
-                }
+                        // Step 1: Update the questionnaire basic info
+                        var existingQuestionnaire = await _context.Questionnaires
+                            .FirstOrDefaultAsync(q => q.Id == viewModel.Id);
 
-                var newQuestions = new List<Question>();
-
-                // Update or add new questions
-                foreach (var questionViewModel in viewModel.Questions)
-                {
-                    var existingQuestion = existingQuestionnaire.Questions.FirstOrDefault(q => q.Id == questionViewModel.Id);
-
-                    if (questionViewModel.Id != 0)
-                    {
-                        if (existingQuestion != null)
+                        if (existingQuestionnaire == null)
                         {
-                            existingQuestion.Text = questionViewModel.Text;
-                            existingQuestion.Type = questionViewModel.Type;
+                            return NotFound();
+                        }
 
-                            foreach (var answerViewModel in questionViewModel.Answers)
+                        existingQuestionnaire.Title = viewModel.Title;
+                        existingQuestionnaire.Description = viewModel.Description;
+
+                        // Step 2: Get all existing questions for this questionnaire
+                        var existingQuestions = await _context.Questions
+                            .Where(q => q.QuestionnaireId == viewModel.Id)
+                            .ToListAsync();
+
+                        // Step 3: Delete ALL answers first (foreign key constraint)
+                        if (existingQuestions.Any())
+                        {
+                            var questionIds = existingQuestions.Select(q => q.Id).ToList();
+                            var existingAnswers = await _context.Answers
+                                .Where(a => questionIds.Contains(a.QuestionId))
+                                .ToListAsync();
+
+                            _context.Answers.RemoveRange(existingAnswers);
+                            await _context.SaveChangesAsync();
+                        }
+
+                        // Step 4: Delete ALL questions
+                        _context.Questions.RemoveRange(existingQuestions);
+                        await _context.SaveChangesAsync();
+
+                        // Step 5: Add new questions (only if provided and valid)
+                        int newQuestionsAdded = 0;
+                        if (viewModel.Questions != null && viewModel.Questions.Count > 0)
+                        {
+                            var validQuestions = viewModel.Questions
+                                .Where(q => !string.IsNullOrWhiteSpace(q.Text))
+                                .ToList();
+
+                            foreach (var questionViewModel in validQuestions)
                             {
-                                // Check if the answer already exists
-                                var existingAnswer = existingQuestion.Answers.FirstOrDefault(a => a.Id == answerViewModel.Id);
-
-                                if (answerViewModel.Id == 0)
+                                var newQuestion = new Question
                                 {
-                                    // NEW: Add IsOtherOption property when creating new answers
-                                    existingQuestion.Answers.Add(new Answer
+                                    Text = questionViewModel.Text.Trim(),
+                                    Type = questionViewModel.Type,
+                                    QuestionnaireId = viewModel.Id
+                                };
+
+                                _context.Questions.Add(newQuestion);
+                                await _context.SaveChangesAsync(); // Save to get the ID
+
+                                // Add answers for this question
+                                if (questionViewModel.Answers != null)
+                                {
+                                    var validAnswers = questionViewModel.Answers
+                                        .Where(a => !string.IsNullOrWhiteSpace(a.Text))
+                                        .ToList();
+
+                                    foreach (var answerViewModel in validAnswers)
                                     {
-                                        Text = answerViewModel.Text,
-                                        IsOtherOption = answerViewModel.IsOtherOption
-                                    });
-                                }
-                                else if (answerViewModel.Text == null)
-                                {
-                                    existingQuestion.Answers.Remove(existingAnswer);
-                                    await _questionnaire.Update(existingQuestionnaire);
-                                }
-                                else if (existingAnswer != null)
-                                {
-                                    existingAnswer.Text = answerViewModel.Text;
-                                    // NEW: Update IsOtherOption property for existing answers
-                                    existingAnswer.IsOtherOption = answerViewModel.IsOtherOption;
+                                        var newAnswer = new Answer
+                                        {
+                                            Text = answerViewModel.Text.Trim(),
+                                            IsOtherOption = answerViewModel.IsOtherOption,
+                                            QuestionId = newQuestion.Id
+                                        };
+
+                                        _context.Answers.Add(newAnswer);
+                                    }
+
+                                    if (validAnswers.Any())
+                                    {
+                                        await _context.SaveChangesAsync();
+                                    }
                                 }
+
+                                newQuestionsAdded++;
                             }
                         }
+
+                        // Step 6: Final save and commit
+                        await _context.SaveChangesAsync();
+                        await transaction.CommitAsync();
+
+                        // Step 7: Get final count for success message
+                        var finalQuestionCount = await _context.Questions
+                            .Where(q => q.QuestionnaireId == viewModel.Id)
+                            .CountAsync();
+
+                        // Success message
+                        if (finalQuestionCount == 0)
+                        {
+                            TempData["Success"] = "Questionnaire updated successfully. All questions have been removed.";
+                        }
+                        else
+                        {
+                            TempData["Success"] = $"Questionnaire updated successfully with {finalQuestionCount} question(s).";
+                        }
+
+                        return RedirectToAction(nameof(Index));
                     }
-                    else
+                    catch (Exception)
                     {
-                        // Create a new question
-                        var newQuestion = new Question
-                        {
-                            Text = questionViewModel.Text,
-                            Type = questionViewModel.Type,
-                            Answers = new List<Answer>()
-                        };
-
-                        foreach (var answerViewModel in questionViewModel.Answers)
-                        {
-                            if (!string.IsNullOrEmpty(answerViewModel.Text))
-                            {
-                                // NEW: Add IsOtherOption property when creating new answers
-                                newQuestion.Answers.Add(new Answer
-                                {
-                                    Text = answerViewModel.Text,
-                                    IsOtherOption = answerViewModel.IsOtherOption
-                                });
-                            }
-                        }
-
-                        newQuestions.Add(newQuestion);
+                        await transaction.RollbackAsync();
+                        throw;
                     }
-
-                    existingQuestionnaire.Questions.AddRange(newQuestions);
                 }
-
-                await _questionnaire.Update(existingQuestionnaire);
-
-                TempData["Success"] = "Questionnaire updated successfully";
-                return RedirectToAction(nameof(Index));
+                catch (Exception ex)
+                {
+                    ModelState.AddModelError("", "An error occurred while updating the questionnaire. Please try again.");
+                    return View(viewModel);
+                }
             }
 
             return View(viewModel);
         }
-
         [HttpGet]
         public IActionResult Delete(int id)
         {
diff --git a/Web/Areas/Admin/Views/Questionnaire/Delete.cshtml b/Web/Areas/Admin/Views/Questionnaire/Delete.cshtml
index c7fd368..662aa16 100644
--- a/Web/Areas/Admin/Views/Questionnaire/Delete.cshtml
+++ b/Web/Areas/Admin/Views/Questionnaire/Delete.cshtml
@@ -1,177 +1,749 @@
 @model QuestionnaireViewModel
 
 @{
-    ViewData["Title"] = "Delete";
+    ViewData["Title"] = "Delete Questionnaire";
 }
-<div class="container mt-4">
-    <div class="card justify-content-center p-4 shadow rounded">
-        <div class="card-body">
-            <h5 class="card-title">Delete questionnaire</h5>
-            @* <h6 class="text-danger">Are you sure you want to delete this questionnaire: <span class="badge bg-danger p-2 shadow rounded">@Model.Title</span></h6> *@
-            <h6 class="text-danger">
-                Are you sure you want to delete:
 
-                <span class="badge bg-danger p-2 shadow rounded">
-                    <span class="item-title ">@Html.Raw(Model.Title.Length >= 100 ? Model.Title.Substring(0, 100) : Model.Title)</span>
-                    <span class="more-title " style="display:none;">@(Model.Title.Length > 30 ? Model.Title.Substring(30) : "")</span>
-                </span>
-                <button type="button" class="btn btn-link readMoreBtn">Read More</button>
+<style>
+    /* Modern Design System */
+    @@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
 
-            </h6>
-      
+    :root {
+        --danger-color: #ef4444;
+        --danger-light: #fca5a5;
+        --danger-dark: #dc2626;
+        --warning-color: #f59e0b;
+        --info-color: #06b6d4;
+        --success-color: #10b981;
+        --gray-50: #f8fafc;
+        --gray-100: #f1f5f9;
+        --gray-200: #e2e8f0;
+        --gray-300: #cbd5e1;
+        --gray-400: #94a3b8;
+        --gray-500: #64748b;
+        --gray-600: #475569;
+        --gray-700: #334155;
+        --gray-800: #1e293b;
+        --gray-900: #0f172a;
+        --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+        --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+        --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+        --border-radius-sm: 8px;
+        --border-radius-md: 12px;
+        --border-radius-lg: 16px;
+        --border-radius-xl: 24px;
+    }
 
-            <div class="row">
-                <!-- 12 columns for textboxes -->
+    * {
+        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    }
 
-                <form asp-action="Delete" asp-controller="Questionnaire">
-                    <div asp-validation-summary="All" class="text-danger"></div>
-
-                    <div class="mb-3 col-12">
-                        <label asp-for="Title" class="control-label"></label>
-                        <input asp-for="Title" class="form-control" disabled />
-                        <span asp-validation-for="Title" class="text-danger"></span>
-                    </div>
-                    <div class="mb-3 col-12">
-                        <label asp-for="Description" class="control-label"></label>
-                        <textarea asp-for="Description" class="form-control" disabled></textarea>
-                        <span asp-validation-for="Description" class="text-danger"></span>
-                    </div>
-                    <div class="mb-3 col-12">
-                        <span class="h5">Total Number of questions:<span class="badge-info p-2 shadow rounded"> @Model.Questions.Count</span></span><br />
-                        @*  <span class="h5">Total Number of answer: @Model.Questions.Select(x=>x.Answers.Select(x=>x.Id)).Count()</span> *@
-                    </div>
-
-                    <!-- Add the delete confirmation modal trigger button -->
-                   
-
-                    <div class="mb-3 container">
-                        <hr class="border border-primary border-2 opacity-50">
-                        <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal">Delete</button>
-
-                        <button asp-action="Index" class="btn btn-info">Back to list <i class="bi bi-arrow-return-left"></i></button>
-                    </div>
-                </form>
-            </div>
-        </div>
-    </div>
   
-    
-    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
-        <div class="modal-dialog" role="document">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title" id="deleteModalLabel">Delete Confirmation</h5>
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                        <span aria-hidden="true">&times;</span>
-                    </button>
+
+    .container {
+        max-width: 1000px;
+    }
+
+    /* Main Delete Card */
+    .delete-card {
+        background: white;
+        border-radius: var(--border-radius-xl);
+        box-shadow: var(--shadow-2xl);
+        border: 1px solid var(--gray-200);
+        overflow: hidden;
+        position: relative;
+    }
+
+        .delete-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 6px;
+            background: linear-gradient(90deg, var(--danger-color), var(--danger-light), var(--danger-dark));
+        }
+
+    /* Header Section */
+    .delete-header {
+        background: linear-gradient(135deg, var(--danger-color) 0%, var(--danger-dark) 100%);
+        color: white;
+        padding: 3rem 2rem;
+        text-align: center;
+        position: relative;
+        overflow: hidden;
+    }
+
+        .delete-header::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><defs><radialGradient id="a" cx="50%" cy="0%" r="100%"><stop offset="0%" stop-color="white" stop-opacity="0.1"/><stop offset="100%" stop-color="white" stop-opacity="0"/></radialGradient></defs><rect width="100" height="20" fill="url(%23a)"/></svg>');
+            opacity: 0.3;
+        }
+
+    .delete-icon {
+        background: rgba(255, 255, 255, 0.2);
+        width: 80px;
+        height: 80px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0 auto 1.5rem;
+        position: relative;
+        z-index: 1;
+    }
+
+        .delete-icon i {
+            font-size: 2.5rem;
+            color: white;
+        }
+
+    .delete-title {
+        font-size: 2.5rem;
+        font-weight: 800;
+        margin: 0 0 0.5rem;
+        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        position: relative;
+        z-index: 1;
+    }
+
+    .delete-subtitle {
+        font-size: 1.1rem;
+        opacity: 0.9;
+        font-weight: 500;
+        position: relative;
+        z-index: 1;
+    }
+
+    /* Content Section */
+    .delete-content {
+        padding: 3rem 2rem;
+    }
+
+    /* Warning Alert */
+    .warning-alert {
+        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+        border: 2px solid var(--warning-color);
+        border-radius: var(--border-radius-lg);
+        padding: 2rem;
+        margin-bottom: 2.5rem;
+        position: relative;
+    }
+
+        .warning-alert::before {
+            content: "⚠️";
+            position: absolute;
+            top: -15px;
+            left: 20px;
+            background: var(--warning-color);
+            color: white;
+            padding: 0.5rem 1rem;
+            border-radius: var(--border-radius-md);
+            font-size: 1.2rem;
+            font-weight: 700;
+        }
+
+    .warning-content {
+        margin-top: 0.5rem;
+    }
+
+    .warning-title {
+        font-size: 1.25rem;
+        font-weight: 700;
+        color: var(--gray-800);
+        margin-bottom: 1rem;
+    }
+
+    .warning-list {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+
+        .warning-list li {
+            display: flex;
+            align-items: center;
+            margin-bottom: 0.75rem;
+            font-weight: 500;
+            color: var(--gray-700);
+        }
+
+            .warning-list li i {
+                color: var(--danger-color);
+                margin-right: 0.75rem;
+                font-size: 1.1rem;
+            }
+
+    /* Questionnaire Info */
+    .questionnaire-info {
+        background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
+        border-radius: var(--border-radius-lg);
+        padding: 2rem;
+        margin-bottom: 2.5rem;
+        border: 1px solid var(--gray-200);
+    }
+
+    .info-header {
+        display: flex;
+        align-items: center;
+        margin-bottom: 1.5rem;
+    }
+
+    .info-icon {
+        background: var(--info-color);
+        color: white;
+        width: 48px;
+        height: 48px;
+        border-radius: var(--border-radius-md);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 1rem;
+        font-size: 1.5rem;
+    }
+
+    .info-title {
+        font-size: 1.5rem;
+        font-weight: 700;
+        color: var(--gray-800);
+        margin: 0;
+    }
+
+    .info-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 1.5rem;
+        margin-bottom: 1.5rem;
+    }
+
+    .info-item {
+        background: white;
+        padding: 1.25rem;
+        border-radius: var(--border-radius-md);
+        border: 1px solid var(--gray-200);
+        box-shadow: var(--shadow-sm);
+    }
+
+    .info-label {
+        font-size: 0.875rem;
+        font-weight: 600;
+        color: var(--gray-500);
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        margin-bottom: 0.5rem;
+    }
+
+    .info-value {
+        font-size: 1.1rem;
+        font-weight: 600;
+        color: var(--gray-800);
+        word-break: break-word;
+    }
+
+    .info-description {
+        background: white;
+        padding: 1.25rem;
+        border-radius: var(--border-radius-md);
+        border: 1px solid var(--gray-200);
+        box-shadow: var(--shadow-sm);
+        max-height: 120px;
+        overflow-y: auto;
+    }
+
+    .info-description-content {
+        color: var(--gray-700);
+        line-height: 1.6;
+        font-size: 0.95rem;
+    }
+
+    /* Stats Section */
+    .stats-section {
+        background: white;
+        border-radius: var(--border-radius-lg);
+        padding: 2rem;
+        margin-bottom: 2.5rem;
+        border: 1px solid var(--gray-200);
+        box-shadow: var(--shadow-md);
+    }
+
+    .stats-title {
+        font-size: 1.25rem;
+        font-weight: 700;
+        color: var(--gray-800);
+        margin-bottom: 1.5rem;
+        display: flex;
+        align-items: center;
+    }
+
+        .stats-title i {
+            margin-right: 0.75rem;
+            color: var(--info-color);
+        }
+
+    .stats-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+        gap: 1rem;
+    }
+
+    .stat-card {
+        background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
+        padding: 1.5rem;
+        border-radius: var(--border-radius-md);
+        text-align: center;
+        border: 1px solid var(--gray-200);
+        transition: all 0.3s ease;
+    }
+
+        .stat-card:hover {
+            transform: translateY(-2px);
+            box-shadow: var(--shadow-md);
+        }
+
+    .stat-number {
+        font-size: 2rem;
+        font-weight: 800;
+        color: var(--danger-color);
+        display: block;
+        margin-bottom: 0.5rem;
+    }
+
+    .stat-label {
+        font-size: 0.875rem;
+        font-weight: 600;
+        color: var(--gray-600);
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+    }
+
+    /* Action Buttons */
+    .action-section {
+        background: var(--gray-50);
+        padding: 2.5rem 2rem;
+        border-top: 1px solid var(--gray-200);
+    }
+
+    .action-buttons {
+        display: flex;
+        gap: 1rem;
+        justify-content: center;
+        flex-wrap: wrap;
+    }
+
+    .btn {
+        border-radius: var(--border-radius-md);
+        font-weight: 600;
+        padding: 1rem 2rem;
+        font-size: 1rem;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        border: none;
+        text-decoration: none;
+        display: inline-flex;
+        align-items: center;
+        gap: 0.75rem;
+        box-shadow: var(--shadow-md);
+        position: relative;
+        overflow: hidden;
+        min-width: 140px;
+        justify-content: center;
+    }
+
+        .btn::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+            transition: left 0.5s;
+        }
+
+        .btn:hover::before {
+            left: 100%;
+        }
+
+    .btn-danger-custom {
+        background: linear-gradient(135deg, var(--danger-color) 0%, var(--danger-dark) 100%);
+        color: white;
+    }
+
+        .btn-danger-custom:hover {
+            background: linear-gradient(135deg, var(--danger-dark) 0%, #b91c1c 100%);
+            transform: translateY(-2px);
+            box-shadow: var(--shadow-xl);
+            color: white;
+        }
+
+    .btn-secondary-custom {
+        background: linear-gradient(135deg, var(--gray-500) 0%, var(--gray-600) 100%);
+        color: white;
+    }
+
+        .btn-secondary-custom:hover {
+            background: linear-gradient(135deg, var(--gray-600) 0%, var(--gray-700) 100%);
+            transform: translateY(-2px);
+            box-shadow: var(--shadow-xl);
+            color: white;
+        }
+
+    /* Enhanced Modal */
+    .modal-content {
+        border-radius: var(--border-radius-xl);
+        border: none;
+        box-shadow: var(--shadow-2xl);
+        overflow: hidden;
+    }
+
+    .modal-header-danger {
+        background: linear-gradient(135deg, var(--danger-color) 0%, var(--danger-dark) 100%);
+        color: white;
+        padding: 2rem 2.5rem;
+        border: none;
+        text-align: center;
+    }
+
+    .modal-title-custom {
+        font-size: 1.5rem;
+        font-weight: 700;
+        margin: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.75rem;
+    }
+
+    .modal-body-custom {
+        padding: 2.5rem;
+        text-align: center;
+    }
+
+    .modal-message {
+        font-size: 1.25rem;
+        color: var(--gray-700);
+        margin-bottom: 1.5rem;
+        line-height: 1.6;
+    }
+
+    .modal-warning {
+        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+        border: 1px solid var(--warning-color);
+        border-radius: var(--border-radius-md);
+        padding: 1.5rem;
+        margin-bottom: 1.5rem;
+    }
+
+    .modal-footer-custom {
+        padding: 2rem 2.5rem;
+        border: none;
+        background: var(--gray-50);
+        display: flex;
+        gap: 1rem;
+        justify-content: center;
+    }
+
+    /* Success State */
+    .success-message {
+        color: var(--success-color);
+        font-size: 1.5rem;
+        font-weight: 600;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.75rem;
+    }
+
+    /* Loading State */
+    .btn.loading {
+        opacity: 0.7;
+        pointer-events: none;
+    }
+
+        .btn.loading::after {
+            content: "";
+            width: 18px;
+            height: 18px;
+            margin-left: 0.75rem;
+            border: 2px solid transparent;
+            border-top-color: currentColor;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+
+    @@keyframes spin {
+        0%
+
+    {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+
+    }
+
+    /* Responsive Design */
+    @@media (max-width: 768px) {
+        .container
+
+    {
+        padding: 0 1rem;
+    }
+
+    .delete-content {
+        padding: 2rem 1.5rem;
+    }
+
+    .info-grid {
+        grid-template-columns: 1fr;
+        gap: 1rem;
+    }
+
+    .stats-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .action-buttons {
+        flex-direction: column;
+    }
+
+    .btn {
+        width: 100%;
+    }
+
+    }
+
+    /* Animations */
+    .fade-in {
+        animation: fadeIn 0.6s ease-out;
+    }
+
+    @@keyframes fadeIn {
+        from
+
+    {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+
+    }
+</style>
+
+<div class="container">
+    <div class="delete-card fade-in">
+        <!-- Header Section -->
+        <div class="delete-header">
+            <div class="delete-icon">
+                <i class="bi bi-trash3-fill"></i>
+            </div>
+            <h1 class="delete-title">Delete Questionnaire</h1>
+            <p class="delete-subtitle">This action will permanently remove this questionnaire and all associated data</p>
+        </div>
+
+        <!-- Content Section -->
+        <div class="delete-content">
+            <!-- Warning Alert -->
+            <div class="warning-alert">
+                <div class="warning-content">
+                    <h3 class="warning-title">⚠️ Critical Warning</h3>
+                    <ul class="warning-list">
+                        <li><i class="bi bi-x-circle-fill"></i>This action cannot be undone</li>
+                        <li><i class="bi bi-x-circle-fill"></i>All questions and answers will be permanently deleted</li>
+                        <li><i class="bi bi-x-circle-fill"></i>Any survey responses will be lost forever</li>
+                        <li><i class="bi bi-x-circle-fill"></i>Associated data and analytics will be removed</li>
+                    </ul>
                 </div>
-                <div class="modal-body">
-                    <p id="deleteMessage">Are you sure you want to delete this questionnaire</p>
-                    <p class="text-danger">If you delete, you can't recover it.</p>
-                    <input type="text" class="form-control" id="deleteConfirmation" placeholder="Type the questionnaire name to confirm">
+            </div>
+
+            <!-- Questionnaire Information -->
+            <div class="questionnaire-info">
+                <div class="info-header">
+                    <div class="info-icon">
+                        <i class="bi bi-file-text"></i>
+                    </div>
+                    <h2 class="info-title">Questionnaire Details</h2>
                 </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                    <button type="button" class="btn btn-danger" id="deleteButton" disabled>Delete</button>
+
+                <div class="info-grid">
+                    <div class="info-item">
+                        <div class="info-label">Title</div>
+                        <div class="info-value">@Model.Title</div>
+                    </div>
+                    <div class="info-item">
+                        <div class="info-label">Questionnaire ID</div>
+                        <div class="info-value">#@Model.Id</div>
+                    </div>
+                </div>
+
+                <div class="info-description">
+                    <div class="info-label">Description</div>
+                    <div class="info-description-content">
+                        @if (!string.IsNullOrEmpty(Model.Description))
+                        {
+                            @Html.Raw(Model.Description)
+                        }
+                        else
+                        {
+                            <em class="text-muted">No description provided</em>
+                        }
+                    </div>
+                </div>
+            </div>
+
+            <!-- Statistics -->
+            <div class="stats-section">
+                <h3 class="stats-title">
+                    <i class="bi bi-graph-up"></i>
+                    Content Statistics
+                </h3>
+                <div class="stats-grid">
+                    <div class="stat-card">
+                        <span class="stat-number">@Model.Questions.Count</span>
+                        <span class="stat-label">Questions</span>
+                    </div>
+                    <div class="stat-card">
+                        <span class="stat-number">@Model.Questions.Sum(q => q.Answers.Count)</span>
+                        <span class="stat-label">Total Answers</span>
+                    </div>
+                    <div class="stat-card">
+                        <span class="stat-number">@Model.Questions.Count(q => q.Answers.Any(a => a.IsOtherOption))</span>
+                        <span class="stat-label">Other Options</span>
+                    </div>
                 </div>
             </div>
         </div>
+
+        <!-- Action Section -->
+        <div class="action-section">
+            <div class="action-buttons">
+                <button type="button" class="btn btn-danger-custom" data-bs-toggle="modal" data-bs-target="#deleteModal">
+                    <i class="bi bi-trash3-fill"></i>
+                    Delete Questionnaire
+                </button>
+                <a asp-action="Index" class="btn btn-secondary-custom">
+                    <i class="bi bi-arrow-left"></i>
+                    Back to List
+                </a>
+            </div>
+        </div>
     </div>
+</div>
 
-
-   
-
-    <!-- Delete Confirmation Modal -->
-    
+<!-- Enhanced Delete Confirmation Modal -->
+<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header-danger">
+                <h5 class="modal-title-custom" id="deleteModalLabel">
+                    <i class="bi bi-exclamation-triangle-fill"></i>
+                    Confirm Deletion
+                </h5>
+            </div>
+            <div class="modal-body-custom">
+                <p class="modal-message" id="deleteMessage">
+                    Are you absolutely sure you want to delete this questionnaire?
+                </p>
+                <div class="modal-warning">
+                    <i class="bi bi-shield-exclamation"></i>
+                    <strong>This action is irreversible!</strong> Once deleted, this questionnaire and all its data cannot be recovered.
+                </div>
+            </div>
+            <div class="modal-footer-custom">
+                <button type="button" class="btn btn-secondary-custom" data-bs-dismiss="modal">
+                    <i class="bi bi-x"></i>
+                    Cancel
+                </button>
+                <button type="button" class="btn btn-danger-custom" id="deleteButton">
+                    <i class="bi bi-trash3-fill"></i>
+                    Yes, Delete Forever
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
 
 @section Scripts {
-    
-
-      
     <script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.11.4/ckeditor.js"></script>
-        <!-- Add these links in the <head> section of your HTML file -->
-        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
-        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
 
     <script>
-        CKEDITOR.replace("Description");
-    </script>
-    @{
-            <partial name="_ValidationScriptsPartial" />
-    }
-    <script>
-    
-            $(document).ready(function () {
-                var itemId = @Model.Id; // Assuming you can get the item ID from the model
+        $(document).ready(function () {
+            var itemId = @Model.Id;
 
-                // Enable delete button when the input matches the item name
-                $('#deleteConfirmation').on('input', function () {
-                    var itemName = '@Model.Title'; // Item name from the model
-                    var inputText = $(this).val().trim().toLowerCase();
-                    var isMatch = inputText === itemName.toLowerCase();
-                    // var space = $(this).val.space();
-                    $('#deleteButton').prop('disabled', !isMatch);
-                });
+            // Enhanced delete button click event
+            $('#deleteButton').on('click', function () {
+                var $btn = $(this);
+                var $modal = $('#deleteModal');
 
-                // Clear input and disable button when modal is hidden
-                $('#deleteModal').on('hidden.bs.modal', function () {
-                    $('#deleteConfirmation').val('');
-                    $('#deleteButton').prop('disabled', true);
-                });
+                // Add loading state
+                $btn.addClass('loading').prop('disabled', true);
 
-                // Delete button click event
-                $('#deleteButton').on('click', function () {
-                    // Make an AJAX request to delete the item
-                    $.ajax({
-                        url: '/admin/Questionnaire/Delete/' + itemId,
-                        type: 'POST', // or 'DELETE' if you have a dedicated delete action
-                        success: function (result) {
-                            // Hide the confirmation details
-                            $('#deleteConfirmation, .text-danger').hide();
-                            $('#deleteButton').hide();
-                            // Show the success message
-                            $('#deleteMessage').text('Questionnaire deleted successfully.').addClass('text-success h4').show();
-                            // Show the modal
-                            $('#deleteModal').modal('show');
-                            // Automatically close the modal after 4 seconds
-                            setTimeout(function () {
-                                $('#deleteModal').modal('hide');
-                                // Redirect to the index action method after closing the modal
-                                window.location.href = '/admin/Questionnaire/Index';
-                            }, 1000);
-                        },
-                        error: function (error) {
-                            // Handle error
-                            $('#deleteMessage').text('Failed to delete item.').show();
-                            // Show the modal
-                            $('#deleteModal').modal('show');
-                            // Automatically close the modal after 4 seconds
-                            setTimeout(function () {
-                                $('#deleteModal').modal('hide');
-                            }, 1000);
-                        }
-                    });
-                });
-               
+                // Make AJAX request to delete the item
+                $.ajax({
+                    url: '/admin/Questionnaire/Delete/' + itemId,
+                    type: 'POST',
+                    success: function (result) {
+                        // Update modal content to show success
+                        $('.modal-header-danger').removeClass('modal-header-danger').css({
+                            'background': 'linear-gradient(135deg, #10b981 0%, #059669 100%)'
+                        });
 
-            });
+                        $('.modal-title-custom').html('<i class="bi bi-check-circle-fill"></i> Success');
 
+                        $('#deleteMessage').html('<div class="success-message"><i class="bi bi-check-circle-fill"></i>Questionnaire deleted successfully!</div>');
 
-    </script> 
+                        $('.modal-warning').hide();
+                        $('.modal-footer-custom').hide();
 
-    <script>
-            $(document).ready(function () {
-                $(".readMoreBtn").click(function () {
-                    $(this).closest('.text-danger').find('.more-title').toggle();
-                    $(this).text(function (_, text) {
-                        return text === "Read More" ? "Read Less" : "Read More";
-                    });
+                        // Automatically redirect after showing success
+                        setTimeout(function () {
+                            $modal.modal('hide');
+                            window.location.href = '/admin/Questionnaire/Index';
+                        }, 2000);
+                    },
+                    error: function (xhr, status, error) {
+                        // Remove loading state
+                        $btn.removeClass('loading').prop('disabled', false);
+
+                        // Show error message
+                        $('#deleteMessage').html('<div class="text-danger"><i class="bi bi-exclamation-triangle-fill"></i> Failed to delete questionnaire. Please try again.</div>');
+
+                        // Auto-hide error message after 3 seconds
+                        setTimeout(function () {
+                            $modal.modal('hide');
+                        }, 3000);
+                    }
                 });
             });
 
+            // Reset modal when hidden
+            $('#deleteModal').on('hidden.bs.modal', function () {
+                // Reset button state
+                $('#deleteButton').removeClass('loading').prop('disabled', false);
 
+                // Reset modal content if needed
+                $('.modal-header-danger').css({
+                    'background': 'linear-gradient(135deg, var(--danger-color) 0%, var(--danger-dark) 100%)'
+                });
+
+                $('.modal-title-custom').html('<i class="bi bi-exclamation-triangle-fill"></i> Confirm Deletion');
+                $('#deleteMessage').text('Are you absolutely sure you want to delete this questionnaire?');
+                $('.modal-warning').show();
+                $('.modal-footer-custom').show();
+            });
+        });
     </script>
-
-}  
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/Web/Areas/Admin/Views/Questionnaire/Details.cshtml b/Web/Areas/Admin/Views/Questionnaire/Details.cshtml
index 229e3e3..03d34b7 100644
--- a/Web/Areas/Admin/Views/Questionnaire/Details.cshtml
+++ b/Web/Areas/Admin/Views/Questionnaire/Details.cshtml
@@ -1,121 +1,804 @@
 @model QuestionnaireViewModel
 
 @{
-    ViewData["Title"] = "Details";
+    ViewData["Title"] = "Questionnaire Details";
 }
 
+<style>
+    /* Modern Design System */
+    @@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
 
+    :root {
+        --primary-color: #6366f1;
+        --primary-light: #8b5cf6;
+        --primary-dark: #4338ca;
+        --success-color: #10b981;
+        --success-light: #34d399;
+        --success-dark: #059669;
+        --info-color: #06b6d4;
+        --info-light: #22d3ee;
+        --info-dark: #0891b2;
+        --warning-color: #f59e0b;
+        --warning-light: #fbbf24;
+        --warning-dark: #d97706;
+        --gray-50: #f8fafc;
+        --gray-100: #f1f5f9;
+        --gray-200: #e2e8f0;
+        --gray-300: #cbd5e1;
+        --gray-400: #94a3b8;
+        --gray-500: #64748b;
+        --gray-600: #475569;
+        --gray-700: #334155;
+        --gray-800: #1e293b;
+        --gray-900: #0f172a;
+        --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+        --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+        --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+        --border-radius-sm: 8px;
+        --border-radius-md: 12px;
+        --border-radius-lg: 16px;
+        --border-radius-xl: 24px;
+    }
 
-<div class="container p-4">
-    <div>
-        <a class="btn btn-primary" asp-action="Index">Back to List</a>
+    * {
+        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    }
 
+    body {
+        background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
+        min-height: 100vh;
+        padding: 2rem 0;
+    }
+
+    .container {
+        max-width: 1200px;
+    }
+
+    /* Header Section */
+    .page-header {
+        background: white;
+        border-radius: var(--border-radius-xl);
+        box-shadow: var(--shadow-xl);
+        padding: 2.5rem;
+        margin-bottom: 2rem;
+        position: relative;
+        overflow: hidden;
+    }
+
+        .page-header::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 4px;
+            background: linear-gradient(90deg, var(--primary-color), var(--primary-light), var(--info-color));
+        }
+
+    .header-content {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        gap: 1.5rem;
+    }
+
+    .header-info {
+        display: flex;
+        align-items: center;
+        gap: 1.5rem;
+    }
+
+    .header-icon {
+        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
+        color: white;
+        width: 64px;
+        height: 64px;
+        border-radius: var(--border-radius-lg);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1.75rem;
+        box-shadow: var(--shadow-lg);
+    }
+
+    .header-text h1 {
+        font-size: 2rem;
+        font-weight: 800;
+        color: var(--gray-800);
+        margin: 0 0 0.5rem;
+    }
+
+    .header-subtitle {
+        color: var(--gray-600);
+        font-size: 1rem;
+        font-weight: 500;
+    }
+
+    .back-button {
+        background: linear-gradient(135deg, var(--gray-500) 0%, var(--gray-600) 100%);
+        color: white;
+        border: none;
+        padding: 0.75rem 1.5rem;
+        border-radius: var(--border-radius-md);
+        font-weight: 600;
+        text-decoration: none;
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        transition: all 0.3s ease;
+        box-shadow: var(--shadow-md);
+    }
+
+        .back-button:hover {
+            background: linear-gradient(135deg, var(--gray-600) 0%, var(--gray-700) 100%);
+            transform: translateY(-2px);
+            box-shadow: var(--shadow-lg);
+            color: white;
+            text-decoration: none;
+        }
+
+    /* Main Content */
+    .main-content {
+        background: white;
+        border-radius: var(--border-radius-xl);
+        box-shadow: var(--shadow-xl);
+        overflow: hidden;
+        margin-bottom: 2rem;
+    }
+
+    /* Overview Section */
+    .overview-section {
+        background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
+        padding: 2.5rem;
+        border-bottom: 1px solid var(--gray-200);
+    }
+
+    .overview-header {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        margin-bottom: 2rem;
+    }
+
+    .overview-icon {
+        background: var(--info-color);
+        color: white;
+        width: 48px;
+        height: 48px;
+        border-radius: var(--border-radius-md);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1.5rem;
+    }
+
+    .overview-title {
+        font-size: 1.5rem;
+        font-weight: 700;
+        color: var(--gray-800);
+        margin: 0;
+    }
+
+    .overview-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+        gap: 1.5rem;
+    }
+
+    .overview-card {
+        background: white;
+        padding: 1.5rem;
+        border-radius: var(--border-radius-lg);
+        border: 1px solid var(--gray-200);
+        box-shadow: var(--shadow-sm);
+        transition: all 0.3s ease;
+    }
+
+        .overview-card:hover {
+            transform: translateY(-2px);
+            box-shadow: var(--shadow-md);
+        }
+
+    .overview-card-header {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        margin-bottom: 1rem;
+    }
+
+    .overview-card-icon {
+        width: 36px;
+        height: 36px;
+        border-radius: var(--border-radius-sm);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1.1rem;
+        color: white;
+    }
+
+        .overview-card-icon.warning {
+            background: var(--warning-color);
+        }
+
+        .overview-card-icon.primary {
+            background: var(--primary-color);
+        }
+
+        .overview-card-icon.success {
+            background: var(--success-color);
+        }
+
+        .overview-card-icon.info {
+            background: var(--info-color);
+        }
+
+    .overview-card-label {
+        font-size: 0.875rem;
+        font-weight: 600;
+        color: var(--gray-500);
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+    }
+
+    .overview-card-value {
+        font-size: 1.5rem;
+        font-weight: 700;
+        color: var(--gray-800);
+        word-break: break-word;
+        line-height: 1.3;
+    }
+
+    .description-card {
+        grid-column: 1 / -1;
+    }
+
+    .description-content {
+        color: var(--gray-700);
+        line-height: 1.6;
+        font-size: 1rem;
+        margin-top: 0.5rem;
+    }
+
+    /* Questions Section */
+    .questions-section {
+        padding: 2.5rem;
+    }
+
+    .questions-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 2rem;
+        flex-wrap: wrap;
+        gap: 1rem;
+    }
+
+    .questions-title {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+    }
+
+    .questions-icon {
+        background: var(--success-color);
+        color: white;
+        width: 48px;
+        height: 48px;
+        border-radius: var(--border-radius-md);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1.5rem;
+    }
+
+    .questions-title h2 {
+        font-size: 1.5rem;
+        font-weight: 700;
+        color: var(--gray-800);
+        margin: 0;
+    }
+
+    .questions-count {
+        background: linear-gradient(135deg, var(--success-color) 0%, var(--success-dark) 100%);
+        color: white;
+        padding: 0.5rem 1rem;
+        border-radius: var(--border-radius-md);
+        font-weight: 600;
+        font-size: 0.875rem;
+        box-shadow: var(--shadow-sm);
+    }
+
+    /* Question Cards */
+    .questions-grid {
+        display: grid;
+        gap: 2rem;
+    }
+
+    .question-card {
+        background: linear-gradient(135deg, var(--gray-50) 0%, white 100%);
+        border-radius: var(--border-radius-lg);
+        border: 1px solid var(--gray-200);
+        box-shadow: var(--shadow-md);
+        overflow: hidden;
+        transition: all 0.3s ease;
+    }
+
+        .question-card:hover {
+            transform: translateY(-4px);
+            box-shadow: var(--shadow-xl);
+        }
+
+    .question-header {
+        background: linear-gradient(135deg, var(--success-color) 0%, var(--success-dark) 100%);
+        color: white;
+        padding: 1.5rem;
+        position: relative;
+        overflow: hidden;
+    }
+
+        .question-header::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><defs><radialGradient id="a" cx="50%" cy="0%" r="100%"><stop offset="0%" stop-color="white" stop-opacity="0.1"/><stop offset="100%" stop-color="white" stop-opacity="0"/></radialGradient></defs><rect width="100" height="20" fill="url(%23a)"/></svg>');
+            opacity: 0.3;
+        }
+
+    .question-meta {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 1rem;
+        position: relative;
+        z-index: 1;
+    }
+
+    .question-id {
+        background: rgba(255, 255, 255, 0.2);
+        padding: 0.375rem 0.75rem;
+        border-radius: var(--border-radius-sm);
+        font-weight: 600;
+        font-size: 0.875rem;
+    }
+
+    .question-type {
+        background: rgba(255, 255, 255, 0.2);
+        padding: 0.375rem 0.75rem;
+        border-radius: var(--border-radius-sm);
+        font-weight: 600;
+        font-size: 0.875rem;
+    }
+
+    .question-text {
+        font-size: 1.25rem;
+        font-weight: 700;
+        margin: 0;
+        position: relative;
+        z-index: 1;
+        line-height: 1.4;
+    }
+
+    /* Answers Section */
+    .answers-section {
+        padding: 2rem;
+    }
+
+    .answers-header {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        margin-bottom: 1.5rem;
+    }
+
+    .answers-icon {
+        background: var(--info-color);
+        color: white;
+        width: 32px;
+        height: 32px;
+        border-radius: var(--border-radius-sm);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1rem;
+    }
+
+    .answers-title {
+        font-size: 1.1rem;
+        font-weight: 600;
+        color: var(--gray-800);
+        margin: 0;
+    }
+
+    .answers-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+        gap: 1rem;
+    }
+
+    .answer-card {
+        background: white;
+        border: 2px solid var(--gray-200);
+        border-radius: var(--border-radius-md);
+        padding: 1rem;
+        transition: all 0.3s ease;
+        position: relative;
+    }
+
+        .answer-card:hover {
+            border-color: var(--info-color);
+            box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
+            transform: translateY(-1px);
+        }
+
+        .answer-card.other-option {
+            border-color: var(--warning-color);
+            background: linear-gradient(135deg, #fef3c7 0%, #fde68a 20%, white 100%);
+        }
+
+            .answer-card.other-option::before {
+                content: "OTHER";
+                position: absolute;
+                top: -8px;
+                left: 12px;
+                background: var(--warning-color);
+                color: white;
+                padding: 0.25rem 0.5rem;
+                border-radius: var(--border-radius-sm);
+                font-size: 0.625rem;
+                font-weight: 700;
+                letter-spacing: 0.5px;
+            }
+
+    .answer-meta {
+        display: flex;
+        align-items: center;
+        justify-content: between;
+        gap: 0.75rem;
+        margin-bottom: 0.75rem;
+    }
+
+    .answer-id {
+        background: linear-gradient(135deg, var(--info-color) 0%, var(--info-dark) 100%);
+        color: white;
+        padding: 0.25rem 0.5rem;
+        border-radius: var(--border-radius-sm);
+        font-weight: 600;
+        font-size: 0.75rem;
+    }
+
+    .answer-text {
+        font-size: 1rem;
+        font-weight: 600;
+        color: var(--gray-800);
+        line-height: 1.4;
+        word-break: break-word;
+    }
+
+    /* Empty State */
+    .empty-state {
+        text-align: center;
+        padding: 3rem;
+        color: var(--gray-500);
+    }
+
+        .empty-state i {
+            font-size: 3rem;
+            margin-bottom: 1rem;
+            color: var(--gray-400);
+        }
+
+        .empty-state h3 {
+            font-size: 1.25rem;
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+        }
+
+    /* Stats Summary */
+    .stats-summary {
+        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
+        color: white;
+        padding: 2rem;
+        margin-bottom: 2rem;
+        border-radius: var(--border-radius-lg);
+        box-shadow: var(--shadow-lg);
+    }
+
+    .stats-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+        gap: 1.5rem;
+        text-align: center;
+    }
+
+    .stat-item {
+        padding: 1rem;
+        background: rgba(255, 255, 255, 0.1);
+        border-radius: var(--border-radius-md);
+        backdrop-filter: blur(10px);
+    }
+
+    .stat-number {
+        font-size: 2rem;
+        font-weight: 800;
+        display: block;
+        margin-bottom: 0.25rem;
+    }
+
+    .stat-label {
+        font-size: 0.875rem;
+        font-weight: 500;
+        opacity: 0.9;
+    }
+
+    /* Footer Actions */
+    .footer-actions {
+        text-align: center;
+        margin-top: 2rem;
+    }
+
+    /* Responsive Design */
+    @@media (max-width: 768px) {
+        .container
+
+    {
+        padding: 0 1rem;
+    }
+
+    .header-content {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .header-info {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 1rem;
+    }
+
+    .overview-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .questions-header {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .answers-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .stats-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    }
+
+    /* Animations */
+    .fade-in {
+        animation: fadeIn 0.6s ease-out;
+    }
+
+    @@keyframes fadeIn {
+        from
+
+    {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+
+    }
+
+    .slide-in {
+        animation: slideIn 0.4s ease-out;
+    }
+
+    @@keyframes slideIn {
+        from
+
+    {
+        opacity: 0;
+        transform: translateX(-20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+
+    }
+</style>
+
+<div class="container">
+    <!-- Page Header -->
+    <div class="page-header fade-in">
+        <div class="header-content">
+            <div class="header-info">
+                <div class="header-icon">
+                    <i class="bi bi-file-text-fill"></i>
+                </div>
+                <div class="header-text">
+                    <h1>Questionnaire Details</h1>
+                    <p class="header-subtitle">Complete overview of questionnaire structure and content</p>
+                </div>
+            </div>
+            <a asp-action="Index" class="back-button">
+                <i class="bi bi-arrow-left"></i>
+                Back to List
+            </a>
+        </div>
     </div>
 
-    <div class="card">
-        <div class="card-header">
-            Details
-        </div>
-       
-        <div class="card-body shadow rounded ">
-            <div class="card-title">
-
-               
-              <h4>Questionnaire details</h4>
-              <br />
-                <div>
-                    <span class="badge badge-warning shadow text-white m-1 p-2">ID</span>
-                </div>
-              <div>
-                 <span class="badge badge-primary shadow m-1 p-2">Questionnaire</span>
-              </div>
-                <div>
-                    <span class="badge badge-success shadow m-1 p-2">Question</span>
-                </div>
-                <div>
-                    <span class="badge badge-info shadow m-1 p-2">Answer</span>
-                </div>
-              
+    <!-- Stats Summary -->
+    <div class="stats-summary fade-in">
+        <div class="stats-grid">
+            <div class="stat-item">
+                <span class="stat-number">@Model.Questions.Count</span>
+                <span class="stat-label">Questions</span>
             </div>
-            <table class="table table-responsive  table-bordered table-hover  ">
-                <thead>
-                    <tr >
-                        <th scope="col" class="text-warning h5">ID</th>
-                        <th scope="col" class="text-primary h5">Questionnaire</th>
-                        <th scope="col" class="text-success h5 ">Questions</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <th scope="row"><span class="badge p-2 m-1 bg-warning shadow-sm rounded">@Model.Id</span></th>
-                        <th scope="row">
+            <div class="stat-item">
+                <span class="stat-number">@Model.Questions.Sum(q => q.Answers.Count)</span>
+                <span class="stat-label">Total Answers</span>
+            </div>
+            <div class="stat-item">
+                <span class="stat-number">@Model.Questions.Count(q => q.Answers.Any(a => a.IsOtherOption))</span>
+                <span class="stat-label">Other Options</span>
+            </div>
+            <div class="stat-item">
+                <span class="stat-number">@Model.Questions.Select(q => q.Type).Distinct().Count()</span>
+                <span class="stat-label">Question Types</span>
+            </div>
+        </div>
+    </div>
 
-                            <span class="badge p-2 m-1 bg-primary shadow-sm rounded">@Model.Title</span>
-                          
-                        </th>
-                       
-                       
-                        <td class="h6">
-                            <table class="table table-responsive w-100 d-block d-md-table table-bordered table-hover  ">
-                                <tr >
-                                    <th class="text-success">Id</th>
-                                    <th class="text-success">Question</th>
-                                    <th class="text-success">Question Type</th>
-                                    <th class="text-info">Answers</th>
-                                </tr>
+    <!-- Main Content -->
+    <div class="main-content fade-in">
+        <!-- Overview Section -->
+        <div class="overview-section">
+            <div class="overview-header">
+                <div class="overview-icon">
+                    <i class="bi bi-info-circle-fill"></i>
+                </div>
+                <h2 class="overview-title">Overview</h2>
+            </div>
 
-                                @foreach (var question in Model.Questions)
+            <div class="overview-grid">
+                <div class="overview-card slide-in">
+                    <div class="overview-card-header">
+                        <div class="overview-card-icon warning">
+                            <i class="bi bi-hash"></i>
+                        </div>
+                        <span class="overview-card-label">ID</span>
+                    </div>
+                    <div class="overview-card-value">#@Model.Id</div>
+                </div>
+
+                <div class="overview-card slide-in">
+                    <div class="overview-card-header">
+                        <div class="overview-card-icon primary">
+                            <i class="bi bi-card-heading"></i>
+                        </div>
+                        <span class="overview-card-label">Title</span>
+                    </div>
+                    <div class="overview-card-value">@Model.Title</div>
+                </div>
+
+                <div class="overview-card description-card slide-in">
+                    <div class="overview-card-header">
+                        <div class="overview-card-icon info">
+                            <i class="bi bi-card-text"></i>
+                        </div>
+                        <span class="overview-card-label">Description</span>
+                    </div>
+                    <div class="description-content">
+                        @if (!string.IsNullOrEmpty(Model.Description))
+                        {
+                            @Html.Raw(Model.Description)
+                        }
+                        else
+                        {
+                            <em class="text-muted">No description provided</em>
+                        }
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Questions Section -->
+        <div class="questions-section">
+            <div class="questions-header">
+                <div class="questions-title">
+                    <div class="questions-icon">
+                        <i class="bi bi-question-circle-fill"></i>
+                    </div>
+                    <h2>Questions</h2>
+                </div>
+                <div class="questions-count">
+                    @Model.Questions.Count Question@(Model.Questions.Count != 1 ? "s" : "")
+                </div>
+            </div>
+
+            @if (Model.Questions.Any())
+            {
+                <div class="questions-grid">
+                    @foreach (var question in Model.Questions.Select((q, index) => new { Question = q, Index = index }))
+                    {
+                        <div class="question-card slide-in">
+                            <div class="question-header">
+                                <div class="question-meta">
+                                    <span class="question-id">ID: @question.Question.Id</span>
+                                    <span class="question-type">@question.Question.Type</span>
+                                </div>
+                                <h3 class="question-text">
+                                    Question @(question.Index + 1): @question.Question.Text
+                                </h3>
+                            </div>
+
+                            <div class="answers-section">
+                                <div class="answers-header">
+                                    <div class="answers-icon">
+                                        <i class="bi bi-list-ul"></i>
+                                    </div>
+                                    <h4 class="answers-title">
+                                        Answers (@question.Question.Answers.Count)
+                                    </h4>
+                                </div>
+
+                                @if (question.Question.Answers.Any())
                                 {
-                                    <tr>
-                                        <td> <span class="badge p-2 m-1 bg-success ">@question.Id</span></td>
-                                        <td>
-                                            <span class="badge p-2 m-1 bg-success ">@question.Text</span>
-                                        </td>
-                                        <td>
-                                            <span class="badge p-2 m-1 bg-success ">@question.Type</span>
-                                        </td>
-                                        <td>
-                                            <table class="table-borderless">
-                                               <tr>
-                                                    <th class="text-info">Id</th>
-                                                    <th class="text-info">Answer</th>
-                                               </tr>
-                                                @foreach (var answer in question.Answers)
-                                                {
-                                                   <tr>
-                                                        <td>
-                                                            <span class="badge p-2 m-1 bg-info shadow-sm">@answer.Id</span>
-                                                        </td>
-                                                        <td>
-                                                            <span class="badge p-2 m-1 bg-info shadow-sm">@answer.Text</span>
-                                                        </td>
-                                                   </tr>
-                                                       
-                                                  
-                                                }
-                                            </table>
-                                        </td>
-                                    </tr>
+                                    <div class="answers-grid">
+                                        @foreach (var answer in question.Question.Answers)
+                                        {
+                                            <div class="answer-card @(answer.IsOtherOption ? "other-option" : "")">
+                                                <div class="answer-meta">
+                                                    <span class="answer-id">ID: @answer.Id</span>
+                                                </div>
+                                                <div class="answer-text">@answer.Text</div>
+                                            </div>
+                                        }
+                                    </div>
                                 }
-                            </table>
-
-                           
-                        </td>
-
-                    </tr>
-                  
-                </tbody>
-              
-            </table>
-            <div>
-                <a class="btn btn-primary" asp-action="Index">Back to List</a>
-               
-            </div>
+                                else
+                                {
+                                    <div class="empty-state">
+                                        <i class="bi bi-inbox"></i>
+                                        <h3>No Answers</h3>
+                                        <p>This question doesn't have any answer options.</p>
+                                    </div>
+                                }
+                            </div>
+                        </div>
+                    }
+                </div>
+            }
+            else
+            {
+                <div class="empty-state">
+                    <i class="bi bi-question-circle"></i>
+                    <h3>No Questions</h3>
+                    <p>This questionnaire doesn't contain any questions yet.</p>
+                </div>
+            }
         </div>
-      
     </div>
-    
-    
-</div>
-
 
+    <!-- Footer Actions -->
+    <div class="footer-actions">
+        <a asp-action="Index" class="back-button">
+            <i class="bi bi-arrow-left"></i>
+            Back to List
+        </a>
+    </div>
+</div>
\ No newline at end of file
diff --git a/Web/Areas/Admin/Views/Questionnaire/Edit.cshtml b/Web/Areas/Admin/Views/Questionnaire/Edit.cshtml
index eeec880..5ac74ad 100644
--- a/Web/Areas/Admin/Views/Questionnaire/Edit.cshtml
+++ b/Web/Areas/Admin/Views/Questionnaire/Edit.cshtml
@@ -263,6 +263,50 @@
             color: white;
         }
 
+    /* Bulk Selection Controls */
+    .bulk-selection-controls {
+        background: white;
+        border-radius: var(--border-radius-lg);
+        padding: 2rem;
+        margin: 2rem 0;
+        box-shadow: var(--shadow-lg);
+        border: 1px solid var(--gray-200);
+        display: none;
+        transition: all 0.3s ease;
+    }
+
+        .bulk-selection-controls.show {
+            display: block;
+            animation: slideDown 0.3s ease;
+        }
+
+    @@keyframes slideDown {
+        from
+
+    {
+        opacity: 0;
+        transform: translateY(-20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+
+    }
+
+    .selection-summary {
+        background: linear-gradient(135deg, var(--info-color) 0%, #0891b2 100%);
+        color: white;
+        padding: 1rem 1.5rem;
+        border-radius: var(--border-radius-md);
+        margin-bottom: 1.5rem;
+        font-weight: 600;
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+    }
+
     /* Question Container Enhancements */
     #customCard {
         background: white;
@@ -328,6 +372,96 @@
                 transform: scaleY(1);
             }
 
+        .question.selected {
+            border-color: var(--danger-color);
+            background: linear-gradient(135deg, #fef2f2 0%, #fecaca 10%, white 100%);
+            box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1), var(--shadow-lg);
+        }
+
+            .question.selected::before {
+                background: linear-gradient(135deg, var(--danger-color), #dc2626);
+                transform: scaleY(1);
+            }
+
+    /* Question Checkbox Styling */
+    .question-checkbox {
+        position: absolute;
+        top: 1.5rem;
+        right: 1.5rem;
+        z-index: 10;
+    }
+
+    .custom-checkbox {
+        width: 24px;
+        height: 24px;
+        border: 2px solid var(--gray-300);
+        border-radius: 6px;
+        background: white;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        box-shadow: var(--shadow-sm);
+    }
+
+        .custom-checkbox:hover {
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+        }
+
+        .custom-checkbox.checked {
+            background: var(--danger-color);
+            border-color: var(--danger-color);
+            color: white;
+        }
+
+        .custom-checkbox input {
+            display: none;
+        }
+
+    /* Master checkbox styling */
+    .master-checkbox-container {
+        background: white;
+        border-radius: var(--border-radius-md);
+        padding: 1.5rem;
+        margin: 2rem 0;
+        box-shadow: var(--shadow-md);
+        border: 1px solid var(--gray-200);
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+    }
+
+    .master-checkbox {
+        width: 28px;
+        height: 28px;
+        border: 2px solid var(--gray-300);
+        border-radius: 8px;
+        background: white;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        box-shadow: var(--shadow-sm);
+    }
+
+        .master-checkbox:hover {
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+        }
+
+        .master-checkbox.checked {
+            background: var(--primary-color);
+            border-color: var(--primary-color);
+            color: white;
+        }
+
+        .master-checkbox input {
+            display: none;
+        }
+
     /* Question Separator */
     .question-separator {
         display: flex;
@@ -366,11 +500,12 @@
     /* Question Title Styling */
     .question-title {
         background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
-        padding: 2rem;
+        padding: 2rem 2rem 2rem 3rem;
         border-radius: var(--border-radius-md);
         border: 1px solid var(--gray-200);
         margin-bottom: 1.5rem;
         transition: all 0.3s ease;
+        position: relative;
     }
 
         .question-title:hover {
@@ -689,7 +824,7 @@
 
                 <!-- Basic Information -->
                 <div class="row">
-                    <div class="col-md-6">
+                    <div class="col-md-12">
                         <div class="form-group">
                             <label asp-for="Title" class="control-label">
                                 <i class="bi bi-card-heading me-2"></i>Survey Title
@@ -698,7 +833,7 @@
                             <span asp-validation-for="Title" class="text-danger"></span>
                         </div>
                     </div>
-                    <div class="col-md-6">
+                    <div class="col-md-12">
                         <div class="form-group">
                             <label asp-for="Description" class="control-label">
                                 <i class="bi bi-card-text me-2"></i>Description
@@ -715,10 +850,48 @@
                         <h4><i class="bi bi-question-circle me-2"></i>Edit Questions or Add New Questions</h4>
                     </div>
 
+                    <!-- Master Checkbox for Select All -->
+                    <div class="master-checkbox-container">
+                        <div class="master-checkbox" id="selectAllCheckbox">
+                            <input type="checkbox" id="selectAllInput">
+                            <i class="bi bi-check" style="display: none;"></i>
+                        </div>
+                        <label for="selectAllInput" class="mb-0 font-weight-bold">
+                            <i class="bi bi-check-square me-2"></i>Select All Questions
+                        </label>
+                        <div class="ms-auto">
+                            <span id="selectedCount" class="badge bg-primary">0 selected</span>
+                        </div>
+                    </div>
+
+                    <!-- Bulk Selection Controls -->
+                    <div class="bulk-selection-controls" id="bulkControls">
+                        <div class="selection-summary">
+                            <i class="bi bi-info-circle"></i>
+                            <span id="bulkSelectionText">0 questions selected</span>
+                        </div>
+                        <div class="d-flex gap-3 flex-wrap">
+                            <button type="button" class="btn btn-danger" id="deleteSelectedQuestions">
+                                <i class="bi bi-trash-fill"></i> Delete Selected Questions
+                            </button>
+                            <button type="button" class="btn btn-secondary" id="deselectAll">
+                                <i class="bi bi-x-circle"></i> Deselect All
+                            </button>
+                        </div>
+                    </div>
+
                     <div id="questionsContainer">
                         @for (int i = 0; i < Model.Questions.Count; i++)
                         {
-                            <div class="question fade-in">
+                            <div class="question fade-in" data-question-index="@i">
+                                <!-- Question Checkbox -->
+                                <div class="question-checkbox">
+                                    <div class="custom-checkbox question-select-checkbox">
+                                        <input type="checkbox" class="question-checkbox-input">
+                                        <i class="bi bi-check" style="display: none;"></i>
+                                    </div>
+                                </div>
+
                                 <div class="question-separator">
                                     <div class="line-container">
                                         <hr class="line-start">
@@ -837,7 +1010,7 @@
     </div>
 </div>
 
-<!-- Enhanced Confirmation Modal -->
+<!-- Enhanced Confirmation Modal for Single Question -->
 <div class="modal fade" id="confirmDeleteModal" tabindex="-1" aria-labelledby="confirmDeleteModalLabel" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
@@ -866,6 +1039,50 @@
     </div>
 </div>
 
+<!-- Enhanced Bulk Delete Confirmation Modal -->
+<div class="modal fade" id="confirmBulkDeleteModal" tabindex="-1" aria-labelledby="confirmBulkDeleteModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="confirmBulkDeleteModalLabel">
+                    <i class="bi bi-exclamation-triangle me-2"></i>Confirm Multiple Deletion
+                </h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <div class="alert alert-danger">
+                    <i class="bi bi-exclamation-triangle me-2"></i>
+                    <strong>Critical Warning:</strong> You are about to delete <span id="deletionCount" class="fw-bold">0</span> question(s).
+                </div>
+                <p class="mb-3">This action will permanently remove:</p>
+                <ul class="list-unstyled">
+                    <li class="mb-2"><i class="bi bi-check text-danger me-2"></i><span id="questionCount">0</span> questions</li>
+                    <li class="mb-2"><i class="bi bi-check text-danger me-2"></i>All associated answers</li>
+                    <li class="mb-2"><i class="bi bi-check text-danger me-2"></i>All related user responses</li>
+                </ul>
+                <div class="alert alert-warning">
+                    <i class="bi bi-info-circle me-2"></i>
+                    <strong>Note:</strong> This action cannot be undone. Please ensure you want to proceed with this bulk deletion.
+                </div>
+                <div class="preview-container" id="deletionPreview">
+                    <h6 class="fw-bold mb-3">Questions to be deleted:</h6>
+                    <div class="preview-list" style="max-height: 200px; overflow-y: auto; background: #f8f9fa; padding: 1rem; border-radius: 8px;">
+                        <!-- Preview questions will be populated here -->
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+                    <i class="bi bi-x"></i> Cancel
+                </button>
+                <button type="button" class="btn btn-danger" id="confirmBulkDelete">
+                    <i class="bi bi-trash"></i> Delete All Selected Questions
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
 @section Scripts {
     <script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.11.4/ckeditor.js"></script>
     <script>
@@ -879,11 +1096,250 @@
     <script>
         $(document).ready(function () {
             let questionToDelete = null;
+            let selectedQuestions = [];
+
+            // Update selection UI
+            function updateSelectionUI() {
+                const selectedCount = selectedQuestions.length;
+                $('#selectedCount').text(selectedCount + ' selected');
+                $('#bulkSelectionText').text(selectedCount + ' question' + (selectedCount !== 1 ? 's' : '') + ' selected');
+
+                if (selectedCount > 0) {
+                    $('#bulkControls').addClass('show');
+                } else {
+                    $('#bulkControls').removeClass('show');
+                }
+
+                // Update master checkbox state
+                const totalQuestions = $('.question-checkbox-input').length;
+                const masterCheckbox = $('#selectAllCheckbox');
+                const masterInput = $('#selectAllInput');
+
+                if (selectedCount === 0) {
+                    masterCheckbox.removeClass('checked');
+                    masterInput.prop('checked', false);
+                    masterCheckbox.find('i').hide();
+                } else if (selectedCount === totalQuestions) {
+                    masterCheckbox.addClass('checked');
+                    masterInput.prop('checked', true);
+                    masterCheckbox.find('i').show();
+                } else {
+                    masterCheckbox.removeClass('checked');
+                    masterInput.prop('checked', false);
+                    masterCheckbox.find('i').hide();
+                }
+            }
+
+            // Handle individual question checkbox clicks
+            $(document).on('change', '.question-checkbox-input', function() {
+                const questionContainer = $(this).closest('.question');
+                const questionIndex = questionContainer.data('question-index');
+                const checkbox = $(this).closest('.custom-checkbox');
+
+                if ($(this).is(':checked')) {
+                    if (!selectedQuestions.includes(questionIndex)) {
+                        selectedQuestions.push(questionIndex);
+                        questionContainer.addClass('selected');
+                        checkbox.addClass('checked');
+                        checkbox.find('i').show();
+                    }
+                } else {
+                    selectedQuestions = selectedQuestions.filter(q => q !== questionIndex);
+                    questionContainer.removeClass('selected');
+                    checkbox.removeClass('checked');
+                    checkbox.find('i').hide();
+                }
+
+                updateSelectionUI();
+            });
+
+            // Handle checkbox visual clicks
+            $(document).on('click', '.question-select-checkbox', function() {
+                const input = $(this).find('input');
+                input.prop('checked', !input.is(':checked')).trigger('change');
+            });
+
+            // Handle master checkbox
+            $('#selectAllCheckbox').click(function() {
+                const shouldSelectAll = selectedQuestions.length !== $('.question-checkbox-input').length;
+
+                $('.question-checkbox-input').each(function() {
+                    const questionContainer = $(this).closest('.question');
+                    const questionIndex = questionContainer.data('question-index');
+                    const checkbox = $(this).closest('.custom-checkbox');
+
+                    $(this).prop('checked', shouldSelectAll);
+
+                    if (shouldSelectAll) {
+                        if (!selectedQuestions.includes(questionIndex)) {
+                            selectedQuestions.push(questionIndex);
+                        }
+                        questionContainer.addClass('selected');
+                        checkbox.addClass('checked');
+                        checkbox.find('i').show();
+                    } else {
+                        selectedQuestions = [];
+                        questionContainer.removeClass('selected');
+                        checkbox.removeClass('checked');
+                        checkbox.find('i').hide();
+                    }
+                });
+
+                updateSelectionUI();
+            });
+
+            // Deselect all button
+            $('#deselectAll').click(function() {
+                selectedQuestions = [];
+                $('.question-checkbox-input').prop('checked', false);
+                $('.question').removeClass('selected');
+                $('.custom-checkbox').removeClass('checked');
+                $('.custom-checkbox i').hide();
+                updateSelectionUI();
+            });
+
+            // Handle bulk delete button
+            $('#deleteSelectedQuestions').click(function() {
+                if (selectedQuestions.length === 0) {
+                    alert('Please select at least one question to delete.');
+                    return;
+                }
+
+                // Update modal content
+                $('#deletionCount, #questionCount').text(selectedQuestions.length);
+
+                // Populate preview
+                const previewContainer = $('#deletionPreview .preview-list');
+                previewContainer.empty();
+
+                selectedQuestions.forEach(function(questionIndex) {
+                    const questionContainer = $(`.question[data-question-index="${questionIndex}"]`);
+                    const questionText = questionContainer.find('.item-question').text().trim();
+                    const truncatedText = questionText.length > 80 ? questionText.substring(0, 80) + '...' : questionText;
+
+                    previewContainer.append(`
+                        <div class="mb-2 p-2 bg-white rounded border">
+                            <strong>Question ${questionIndex + 1}:</strong> ${truncatedText}
+                        </div>
+                    `);
+                });
+
+                $('#confirmBulkDeleteModal').modal('show');
+            });
+
+            // Confirm bulk deletion
+            $('#confirmBulkDelete').click(function() {
+                const $btn = $(this);
+                $btn.addClass('loading').prop('disabled', true);
+
+                // Sort in descending order to avoid index issues when removing
+                selectedQuestions.sort((a, b) => b - a);
+
+                // Remove selected questions with animation
+                let delay = 0;
+                selectedQuestions.forEach(function(questionIndex) {
+                    setTimeout(function() {
+                        const questionContainer = $(`.question[data-question-index="${questionIndex}"]`);
+                        questionContainer.fadeOut(300, function() {
+                            $(this).remove();
+                        });
+                    }, delay);
+                    delay += 100;
+                });
+
+                // Reset selection state and re-index form after all deletions
+                setTimeout(function() {
+                    selectedQuestions = [];
+                    updateSelectionUI();
+
+                    // Re-index all remaining questions and their form fields
+                    reindexAllQuestions();
+
+                    $('#confirmBulkDeleteModal').modal('hide');
+                    $btn.removeClass('loading').prop('disabled', false);
+
+                    // Show success message
+                    const successMessage = $('<div class="alert alert-success fade-in" role="alert"><i class="bi bi-check-circle me-2"></i>Selected questions deleted successfully!</div>');
+                    $('#customCard').prepend(successMessage);
+
+                    setTimeout(function() {
+                        successMessage.fadeOut(300, function() {
+                            $(this).remove();
+                        });
+                    }, 3000);
+                }, delay + 500);
+            });
+
+            // Function to update question numbers after deletion
+            function updateQuestionNumbers() {
+                $('.question').each(function(index) {
+                    $(this).find('.badge').text('Question ' + (index + 1));
+                    $(this).attr('data-question-index', index);
+                });
+            }
+
+            // Function to properly re-index all form fields after question deletion
+            function reindexAllQuestions() {
+                $('.question').each(function(questionIndex) {
+                    const questionContainer = $(this);
+
+                    // Update data attribute and badge
+                    questionContainer.attr('data-question-index', questionIndex);
+                    questionContainer.find('.badge').text('Question ' + (questionIndex + 1));
+
+                    // Update question form fields
+                    questionContainer.find('input[name*="Questions["]').each(function() {
+                        const name = $(this).attr('name');
+                        if (name) {
+                            const newName = name.replace(/Questions\[\d+\]/, `Questions[${questionIndex}]`);
+                            $(this).attr('name', newName);
+                        }
+                    });
+
+                    questionContainer.find('select[name*="Questions["]').each(function() {
+                        const name = $(this).attr('name');
+                        if (name) {
+                            const newName = name.replace(/Questions\[\d+\]/, `Questions[${questionIndex}]`);
+                            $(this).attr('name', newName);
+                        }
+                    });
+
+                    questionContainer.find('textarea[name*="Questions["]').each(function() {
+                        const name = $(this).attr('name');
+                        if (name) {
+                            const newName = name.replace(/Questions\[\d+\]/, `Questions[${questionIndex}]`);
+                            $(this).attr('name', newName);
+                        }
+                    });
+
+                    // Update answer form fields
+                    questionContainer.find('.answer-group').each(function(answerIndex) {
+                        $(this).find('input[name*="Answers["]').each(function() {
+                            const name = $(this).attr('name');
+                            if (name) {
+                                const newName = name.replace(/Questions\[\d+\]\.Answers\[\d+\]/, `Questions[${questionIndex}].Answers[${answerIndex}]`);
+                                $(this).attr('name', newName);
+                            }
+                        });
+
+                        // Update answer labels
+                        const label = $(this).find('label.control-label').first();
+                        if (label.length) {
+                            const labelText = label.text();
+                            if (labelText.includes('Answer ')) {
+                                const otherContent = label.find('.other-option-badge').length > 0 ?
+                                    ' <span class="other-option-badge">Other Option</span>' : '';
+                                label.html(`Answer ${answerIndex + 1}${otherContent}`);
+                            }
+                        }
+                    });
+                });
+            }
 
             // Function to add a new regular answer
             $(document).on('click', '.addAnswer', function () {
                 var questionContainer = $(this).closest('.question');
-                var newQuestionIndex = questionContainer.index();
+                var questionIndex = questionContainer.attr('data-question-index');
                 var newAnswerIndex = questionContainer.find('.answers .answer-group').length;
 
                 var answerHtml = `
@@ -891,8 +1347,8 @@
                         <div class="form-group mb-0">
                             <label class="control-label">Answer ${newAnswerIndex + 1}</label>
                             <div class="d-flex gap-2">
-                                <input type="text" name="Questions[${newQuestionIndex}].Answers[${newAnswerIndex}].Text" class="form-control" placeholder="Enter answer text" />
-                                <input type="hidden" name="Questions[${newQuestionIndex}].Answers[${newAnswerIndex}].IsOtherOption" value="false" />
+                                <input type="text" name="Questions[${questionIndex}].Answers[${newAnswerIndex}].Text" class="form-control" placeholder="Enter answer text" />
+                                <input type="hidden" name="Questions[${questionIndex}].Answers[${newAnswerIndex}].IsOtherOption" value="false" />
                                 <button type="button" class="btn btn-danger btn-sm removeAnswer">
                                     <i class="bi bi-trash3"></i>
                                 </button>
@@ -906,7 +1362,7 @@
             // Function to add "Other" option
             $(document).on('click', '.addOtherOption', function () {
                 var questionContainer = $(this).closest('.question');
-                var newQuestionIndex = questionContainer.index();
+                var questionIndex = questionContainer.attr('data-question-index');
                 var newAnswerIndex = questionContainer.find('.answers .answer-group').length;
 
                 // Check if "Other" option already exists
@@ -924,8 +1380,8 @@
                                 <span class="other-option-badge">Other Option</span>
                             </label>
                             <div class="d-flex gap-2">
-                                <input type="text" name="Questions[${newQuestionIndex}].Answers[${newAnswerIndex}].Text" class="form-control" placeholder="Other (please specify)" value="Other (please specify)" />
-                                <input type="hidden" name="Questions[${newQuestionIndex}].Answers[${newAnswerIndex}].IsOtherOption" value="true" />
+                                <input type="text" name="Questions[${questionIndex}].Answers[${newAnswerIndex}].Text" class="form-control" placeholder="Other (please specify)" value="Other (please specify)" />
+                                <input type="hidden" name="Questions[${questionIndex}].Answers[${newAnswerIndex}].IsOtherOption" value="true" />
                                 <button type="button" class="btn btn-warning btn-sm removeAnswer">
                                     <i class="bi bi-trash3"></i> Remove Other
                                 </button>
@@ -942,8 +1398,28 @@
 
             // Function to remove an answer
             $(document).on('click', '.removeAnswer', function () {
+                const questionContainer = $(this).closest('.question');
                 $(this).closest('.answer-group').fadeOut(300, function() {
                     $(this).remove();
+                    // Re-index answers in this question
+                    const questionIndex = questionContainer.attr('data-question-index');
+                    questionContainer.find('.answer-group').each(function(answerIndex) {
+                        $(this).find('input[name*="Answers["]').each(function() {
+                            const name = $(this).attr('name');
+                            if (name) {
+                                const newName = name.replace(/Questions\[\d+\]\.Answers\[\d+\]/, `Questions[${questionIndex}].Answers[${answerIndex}]`);
+                                $(this).attr('name', newName);
+                            }
+                        });
+
+                        // Update answer labels
+                        const label = $(this).find('label.control-label').first();
+                        if (label.length) {
+                            const otherContent = label.find('.other-option-badge').length > 0 ?
+                                ' <span class="other-option-badge">Other Option</span>' : '';
+                            label.html(`Answer ${answerIndex + 1}${otherContent}`);
+                        }
+                    });
                 });
             });
 
@@ -1002,8 +1478,16 @@
             // Confirm deletion
             $('.confirm-delete').click(function () {
                 if (questionToDelete) {
+                    const questionIndex = questionToDelete.data('question-index');
+
+                    // Remove from selection if it was selected
+                    selectedQuestions = selectedQuestions.filter(q => q !== questionIndex);
+                    updateSelectionUI();
+
                     questionToDelete.fadeOut(300, function() {
                         $(this).remove();
+                        // Re-index all remaining questions and their form fields
+                        reindexAllQuestions();
                     });
                     $('#confirmDeleteModal').modal('hide');
                     questionToDelete = null;
@@ -1019,7 +1503,15 @@
                     var newQuestionIndex = $('.question').length;
 
                     var questionHtml = `
-                        <div class="question fade-in">
+                        <div class="question fade-in" data-question-index="${newQuestionIndex}">
+                            <!-- Question Checkbox -->
+                            <div class="question-checkbox">
+                                <div class="custom-checkbox question-select-checkbox">
+                                    <input type="checkbox" class="question-checkbox-input">
+                                    <i class="bi bi-check" style="display: none;"></i>
+                                </div>
+                            </div>
+
                             <div class="question-separator">
                                 <div class="line-container">
                                     <hr class="line-start">
@@ -1101,6 +1593,9 @@
                     $btn.removeClass('loading').prop('disabled', false);
                 }, 300);
             });
+
+            // Initialize UI
+            updateSelectionUI();
         });
     </script>
 }
\ No newline at end of file
diff --git a/Web/Areas/Admin/Views/Questionnaire/Index.cshtml b/Web/Areas/Admin/Views/Questionnaire/Index.cshtml
index 1caf056..11c6fdd 100644
--- a/Web/Areas/Admin/Views/Questionnaire/Index.cshtml
+++ b/Web/Areas/Admin/Views/Questionnaire/Index.cshtml
@@ -1,97 +1,836 @@
 @model IEnumerable<QuestionnaireViewModel>
 
 @{
-    ViewData["Title"] = "Questionnaire";
+    ViewData["Title"] = "Questionnaire Management";
 }
 
+<style>
+    /* Modern Design System */
+    @@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
 
-<div class="container-fluid mt-3">
+    :root {
+        --primary-color: #6366f1;
+        --primary-light: #8b5cf6;
+        --primary-dark: #4338ca;
+        --success-color: #10b981;
+        --success-light: #34d399;
+        --success-dark: #059669;
+        --info-color: #06b6d4;
+        --info-light: #22d3ee;
+        --info-dark: #0891b2;
+        --warning-color: #f59e0b;
+        --warning-light: #fbbf24;
+        --warning-dark: #d97706;
+        --danger-color: #ef4444;
+        --danger-light: #fca5a5;
+        --danger-dark: #dc2626;
+        --purple-color: #6f42c1;
+        --purple-light: #8b5cf6;
+        --purple-dark: #5a2d91;
+        --gray-50: #f8fafc;
+        --gray-100: #f1f5f9;
+        --gray-200: #e2e8f0;
+        --gray-300: #cbd5e1;
+        --gray-400: #94a3b8;
+        --gray-500: #64748b;
+        --gray-600: #475569;
+        --gray-700: #334155;
+        --gray-800: #1e293b;
+        --gray-900: #0f172a;
+        --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+        --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+        --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+        --border-radius-sm: 8px;
+        --border-radius-md: 12px;
+        --border-radius-lg: 16px;
+        --border-radius-xl: 24px;
+    }
 
+    * {
+        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    }
+
+  
+
+  
+
+    /* Header Section */
+    .page-header {
+        background: white;
+        border-radius: var(--border-radius-xl);
+        box-shadow: var(--shadow-xl);
+        padding: 2.5rem;
+        margin-bottom: 2rem;
+        position: relative;
+        overflow: hidden;
+    }
+
+        .page-header::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 4px;
+            background: linear-gradient(90deg, var(--primary-color), var(--primary-light), var(--info-color), var(--success-color));
+        }
+
+    .header-content {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        gap: 1.5rem;
+    }
+
+    .header-info {
+        display: flex;
+        align-items: center;
+        gap: 1.5rem;
+    }
+
+    .header-icon {
+        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
+        color: white;
+        width: 64px;
+        height: 64px;
+        border-radius: var(--border-radius-lg);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1.75rem;
+        box-shadow: var(--shadow-lg);
+    }
+
+    .header-text h1 {
+        font-size: 2.25rem;
+        font-weight: 800;
+        color: var(--gray-800);
+        margin: 0 0 0.5rem;
+    }
+
+    .header-subtitle {
+        color: var(--gray-600);
+        font-size: 1.1rem;
+        font-weight: 500;
+    }
+
+    .create-button {
+        background: linear-gradient(135deg, var(--success-color) 0%, var(--success-dark) 100%);
+        color: white;
+        border: none;
+        padding: 1rem 2rem;
+        border-radius: var(--border-radius-md);
+        font-weight: 600;
+        font-size: 1rem;
+        text-decoration: none;
+        display: inline-flex;
+        align-items: center;
+        gap: 0.75rem;
+        transition: all 0.3s ease;
+        box-shadow: var(--shadow-lg);
+        position: relative;
+        overflow: hidden;
+    }
+
+        .create-button::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+            transition: left 0.5s;
+        }
+
+        .create-button:hover::before {
+            left: 100%;
+        }
+
+        .create-button:hover {
+            background: linear-gradient(135deg, var(--success-dark) 0%, #047857 100%);
+            transform: translateY(-2px);
+            box-shadow: var(--shadow-xl);
+            color: white;
+            text-decoration: none;
+        }
+
+    /* Stats Section */
+    .stats-section {
+        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
+        color: white;
+        padding: 2rem;
+        margin-bottom: 2rem;
+        border-radius: var(--border-radius-lg);
+        box-shadow: var(--shadow-lg);
+    }
+
+    .stats-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+        gap: 1.5rem;
+        text-align: center;
+    }
+
+    .stat-item {
+        padding: 1rem;
+        background: rgba(255, 255, 255, 0.1);
+        border-radius: var(--border-radius-md);
+        backdrop-filter: blur(10px);
+        transition: all 0.3s ease;
+    }
+
+        .stat-item:hover {
+            background: rgba(255, 255, 255, 0.2);
+            transform: translateY(-2px);
+        }
+
+    .stat-number {
+        font-size: 2.5rem;
+        font-weight: 800;
+        display: block;
+        margin-bottom: 0.25rem;
+    }
+
+    .stat-label {
+        font-size: 0.875rem;
+        font-weight: 500;
+        opacity: 0.9;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+    }
+
+    /* Questionnaire Grid */
+    .questionnaires-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+        gap: 2rem;
+        margin-bottom: 2rem;
+    }
+
+    /* Questionnaire Card */
+    .questionnaire-card {
+        background: white;
+        border-radius: var(--border-radius-xl);
+        box-shadow: var(--shadow-lg);
+        overflow: hidden;
+        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+        position: relative;
+        border: 1px solid var(--gray-200);
+    }
+
+        .questionnaire-card:hover {
+            transform: translateY(-8px);
+            box-shadow: var(--shadow-2xl);
+            border-color: var(--primary-color);
+        }
+
+        .questionnaire-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 4px;
+            background: linear-gradient(90deg, var(--primary-color), var(--info-color), var(--success-color));
+            transform: scaleX(0);
+            transition: transform 0.3s ease;
+            transform-origin: left;
+        }
+
+        .questionnaire-card:hover::before {
+            transform: scaleX(1);
+        }
+
+    /* Card Header */
+    .card-header-custom {
+        background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
+        padding: 1.5rem;
+        border-bottom: 1px solid var(--gray-200);
+    }
+
+    .card-id-badge {
+        background: linear-gradient(135deg, var(--warning-color) 0%, var(--warning-dark) 100%);
+        color: white;
+        padding: 0.375rem 0.75rem;
+        border-radius: var(--border-radius-sm);
+        font-weight: 600;
+        font-size: 0.875rem;
+        float: right;
+        box-shadow: var(--shadow-sm);
+    }
+
+    .card-title-custom {
+        font-size: 1.25rem;
+        font-weight: 700;
+        color: var(--gray-800);
+        margin: 0;
+        line-height: 1.4;
+        word-break: break-word;
+        padding-right: 5rem;
+    }
+
+    /* Card Content */
+    .card-content {
+        padding: 1.5rem;
+    }
+
+    .questions-count-section {
+        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
+        color: white;
+        padding: 1rem;
+        border-radius: var(--border-radius-md);
+        margin-bottom: 1.5rem;
+        text-align: center;
+    }
+
+    .questions-count-number {
+        font-size: 2rem;
+        font-weight: 800;
+        display: block;
+        margin-bottom: 0.25rem;
+    }
+
+    .questions-count-label {
+        font-size: 0.875rem;
+        font-weight: 500;
+        opacity: 0.9;
+    }
+
+    /* Preview Section */
+    .preview-section {
+        background: var(--gray-50);
+        border-radius: var(--border-radius-md);
+        padding: 1.25rem;
+        margin-bottom: 1.5rem;
+        border: 1px solid var(--gray-200);
+    }
+
+    .preview-header {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        margin-bottom: 1rem;
+    }
+
+    .preview-icon {
+        background: var(--info-color);
+        color: white;
+        width: 24px;
+        height: 24px;
+        border-radius: var(--border-radius-sm);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 0.875rem;
+    }
+
+    .preview-title {
+        font-size: 0.875rem;
+        font-weight: 600;
+        color: var(--gray-700);
+        margin: 0;
+    }
+
+    .preview-content {
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+    }
+
+    .preview-question {
+        background: white;
+        padding: 1rem;
+        border-radius: var(--border-radius-sm);
+        border: 1px solid var(--gray-200);
+        box-shadow: var(--shadow-sm);
+    }
+
+    .question-badge {
+        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
+        color: white;
+        padding: 0.25rem 0.75rem;
+        border-radius: var(--border-radius-sm);
+        font-size: 0.75rem;
+        font-weight: 600;
+        margin-bottom: 0.5rem;
+        display: inline-block;
+    }
+
+    .type-badge {
+        background: linear-gradient(135deg, var(--info-color) 0%, var(--info-dark) 100%);
+        color: white;
+        padding: 0.25rem 0.75rem;
+        border-radius: var(--border-radius-sm);
+        font-size: 0.75rem;
+        font-weight: 600;
+        margin-left: 0.5rem;
+        display: inline-block;
+    }
+
+    .question-text {
+        font-size: 0.875rem;
+        color: var(--gray-700);
+        margin: 0.5rem 0;
+        font-weight: 500;
+        line-height: 1.4;
+    }
+
+    .answers-container {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+        margin-top: 0.75rem;
+    }
+
+    .answer-badge {
+        background: linear-gradient(135deg, var(--success-color) 0%, var(--success-dark) 100%);
+        color: white;
+        padding: 0.25rem 0.75rem;
+        border-radius: var(--border-radius-sm);
+        font-size: 0.75rem;
+        font-weight: 500;
+        box-shadow: var(--shadow-sm);
+    }
+
+    .more-questions-indicator {
+        background: var(--gray-200);
+        color: var(--gray-600);
+        padding: 0.75rem;
+        border-radius: var(--border-radius-sm);
+        text-align: center;
+        font-size: 0.875rem;
+        font-weight: 500;
+        font-style: italic;
+        border: 1px dashed var(--gray-300);
+    }
+
+    /* Action Buttons */
+    .action-buttons {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 0.75rem;
+        padding: 1.5rem;
+        background: var(--gray-50);
+        border-top: 1px solid var(--gray-200);
+    }
+
+    .action-btn {
+        padding: 0.75rem 1rem;
+        border-radius: var(--border-radius-md);
+        font-weight: 600;
+        font-size: 0.875rem;
+        text-decoration: none;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+        transition: all 0.3s ease;
+        border: none;
+        box-shadow: var(--shadow-sm);
+        position: relative;
+        overflow: hidden;
+    }
+
+        .action-btn::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+            transition: left 0.5s;
+        }
+
+        .action-btn:hover::before {
+            left: 100%;
+        }
+
+        .action-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: var(--shadow-md);
+            text-decoration: none;
+        }
+
+    .btn-delete {
+        background: linear-gradient(135deg, var(--danger-color) 0%, var(--danger-dark) 100%);
+        color: white;
+    }
+
+        .btn-delete:hover {
+            background: linear-gradient(135deg, var(--danger-dark) 0%, #b91c1c 100%);
+            color: white;
+        }
+
+    .btn-edit {
+        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
+        color: white;
+    }
+
+        .btn-edit:hover {
+            background: linear-gradient(135deg, var(--primary-dark) 0%, #3730a3 100%);
+            color: white;
+        }
+
+    .btn-details {
+        background: linear-gradient(135deg, var(--info-color) 0%, var(--info-dark) 100%);
+        color: white;
+    }
+
+        .btn-details:hover {
+            background: linear-gradient(135deg, var(--info-dark) 0%, #0e7490 100%);
+            color: white;
+        }
+
+    .btn-send {
+        background: linear-gradient(135deg, var(--success-color) 0%, var(--success-dark) 100%);
+        color: white;
+    }
+
+        .btn-send:hover {
+            background: linear-gradient(135deg, var(--success-dark) 0%, #047857 100%);
+            color: white;
+        }
+
+    .btn-logic {
+        background: linear-gradient(135deg, var(--purple-color) 0%, var(--purple-dark) 100%);
+        color: white;
+        grid-column: 1 / -1;
+    }
+
+        .btn-logic:hover {
+            background: linear-gradient(135deg, var(--purple-dark) 0%, #4c1d95 100%);
+            color: white;
+        }
+
+    /* Empty State */
+    .empty-state {
+        text-align: center;
+        padding: 4rem 2rem;
+        background: white;
+        border-radius: var(--border-radius-xl);
+        box-shadow: var(--shadow-lg);
+        border: 2px dashed var(--gray-300);
+    }
+
+    .empty-state-icon {
+        background: var(--gray-100);
+        color: var(--gray-400);
+        width: 80px;
+        height: 80px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 2rem;
+        margin: 0 auto 1.5rem;
+    }
+
+    .empty-state h3 {
+        font-size: 1.5rem;
+        font-weight: 700;
+        color: var(--gray-700);
+        margin-bottom: 1rem;
+    }
+
+    .empty-state p {
+        color: var(--gray-500);
+        font-size: 1rem;
+        margin-bottom: 2rem;
+    }
+
+    /* Responsive Design */
+    @@media (max-width: 1024px) {
+        .questionnaires-grid
+
+    {
+        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+    }
+
+    }
+
+    @@media (max-width: 768px) {
+        .container-fluid
+
+    {
+        padding: 1rem;
+    }
+
+    .header-content {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .header-info {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 1rem;
+    }
+
+    .questionnaires-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .stats-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .action-buttons {
+        grid-template-columns: 1fr;
+    }
+
+    .btn-logic {
+        grid-column: 1;
+    }
+
+    }
+
+    /* Animations */
+    .fade-in {
+        animation: fadeIn 0.6s ease-out;
+    }
+
+    @@keyframes fadeIn {
+        from
+
+    {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+
+    }
+
+    .slide-in {
+        animation: slideIn 0.4s ease-out;
+    }
+
+    @@keyframes slideIn {
+        from
+
+    {
+        opacity: 0;
+        transform: translateX(-20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+
+    }
+
+    .stagger-animation {
+        animation: fadeIn 0.6s ease-out;
+        animation-fill-mode: both;
+    }
+
+        .stagger-animation:nth-child(1) {
+            animation-delay: 0.1s;
+        }
+
+        .stagger-animation:nth-child(2) {
+            animation-delay: 0.2s;
+        }
+
+        .stagger-animation:nth-child(3) {
+            animation-delay: 0.3s;
+        }
+
+        .stagger-animation:nth-child(4) {
+            animation-delay: 0.4s;
+        }
+
+        .stagger-animation:nth-child(5) {
+            animation-delay: 0.5s;
+        }
+
+        .stagger-animation:nth-child(6) {
+            animation-delay: 0.6s;
+        }
+</style>
+
+<div class="container-fluid">
+    <!-- Notifications -->
     <partial name="_Notification" />
 
-    <div class="card bg-default shadow ">
-        <div class="card-header">Questionnaire</div>
-        <div class="card-body">
-            <h4 class="card-title">Questionnaire list</h4>
-            <p>
-                <a asp-action="Create" class="btn btn-primary"><span><i class="bi bi-plus-square-fill"></i></span> Create New</a>
-            </p>
-            <table class="table table-responsive w-100 d-block d-md-table table-hover">
-                <thead >
-                    <tr>
-
-                        <th>Id</th>
-                        <th>Title</th>
-                        <th>Total Questions</th>
-                        <th> <span class="badge badge-primary">Questions</span> | <span class="badge badge-info">Type</span> | <span class="badge badge-success">Answers </span></th>
-                       
-                        <th>Action</th>
-                    </tr>
-                </thead>
-                <tbody class="w-100">
-                    @foreach (var item in Model)
-                    {
-                        <tr class="table-secondary">
-
-                            <td>@item.Id</td>
-
-                                <td>
-                                    @item.Title
-                                </td>
-                           
-
-                            <td>
-                               
-                                <span class="badge shadow rounded text-bg-primary p-2">
-                                    Questions <span class="badge text-bg-secondary shadow rounded p-1">@item.Questions?.Count()</span>
-                                </span>
-                               
-                            </td>
-                            <td class="h5">
-                                
-                                @foreach (var question in item.Questions.Take(1))
-                                {
-                                    
-                                     <span class="badge p-1 m-1 bg-primary shadow-sm"> Question:@question.Text</span>
-                                    <span class="badge p-1 m-1 bg-info shadow-sm">Type: @question.Type</span>
-                                    foreach (var answer in question.Answers)
-                                    {
-                                        <span class="badge p-1 m-1 bg-success shadow-sm"> Asnwer:@answer.Text</span>
-
-                                        
-                                    }
-                               
-                                }
-                              
-                            </td>
-
-                            <td>
-                                <!-- Your existing buttons -->
-                                <a asp-action="Delete" asp-route-id="@item.Id" class="btn btn-danger btn-sm">
-                                    🗑️ DELETE
-                                </a>
-                                <a asp-action="Edit" asp-route-id="@item.Id" class="btn btn-primary btn-sm">
-                                    ✏️ EDIT
-                                </a>
-                                <a asp-action="Details" asp-route-id="@item.Id" class="btn btn-info btn-sm">
-                                    👁️ DETAILS
-                                </a>
-                                <a asp-action="SendQuestionnaire" asp-route-id="@item.Id" class="btn btn-success btn-sm">
-                                    📧 SEND
-                                </a>
-
-                                <!-- NEW: SET LOGIC button with purple/orange styling -->
-                                <a asp-action="SetLogic" asp-route-id="@item.Id" class="btn btn-sm" style="background-color: #6f42c1; color: white;">
-                                    🔀 SET LOGIC
-                                </a>
-                            </td>
-                        </tr>
-                    }
-
-                </tbody>
-            </table>
-
+    <!-- Page Header -->
+    <div class="page-header fade-in">
+        <div class="header-content">
+            <div class="header-info">
+                <div class="header-icon">
+                    <i class="bi bi-clipboard-data-fill"></i>
+                </div>
+                <div class="header-text">
+                    <h1>Questionnaire Management</h1>
+                    <p class="header-subtitle">Create, manage, and analyze your questionnaires</p>
+                </div>
+            </div>
+            <a asp-action="Create" class="create-button">
+                <i class="bi bi-plus-circle-fill"></i>
+                Create New Questionnaire
+            </a>
         </div>
     </div>
-</div>
 
+    <!-- Statistics Section -->
+    @if (Model.Any())
+    {
+        <div class="stats-section fade-in">
+            <div class="stats-grid">
+                <div class="stat-item">
+                    <span class="stat-number">@Model.Count()</span>
+                    <span class="stat-label">Total Questionnaires</span>
+                </div>
+                <div class="stat-item">
+                    <span class="stat-number">@Model.Sum(q => q.Questions?.Count ?? 0)</span>
+                    <span class="stat-label">Total Questions</span>
+                </div>
+                <div class="stat-item">
+                    <span class="stat-number">@Model.Sum(q => q.Questions?.Sum(x => x.Answers?.Count ?? 0) ?? 0)</span>
+                    <span class="stat-label">Total Answers</span>
+                </div>
+                <div class="stat-item">
+                    <span class="stat-number">@Model.SelectMany(q => q.Questions ?? new List<Question>()).Select(q => q.Type).Distinct().Count()</span>
+                    <span class="stat-label">Question Types</span>
+                </div>
+            </div>
+        </div>
+    }
+
+    <!-- Questionnaires Grid -->
+    @if (Model.Any())
+    {
+        <div class="questionnaires-grid">
+            @foreach (var item in Model.Select((questionnaire, index) => new { Questionnaire = questionnaire, Index = index }))
+            {
+                <div class="questionnaire-card stagger-animation">
+                    <!-- Card Header -->
+                    <div class="card-header-custom">
+                        <span class="card-id-badge">ID: @item.Questionnaire.Id</span>
+                        <h3 class="card-title-custom">@item.Questionnaire.Title</h3>
+                    </div>
+
+                    <!-- Card Content -->
+                    <div class="card-content">
+                        <!-- Questions Count -->
+                        <div class="questions-count-section">
+                            <span class="questions-count-number">@(item.Questionnaire.Questions?.Count ?? 0)</span>
+                            <span class="questions-count-label">Question@(item.Questionnaire.Questions?.Count != 1 ? "s" : "")</span>
+                        </div>
+
+                        <!-- Preview Section -->
+                        @if (item.Questionnaire.Questions?.Any() == true)
+                        {
+                            <div class="preview-section">
+                                <div class="preview-header">
+                                    <div class="preview-icon">
+                                        <i class="bi bi-eye"></i>
+                                    </div>
+                                    <h4 class="preview-title">Quick Preview</h4>
+                                </div>
+
+                                <div class="preview-content">
+                                    @{
+                                        var firstQuestion = item.Questionnaire.Questions.FirstOrDefault();
+                                        var totalQuestions = item.Questionnaire.Questions.Count;
+                                    }
+
+                                    @if (firstQuestion != null)
+                                    {
+                                        <div class="preview-question">
+                                            <div>
+                                                <span class="question-badge">Question: @firstQuestion.Text</span>
+                                                <span class="type-badge">Type: @firstQuestion.Type</span>
+                                            </div>
+
+                                            @if (firstQuestion.Answers?.Any() == true)
+                                            {
+                                                <div class="answers-container">
+                                                    @foreach (var answer in firstQuestion.Answers.Take(3))
+                                                    {
+                                                        <span class="answer-badge">@answer.Text</span>
+                                                    }
+                                                    @if (firstQuestion.Answers.Count > 3)
+                                                    {
+                                                        <span class="answer-badge" style="background: var(--gray-400);">+@(firstQuestion.Answers.Count - 3) more</span>
+                                                    }
+                                                </div>
+                                            }
+                                        </div>
+                                    }
+
+                                    @if (totalQuestions > 1)
+                                    {
+                                        <div class="more-questions-indicator">
+                                            + @(totalQuestions - 1) more question@(totalQuestions - 1 != 1 ? "s" : "")
+                                        </div>
+                                    }
+                                </div>
+                            </div>
+                        }
+                        else
+                        {
+                            <div class="preview-section">
+                                <div class="preview-header">
+                                    <div class="preview-icon">
+                                        <i class="bi bi-info-circle"></i>
+                                    </div>
+                                    <h4 class="preview-title">No Questions Yet</h4>
+                                </div>
+                                <p style="color: var(--gray-500); font-style: italic; margin: 0;">This questionnaire doesn't have any questions yet.</p>
+                            </div>
+                        }
+                    </div>
+
+                    <!-- Action Buttons -->
+                    <div class="action-buttons">
+                        <a asp-action="Edit" asp-route-id="@item.Questionnaire.Id" class="action-btn btn-edit">
+                            <i class="bi bi-pencil-fill"></i>
+                            Edit
+                        </a>
+                        <a asp-action="Details" asp-route-id="@item.Questionnaire.Id" class="action-btn btn-details">
+                            <i class="bi bi-eye-fill"></i>
+                            Details
+                        </a>
+                        <a asp-action="Delete" asp-route-id="@item.Questionnaire.Id" class="action-btn btn-delete">
+                            <i class="bi bi-trash3-fill"></i>
+                            Delete
+                        </a>
+                        <a asp-action="SendQuestionnaire" asp-route-id="@item.Questionnaire.Id" class="action-btn btn-send">
+                            <i class="bi bi-envelope-fill"></i>
+                            Send
+                        </a>
+                        <a asp-action="SetLogic" asp-route-id="@item.Questionnaire.Id" class="action-btn btn-logic">
+                            <i class="bi bi-diagram-3-fill"></i>
+                            Set Logic
+                        </a>
+                    </div>
+                </div>
+            }
+        </div>
+    }
+    else
+    {
+        <!-- Empty State -->
+        <div class="empty-state fade-in">
+            <div class="empty-state-icon">
+                <i class="bi bi-clipboard-x"></i>
+            </div>
+            <h3>No Questionnaires Yet</h3>
+            <p>Get started by creating your first questionnaire to collect valuable insights.</p>
+            <a asp-action="Create" class="create-button">
+                <i class="bi bi-plus-circle-fill"></i>
+                Create Your First Questionnaire
+            </a>
+        </div>
+    }
+</div>
\ No newline at end of file
diff --git a/Web/Areas/Admin/Views/UserResponse/Index.cshtml b/Web/Areas/Admin/Views/UserResponse/Index.cshtml
index 5637690..0ae3a10 100644
--- a/Web/Areas/Admin/Views/UserResponse/Index.cshtml
+++ b/Web/Areas/Admin/Views/UserResponse/Index.cshtml
@@ -1,70 +1,990 @@
 @model IEnumerable<Model.Response>
 
 @{
-    ViewData["Title"] = "Response";
+    ViewData["Title"] = "Response Management";
 }
 
+<style>
+    /* Modern Design System */
+    @@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
 
-<div class="container mt-5">
+    :root {
+        --primary-color: #6366f1;
+        --primary-light: #8b5cf6;
+        --primary-dark: #4338ca;
+        --success-color: #10b981;
+        --success-light: #34d399;
+        --success-dark: #059669;
+        --info-color: #06b6d4;
+        --info-light: #22d3ee;
+        --info-dark: #0891b2;
+        --warning-color: #f59e0b;
+        --warning-light: #fbbf24;
+        --warning-dark: #d97706;
+        --danger-color: #ef4444;
+        --danger-light: #fca5a5;
+        --danger-dark: #dc2626;
+        --gray-50: #f8fafc;
+        --gray-100: #f1f5f9;
+        --gray-200: #e2e8f0;
+        --gray-300: #cbd5e1;
+        --gray-400: #94a3b8;
+        --gray-500: #64748b;
+        --gray-600: #475569;
+        --gray-700: #334155;
+        --gray-800: #1e293b;
+        --gray-900: #0f172a;
+        --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+        --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+        --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+        --border-radius-sm: 8px;
+        --border-radius-md: 12px;
+        --border-radius-lg: 16px;
+        --border-radius-xl: 24px;
+    }
 
+    * {
+        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    }
+
+    body {
+        background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
+        min-height: 100vh;
+    }
+
+    .container {
+        max-width: 1400px;
+        margin: 0 auto;
+        padding: 2rem 1rem;
+    }
+
+    /* Header Section */
+    .page-header {
+        background: white;
+        border-radius: var(--border-radius-xl);
+        box-shadow: var(--shadow-xl);
+        padding: 2.5rem;
+        margin-bottom: 2rem;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .page-header::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 4px;
+        background: linear-gradient(90deg, var(--primary-color), var(--info-color), var(--success-color));
+    }
+
+    .header-content {
+        display: flex;
+        align-items: center;
+        gap: 1.5rem;
+    }
+
+    .header-icon {
+        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
+        color: white;
+        width: 64px;
+        height: 64px;
+        border-radius: var(--border-radius-lg);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1.75rem;
+        box-shadow: var(--shadow-lg);
+    }
+
+    .header-text h1 {
+        font-size: 2.25rem;
+        font-weight: 800;
+        color: var(--gray-800);
+        margin: 0 0 0.5rem;
+    }
+
+    .header-subtitle {
+        color: var(--gray-600);
+        font-size: 1.1rem;
+        font-weight: 500;
+    }
+
+    /* Statistics Section */
+    .stats-section {
+        background: linear-gradient(135deg, var(--info-color) 0%, var(--info-dark) 100%);
+        color: white;
+        padding: 2rem;
+        margin-bottom: 2rem;
+        border-radius: var(--border-radius-lg);
+        box-shadow: var(--shadow-lg);
+    }
+
+    .stats-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+        gap: 1.5rem;
+        text-align: center;
+    }
+
+    .stat-item {
+        padding: 1rem;
+        background: rgba(255, 255, 255, 0.1);
+        border-radius: var(--border-radius-md);
+        backdrop-filter: blur(10px);
+        transition: all 0.3s ease;
+    }
+
+    .stat-item:hover {
+        background: rgba(255, 255, 255, 0.2);
+        transform: translateY(-2px);
+    }
+
+    .stat-number {
+        font-size: 2.5rem;
+        font-weight: 800;
+        display: block;
+        margin-bottom: 0.25rem;
+    }
+
+    .stat-label {
+        font-size: 0.875rem;
+        font-weight: 500;
+        opacity: 0.9;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+    }
+
+    /* Selection Controls */
+    .selection-controls {
+        background: white;
+        border-radius: var(--border-radius-lg);
+        padding: 2rem;
+        margin-bottom: 2rem;
+        box-shadow: var(--shadow-lg);
+        border: 1px solid var(--gray-200);
+        display: none;
+        transition: all 0.3s ease;
+    }
+
+    .selection-controls.show {
+        display: block;
+        animation: slideDown 0.3s ease;
+    }
+
+    @@keyframes slideDown {
+        from {
+            opacity: 0;
+            transform: translateY(-20px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+
+    .selection-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        gap: 1rem;
+        margin-bottom: 1.5rem;
+    }
+
+    .selection-info {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+    }
+
+    .selection-icon {
+        background: var(--primary-color);
+        color: white;
+        width: 48px;
+        height: 48px;
+        border-radius: var(--border-radius-md);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1.5rem;
+    }
+
+    .selection-text h3 {
+        font-size: 1.25rem;
+        font-weight: 700;
+        color: var(--gray-800);
+        margin: 0 0 0.25rem;
+    }
+
+    .selection-count {
+        color: var(--gray-600);
+        font-weight: 500;
+    }
+
+    .selection-actions {
+        display: flex;
+        gap: 1rem;
+        flex-wrap: wrap;
+    }
+
+    .master-checkbox-container {
+        background: white;
+        border-radius: var(--border-radius-md);
+        padding: 1.5rem;
+        margin-bottom: 2rem;
+        box-shadow: var(--shadow-md);
+        border: 1px solid var(--gray-200);
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+    }
+
+    .master-checkbox {
+        width: 28px;
+        height: 28px;
+        border: 2px solid var(--gray-300);
+        border-radius: 8px;
+        background: white;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        box-shadow: var(--shadow-sm);
+    }
+
+    .master-checkbox:hover {
+        border-color: var(--primary-color);
+        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+    }
+
+    .master-checkbox.checked {
+        background: var(--primary-color);
+        border-color: var(--primary-color);
+        color: white;
+    }
+
+    .master-checkbox input {
+        display: none;
+    }
+
+    /* Response Cards Grid */
+    .responses-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+        gap: 2rem;
+        margin-bottom: 2rem;
+    }
+
+    /* Response Card */
+    .response-card {
+        background: white;
+        border-radius: var(--border-radius-xl);
+        box-shadow: var(--shadow-lg);
+        overflow: hidden;
+        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+        position: relative;
+        border: 1px solid var(--gray-200);
+    }
+
+    .response-card:hover {
+        transform: translateY(-8px);
+        box-shadow: var(--shadow-2xl);
+        border-color: var(--primary-color);
+    }
+
+    .response-card.selected {
+        border-color: var(--primary-color);
+        background: linear-gradient(135deg, #fef2f2 0%, #fecaca 10%, white 100%);
+        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1), var(--shadow-lg);
+    }
+
+    .response-card::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 4px;
+        background: linear-gradient(90deg, var(--primary-color), var(--info-color), var(--success-color));
+        transform: scaleX(0);
+        transition: transform 0.3s ease;
+        transform-origin: left;
+    }
+
+    .response-card:hover::before {
+        transform: scaleX(1);
+    }
+
+    .response-card.selected::before {
+        transform: scaleX(1);
+        background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
+    }
+
+    /* Card Header */
+    .card-header-custom {
+        background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
+        padding: 1.5rem;
+        border-bottom: 1px solid var(--gray-200);
+        position: relative;
+    }
+
+    .response-checkbox {
+        position: absolute;
+        top: 1rem;
+        right: 1rem;
+        z-index: 10;
+    }
+
+    .custom-checkbox {
+        width: 24px;
+        height: 24px;
+        border: 2px solid var(--gray-300);
+        border-radius: 6px;
+        background: white;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        box-shadow: var(--shadow-sm);
+    }
+
+    .custom-checkbox:hover {
+        border-color: var(--primary-color);
+        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+    }
+
+    .custom-checkbox.checked {
+        background: var(--primary-color);
+        border-color: var(--primary-color);
+        color: white;
+    }
+
+    .custom-checkbox input {
+        display: none;
+    }
+
+    .response-info {
+        padding-right: 3rem;
+    }
+
+    .response-id {
+        background: linear-gradient(135deg, var(--warning-color) 0%, var(--warning-dark) 100%);
+        color: white;
+        padding: 0.375rem 0.75rem;
+        border-radius: var(--border-radius-sm);
+        font-weight: 600;
+        font-size: 0.875rem;
+        display: inline-block;
+        margin-bottom: 1rem;
+        box-shadow: var(--shadow-sm);
+    }
+
+    .questionnaire-title {
+        font-size: 1.25rem;
+        font-weight: 700;
+        color: var(--gray-800);
+        margin: 0 0 1rem;
+        line-height: 1.4;
+    }
+
+    .user-info {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+    }
+
+    .user-avatar {
+        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
+        color: white;
+        width: 48px;
+        height: 48px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1.25rem;
+        font-weight: 700;
+        box-shadow: var(--shadow-md);
+    }
+
+    .user-details h4 {
+        font-size: 1rem;
+        font-weight: 600;
+        color: var(--gray-800);
+        margin: 0 0 0.25rem;
+    }
+
+    .user-email {
+        color: var(--gray-600);
+        font-size: 0.875rem;
+        font-weight: 500;
+    }
+
+    /* Card Content */
+    .card-content {
+        padding: 1.5rem;
+    }
+
+    .submission-info {
+        background: var(--gray-50);
+        border-radius: var(--border-radius-md);
+        padding: 1.25rem;
+        margin-bottom: 1.5rem;
+        border: 1px solid var(--gray-200);
+    }
+
+    .submission-header {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        margin-bottom: 0.75rem;
+    }
+
+    .submission-icon {
+        background: var(--success-color);
+        color: white;
+        width: 32px;
+        height: 32px;
+        border-radius: var(--border-radius-sm);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1rem;
+    }
+
+    .submission-title {
+        font-size: 1rem;
+        font-weight: 600;
+        color: var(--gray-800);
+        margin: 0;
+    }
+
+    .submission-date {
+        font-size: 1rem;
+        font-weight: 600;
+        color: var(--success-color);
+    }
+
+    /* Action Button */
+    .action-section {
+        background: var(--gray-50);
+        padding: 1.5rem;
+        border-top: 1px solid var(--gray-200);
+    }
+
+    .action-btn {
+        background: linear-gradient(135deg, var(--info-color) 0%, var(--info-dark) 100%);
+        color: white;
+        border: none;
+        padding: 0.75rem 1.5rem;
+        border-radius: var(--border-radius-md);
+        font-weight: 600;
+        text-decoration: none;
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        transition: all 0.3s ease;
+        box-shadow: var(--shadow-md);
+        width: 100%;
+        justify-content: center;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .action-btn::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: -100%;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+        transition: left 0.5s;
+    }
+
+    .action-btn:hover::before {
+        left: 100%;
+    }
+
+    .action-btn:hover {
+        background: linear-gradient(135deg, var(--info-dark) 0%, #0e7490 100%);
+        transform: translateY(-2px);
+        box-shadow: var(--shadow-lg);
+        color: white;
+        text-decoration: none;
+    }
+
+    /* Buttons */
+    .btn {
+        border-radius: var(--border-radius-md);
+        font-weight: 600;
+        padding: 0.75rem 1.5rem;
+        font-size: 0.875rem;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        border: none;
+        text-decoration: none;
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        box-shadow: var(--shadow-sm);
+        position: relative;
+        overflow: hidden;
+    }
+
+    .btn::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: -100%;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+        transition: left 0.5s;
+    }
+
+    .btn:hover::before {
+        left: 100%;
+    }
+
+    .btn-danger {
+        background: linear-gradient(135deg, var(--danger-color) 0%, var(--danger-dark) 100%);
+        color: white;
+    }
+
+    .btn-danger:hover {
+        background: linear-gradient(135deg, var(--danger-dark) 0%, #b91c1c 100%);
+        transform: translateY(-2px);
+        box-shadow: var(--shadow-lg);
+        color: white;
+    }
+
+    .btn-secondary {
+        background: linear-gradient(135deg, var(--gray-500) 0%, var(--gray-600) 100%);
+        color: white;
+    }
+
+    .btn-secondary:hover {
+        background: linear-gradient(135deg, var(--gray-600) 0%, var(--gray-700) 100%);
+        transform: translateY(-2px);
+        box-shadow: var(--shadow-lg);
+        color: white;
+    }
+
+    /* Empty State */
+    .empty-state {
+        text-align: center;
+        padding: 4rem 2rem;
+        background: white;
+        border-radius: var(--border-radius-xl);
+        box-shadow: var(--shadow-lg);
+        border: 2px dashed var(--gray-300);
+    }
+
+    .empty-state-icon {
+        background: var(--gray-100);
+        color: var(--gray-400);
+        width: 80px;
+        height: 80px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 2rem;
+        margin: 0 auto 1.5rem;
+    }
+
+    .empty-state h3 {
+        font-size: 1.5rem;
+        font-weight: 700;
+        color: var(--gray-700);
+        margin-bottom: 1rem;
+    }
+
+    .empty-state p {
+        color: var(--gray-500);
+        font-size: 1rem;
+    }
+
+    /* Loading States */
+    .btn.loading {
+        opacity: 0.7;
+        pointer-events: none;
+    }
+
+    .btn.loading::after {
+        content: "";
+        width: 18px;
+        height: 18px;
+        margin-left: 0.75rem;
+        border: 2px solid transparent;
+        border-top-color: currentColor;
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+    }
+
+    @@keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+
+    /* Responsive Design */
+    @@media (max-width: 1024px) {
+        .responses-grid {
+            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+        }
+    }
+
+    @@media (max-width: 768px) {
+        .container {
+            padding: 1rem;
+        }
+
+        .responses-grid {
+            grid-template-columns: 1fr;
+        }
+
+        .stats-grid {
+            grid-template-columns: repeat(2, 1fr);
+        }
+
+        .selection-header {
+            flex-direction: column;
+            align-items: flex-start;
+        }
+
+        .selection-actions {
+            width: 100%;
+        }
+
+        .selection-actions .btn {
+            flex: 1;
+        }
+
+        .user-info {
+            flex-direction: column;
+            text-align: center;
+            gap: 0.75rem;
+        }
+    }
+
+    /* Animations */
+    .fade-in {
+        animation: fadeIn 0.6s ease-out;
+    }
+
+    @@keyframes fadeIn {
+        from {
+            opacity: 0;
+            transform: translateY(20px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+
+    .stagger-animation {
+        animation: fadeIn 0.6s ease-out;
+        animation-fill-mode: both;
+    }
+
+    .stagger-animation:nth-child(1) { animation-delay: 0.1s; }
+    .stagger-animation:nth-child(2) { animation-delay: 0.2s; }
+    .stagger-animation:nth-child(3) { animation-delay: 0.3s; }
+    .stagger-animation:nth-child(4) { animation-delay: 0.4s; }
+    .stagger-animation:nth-child(5) { animation-delay: 0.5s; }
+    .stagger-animation:nth-child(6) { animation-delay: 0.6s; }
+</style>
+
+<div class="container">
+    <!-- Notifications -->
     <partial name="_Notification" />
-   
-
-    <div class="card bg-default mb-3 ">
-        <div class="card-header">User Reponse</div>
-        <div class="card-body">
-            <h4 class="card-title">User response list</h4>
-           
-
-            <form asp-action="DeleteMultiple" method="post">
-                
-                    <table class="table table-responsive w-100 d-block d-md-table ">
-                        <thead class="w-100">
-                            <tr>
-                                <th><input type="checkbox" onclick="selectAll(this)" /></th> <!-- Master checkbox -->
-                                <th>Id</th>
-                                <th>Questionnaire</th>
-                                <th>UserName</th>
-                                <th>UserEmail</th>
-                                <th>Submission Date</th>
-                            <th class="text-end">Action</th>
-                            </tr>
-                        </thead>
-                        <tbody class="w-100">
-                            @foreach (var item in Model)
-                            {
-                                <tr>
-                                    <td><input type="checkbox" name="ids" value="@item.Id" /></td>
-                                    <td>@item.Id</td>
-                                    <td>@item.Questionnaire.Title</td>
-                                    <td>@item.UserName</td>
-                                    <td>@item.UserEmail</td>
-                                    <td>@item.SubmissionDate</td>
-                                <td class="text-end">
-                                    <a asp-action="ViewResponse" asp-route-id="@item.Id" class="btn btn-info btn-sm"><i class="bi bi-graph-up-arrow"></i> Details</a>
-                                    </td>
-                                </tr>
-                            }
-                        </tbody>
-                    </table>
-               
-                <button type="submit" class="btn btn-danger">Delete Selected</button>
-            </form>
 
+    <!-- Page Header -->
+    <div class="page-header fade-in">
+        <div class="header-content">
+            <div class="header-icon">
+                <i class="bi bi-clipboard-data-fill"></i>
+            </div>
+            <div class="header-text">
+                <h1>Response Management</h1>
+                <p class="header-subtitle">Monitor and manage all survey responses from users</p>
+            </div>
         </div>
     </div>
+
+    <form asp-action="DeleteMultiple" method="post" id="responseForm">
+        @if (Model.Any())
+        {
+            <!-- Statistics Section -->
+            <div class="stats-section fade-in">
+                <div class="stats-grid">
+                    <div class="stat-item">
+                        <span class="stat-number">@Model.Count()</span>
+                        <span class="stat-label">Total Responses</span>
+                    </div>
+                    <div class="stat-item">
+                        <span class="stat-number">@Model.Select(r => r.UserEmail).Distinct().Count()</span>
+                        <span class="stat-label">Unique Users</span>
+                    </div>
+                    <div class="stat-item">
+                        <span class="stat-number">@Model.Select(r => r.Questionnaire?.Title).Distinct().Count()</span>
+                        <span class="stat-label">Questionnaires</span>
+                    </div>
+                    <div class="stat-item">
+                        <span class="stat-number">@Model.Where(r => r.SubmissionDate.Date == DateTime.Today).Count()</span>
+                        <span class="stat-label">Today's Responses</span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Master Checkbox -->
+            <div class="master-checkbox-container fade-in">
+                <div class="master-checkbox" id="selectAllCheckbox">
+                    <input type="checkbox" id="selectAllInput">
+                    <i class="bi bi-check" style="display: none;"></i>
+                </div>
+                <label for="selectAllInput" class="mb-0 font-weight-bold">
+                    <i class="bi bi-check-square me-2"></i>Select All Responses
+                </label>
+                <div class="ms-auto">
+                    <span id="selectedCount" class="badge bg-primary">0 selected</span>
+                </div>
+            </div>
+
+            <!-- Selection Controls -->
+            <div class="selection-controls" id="selectionControls">
+                <div class="selection-header">
+                    <div class="selection-info">
+                        <div class="selection-icon">
+                            <i class="bi bi-check-circle-fill"></i>
+                        </div>
+                        <div class="selection-text">
+                            <h3>Selection Active</h3>
+                            <p class="selection-count" id="selectionText">0 responses selected</p>
+                        </div>
+                    </div>
+                    <div class="selection-actions">
+                        <button type="submit" class="btn btn-danger" id="deleteSelectedBtn">
+                            <i class="bi bi-trash-fill"></i>
+                            Delete Selected
+                        </button>
+                        <button type="button" class="btn btn-secondary" id="deselectAllBtn">
+                            <i class="bi bi-x-circle"></i>
+                            Deselect All
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Responses Grid -->
+            <div class="responses-grid">
+                @foreach (var item in Model.Select((response, index) => new { Response = response, Index = index }))
+                {
+                    <div class="response-card stagger-animation" data-id="@item.Response.Id">
+                        <!-- Response Checkbox -->
+                        <div class="response-checkbox">
+                            <div class="custom-checkbox response-select-checkbox">
+                                <input type="checkbox" class="response-checkbox-input" name="ids" value="@item.Response.Id">
+                                <i class="bi bi-check" style="display: none;"></i>
+                            </div>
+                        </div>
+
+                        <!-- Card Header -->
+                        <div class="card-header-custom">
+                            <div class="response-info">
+                                <span class="response-id">ID: @item.Response.Id</span>
+                                <h3 class="questionnaire-title">@item.Response.Questionnaire?.Title</h3>
+                                <div class="user-info">
+                                    <div class="user-avatar">
+                                        @(item.Response.UserName?.Substring(0, 1).ToUpper() ?? "U")
+                                    </div>
+                                    <div class="user-details">
+                                        <h4>@item.Response.UserName</h4>
+                                        <p class="user-email">@item.Response.UserEmail</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Card Content -->
+                        <div class="card-content">
+                            <div class="submission-info">
+                                <div class="submission-header">
+                                    <div class="submission-icon">
+                                        <i class="bi bi-calendar-check"></i>
+                                    </div>
+                                    <h4 class="submission-title">Submission Details</h4>
+                                </div>
+                                <div class="submission-date">
+                                    @item.Response.SubmissionDate.ToString("MMMM dd, yyyy 'at' HH:mm")
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Action Section -->
+                        <div class="action-section">
+                            <a asp-action="ViewResponse" asp-route-id="@item.Response.Id" class="action-btn">
+                                <i class="bi bi-graph-up-arrow"></i>
+                                View Response Details
+                            </a>
+                        </div>
+                    </div>
+                }
+            </div>
+        }
+        else
+        {
+            <!-- Empty State -->
+            <div class="empty-state fade-in">
+                <div class="empty-state-icon">
+                    <i class="bi bi-clipboard-x"></i>
+                </div>
+                <h3>No Responses Yet</h3>
+                <p>When users start submitting survey responses, they will appear here for you to manage and review.</p>
+            </div>
+        }
+    </form>
 </div>
 
-
-@section Scripts{
+@section Scripts {
     <script>
-        function selectAll(source) {
-            checkboxes = document.getElementsByName('ids');
-            for (var i = 0, n = checkboxes.length; i < n; i++) {
-                checkboxes[i].checked = source.checked;
+        $(document).ready(function () {
+            let selectedResponses = [];
+
+            // Update selection UI
+            function updateSelectionUI() {
+                const selectedCount = selectedResponses.length;
+                $('#selectedCount').text(selectedCount + ' selected');
+                $('#selectionText').text(selectedCount + ' response' + (selectedCount !== 1 ? 's' : '') + ' selected');
+                
+                if (selectedCount > 0) {
+                    $('#selectionControls').addClass('show');
+                } else {
+                    $('#selectionControls').removeClass('show');
+                }
+
+                // Update master checkbox state
+                const totalResponses = $('.response-checkbox-input').length;
+                const masterCheckbox = $('#selectAllCheckbox');
+                const masterInput = $('#selectAllInput');
+                
+                if (selectedCount === 0) {
+                    masterCheckbox.removeClass('checked');
+                    masterInput.prop('checked', false);
+                    masterCheckbox.find('i').hide();
+                } else if (selectedCount === totalResponses) {
+                    masterCheckbox.addClass('checked');
+                    masterInput.prop('checked', true);
+                    masterCheckbox.find('i').show();
+                } else {
+                    masterCheckbox.removeClass('checked');
+                    masterInput.prop('checked', false);
+                    masterCheckbox.find('i').hide();
+                }
             }
+
+            // Handle individual response checkbox clicks
+            $(document).on('change', '.response-checkbox-input', function() {
+                const responseCard = $(this).closest('.response-card');
+                const responseId = $(this).val();
+                const checkbox = $(this).closest('.custom-checkbox');
+                
+                if ($(this).is(':checked')) {
+                    if (!selectedResponses.includes(responseId)) {
+                        selectedResponses.push(responseId);
+                        responseCard.addClass('selected');
+                        checkbox.addClass('checked');
+                        checkbox.find('i').show();
+                    }
+                } else {
+                    selectedResponses = selectedResponses.filter(id => id !== responseId);
+                    responseCard.removeClass('selected');
+                    checkbox.removeClass('checked');
+                    checkbox.find('i').hide();
+                }
+                
+                updateSelectionUI();
+            });
+
+            // Handle checkbox visual clicks
+            $(document).on('click', '.response-select-checkbox', function() {
+                const input = $(this).find('input');
+                input.prop('checked', !input.is(':checked')).trigger('change');
+            });
+
+            // Handle master checkbox
+            $('#selectAllCheckbox').click(function() {
+                const shouldSelectAll = selectedResponses.length !== $('.response-checkbox-input').length;
+                
+                $('.response-checkbox-input').each(function() {
+                    const responseCard = $(this).closest('.response-card');
+                    const responseId = $(this).val();
+                    const checkbox = $(this).closest('.custom-checkbox');
+                    
+                    $(this).prop('checked', shouldSelectAll);
+                    
+                    if (shouldSelectAll) {
+                        if (!selectedResponses.includes(responseId)) {
+                            selectedResponses.push(responseId);
+                        }
+                        responseCard.addClass('selected');
+                        checkbox.addClass('checked');
+                        checkbox.find('i').show();
+                    } else {
+                        selectedResponses = [];
+                        responseCard.removeClass('selected');
+                        checkbox.removeClass('checked');
+                        checkbox.find('i').hide();
+                    }
+                });
+                
+                updateSelectionUI();
+            });
+
+            // Deselect all button
+            $('#deselectAllBtn').click(function() {
+                selectedResponses = [];
+                $('.response-checkbox-input').prop('checked', false);
+                $('.response-card').removeClass('selected');
+                $('.custom-checkbox').removeClass('checked');
+                $('.custom-checkbox i').hide();
+                updateSelectionUI();
+            });
+
+            // Delete selected button with confirmation
+            $('#deleteSelectedBtn').click(function(e) {
+                if (selectedResponses.length === 0) {
+                    e.preventDefault();
+                    alert('Please select at least one response to delete.');
+                    return;
+                }
+
+                const confirmMessage = `Are you sure you want to delete ${selectedResponses.length} response${selectedResponses.length !== 1 ? 's' : ''}? This action cannot be undone.`;
+                
+                if (!confirm(confirmMessage)) {
+                    e.preventDefault();
+                    return;
+                }
+
+                // Add loading state
+                $(this).addClass('loading').prop('disabled', true);
+            });
+
+            // Initialize UI
+            updateSelectionUI();
+        });
+
+        // Legacy function for backward compatibility
+        function selectAll(source) {
+            const event = new Event('click');
+            document.getElementById('selectAllCheckbox').dispatchEvent(event);
         }
     </script>
-
-}
-
+}
\ No newline at end of file
diff --git a/Web/Areas/Admin/Views/UserResponse/ViewResponse.cshtml b/Web/Areas/Admin/Views/UserResponse/ViewResponse.cshtml
index 933ef97..68f51d4 100644
--- a/Web/Areas/Admin/Views/UserResponse/ViewResponse.cshtml
+++ b/Web/Areas/Admin/Views/UserResponse/ViewResponse.cshtml
@@ -1,484 +1,1039 @@
 @model Response
 
 @{
-    ViewData["Title"] = "ViewResponses";
+    ViewData["Title"] = "Response Details";
 }
 
 <style>
-    <style>
-    
+    /* Modern Design System */
+    @@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
 
-    .font-weight-bold {
-        font-weight: bold;
+    :root {
+        --primary-color: #6366f1;
+        --primary-light: #8b5cf6;
+        --primary-dark: #4338ca;
+        --success-color: #10b981;
+        --success-light: #34d399;
+        --success-dark: #059669;
+        --info-color: #06b6d4;
+        --info-light: #22d3ee;
+        --info-dark: #0891b2;
+        --warning-color: #f59e0b;
+        --warning-light: #fbbf24;
+        --warning-dark: #d97706;
+        --danger-color: #ef4444;
+        --danger-light: #fca5a5;
+        --danger-dark: #dc2626;
+        --gray-50: #f8fafc;
+        --gray-100: #f1f5f9;
+        --gray-200: #e2e8f0;
+        --gray-300: #cbd5e1;
+        --gray-400: #94a3b8;
+        --gray-500: #64748b;
+        --gray-600: #475569;
+        --gray-700: #334155;
+        --gray-800: #1e293b;
+        --gray-900: #0f172a;
+        --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+        --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+        --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+        --border-radius-sm: 8px;
+        --border-radius-md: 12px;
+        --border-radius-lg: 16px;
+        --border-radius-xl: 24px;
     }
 
-    .text-primary {
-        color: #121212; /* Bootstrap primary color */
+    * {
+        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
     }
 
-    .selected-answer {
-        color: #28a745; /* Bootstrap success color */
-    }
-    
-
-        .star-rating .text-primary {
-            color:goldenrod; /* Bootstrap primary blue */
-            font-weight: bold; /* Make text bold */
-        }
-
-        .star-rating .text-secondary {
-            color: #6c757d; /* Bootstrap secondary text color */
-        }
-
-        .star-rating .text-muted {
-            color: #6c757d; /* Muted text color for unselected star descriptions */
-        }
-
-    .color-1 {
-        color: #007bff;
-    }
-    /* Blue */
-    .color-2 {
-        color: #28a745;
-    }
-    /* Green */
-    .color-3 {
-        color: #ffc107;
-    }
-    /* Yellow */
-    .color-4 {
-        color: #dc3545;
-    }
-    /* Red */
-    .color-5 {
-        color: #17a2b8;
+    body {
+        background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
+        min-height: 100vh;
     }
 
-    .color-6 {
-        color: #12b8;
+    .container {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 2rem 1rem;
     }
 
-    .color-7 {
-        color: #d92683;
-    }
-
-    .color-8 {
-        color: #f181b6;
-    }
-
-    .color-8 {
-        color: #035b19;
-    }
-
-    .grayscale {
-        filter: grayscale(100%); /* Grays out the image */
-    }
-
-    .selected-image-card {
-        border: 3px solid #28a745; /* Bootstrap 'success' green color */
-        position: relative; /* Needed for absolute positioning of the check icon */
-    }
-
-        .selected-image-card::after {
-            content: "\2713"; /* Unicode character for a check mark */
-            font-family: "Bootstrap Icons"; /* Ensure this matches the icon font being used */
-            color: #28a745; /* Match the border color or choose another */
-            font-size: 24px; /* Adjust size as needed */
-            position: absolute;
-            top: 191px;
-            right: 67px;
-            z-index: 1;
-        }
-
-
-    /* Ensure the cards are not too stretched vertically */
-    .card-img-top {
-        width: auto;
-        max-height: 150px; /* Adjust the max-height as needed */
-        object-fit: cover; /* This will cover the area without stretching */
-    }
-
-    .slider {
-        -webkit-appearance: none; /* Override default appearance */
-        width: 100%; /* Slider takes up full container width */
-        height: 15px; /* Slider thickness */
-        border-radius: 5px; /* Roundness of the slider */
-        background: #d3d3d3; /* Background of the slider */
-        outline: none; /* Removes the outline */
-        opacity: 0.7; /* Slider opacity */
-       
-      
-    }
-
-        .slider:disabled {
-            background: #e9ecef; /* Light grey background when slider is disabled */
-        }
-
-        .slider::-webkit-slider-thumb {
-            -webkit-appearance: none; /* Removes style of default thumb */
-            width: 25px; /* Thumb width */
-            height: 25px; /* Thumb height */
-            border-radius: 50%; /* Makes thumb circular */
-            background: #007bff; /* Thumb color */
-            cursor: pointer; /* Cursor appears as pointer */
-        }
-
-        .slider::-moz-range-thumb {
-            width: 25px; /* Thumb width for Mozilla */
-            height: 25px; /* Thumb height for Mozilla */
-            border-radius: 50%; /* Makes thumb circular for Mozilla */
-            background: #007bff; /* Thumb color for Mozilla */
-            cursor: pointer; /* Cursor appears as pointer for Mozilla */
-        }
-
-    #Errocard {
+    /* Response Header */
+    .response-header {
+        background: white;
+        border-radius: var(--border-radius-xl);
+        box-shadow: var(--shadow-xl);
+        overflow: hidden;
+        margin-bottom: 2rem;
         position: relative;
-        display: -webkit-box;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-box-orient: vertical;
-        -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-        flex-direction: row;
-        word-wrap: break-word;
-        box-shadow: 0px 0px 13px 0px rgb(20 101 230 / 35%);
-        -webkit-box-shadow: 0px 0px 13px 0px rgb(20 101 230 / 35%);
-        border-radius: 5px;
-
-        border-radius: 10px;
-        background-color: transparent;
-        height: auto;
-        flex-wrap: nowrap;
-        align-items: center;
-        padding: 0 50px 0 50px;
-       
-       
-    }
-    .card{
-        margin-top:40px !important;
-        box-shadow: 0px 0px 13px 0px rgb(20 101 230 / 35%) !important;
-        -webkit-box-shadow: 0px 0px 13px 0px rgb(20 101 230 / 35%) !important;
-        border-radius: 5px;
-    }
-    
-   /*  main{
-       
-        background-attachment:fixed;
-        background-repeat: no-repeat;
-        background: linear-gradient(119deg, rgba(47, 82, 131, 1) 0%, rgba(29, 33, 59, 1) 34%, rgba(27, 54, 61, 1) 67%, rgba(58, 82, 116, 1) 100%) !important;
-    }
- */
-    .card-header {
-        padding: 0.75rem 1.25rem;
-        margin-bottom: 0;
-        background: #16283f;
-        color:white;
-       
     }
 
-    #HeaderForQuestionType{
-        padding: 0.75rem 1.25rem;
-        background: #16283f;
+        .response-header::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 4px;
+            background: linear-gradient(90deg, var(--primary-color), var(--info-color), var(--success-color));
+        }
+
+    .header-main {
+        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
         color: white;
-        border-radius:5px;
-        box-shadow: 0px 0px 13px 0px rgb(20 101 230 / 35%) !important;
-        -webkit-box-shadow: 0px 0px 13px 0px rgb(20 101 230 / 35%) !important;
+        padding: 2.5rem;
+        position: relative;
+        overflow: hidden;
     }
 
-    .badge {
-        display: inline-block;
-        padding: 0.25em 0.4em;
-        font-size: 116%;
-        font-weight: 700;
-        line-height: 1;
-        text-align: center;
-        white-space: nowrap;
-        vertical-align: baseline;
-        border-radius: 0.25rem;
+        .header-main::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><defs><radialGradient id="a" cx="50%" cy="0%" r="100%"><stop offset="0%" stop-color="white" stop-opacity="0.1"/><stop offset="100%" stop-color="white" stop-opacity="0"/></radialGradient></defs><rect width="100" height="20" fill="url(%23a)"/></svg>');
+            opacity: 0.3;
+        }
+
+    .header-content {
+        display: flex;
+        align-items: center;
+        gap: 2rem;
+        position: relative;
+        z-index: 1;
     }
-    
+
+    .response-icon {
+        background: rgba(255, 255, 255, 0.2);
+        width: 80px;
+        height: 80px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 2rem;
+        backdrop-filter: blur(10px);
+        box-shadow: var(--shadow-lg);
+    }
+
+    .header-text h1 {
+        font-size: 2rem;
+        font-weight: 800;
+        margin: 0 0 0.5rem;
+    }
+
+    .user-badge {
+        background: rgba(255, 255, 255, 0.2);
+        padding: 0.5rem 1rem;
+        border-radius: var(--border-radius-md);
+        backdrop-filter: blur(10px);
+        display: inline-block;
+        font-weight: 600;
+        margin-bottom: 0.5rem;
+    }
+
+    .header-meta {
+        background: var(--gray-50);
+        padding: 1.5rem 2.5rem;
+        border-top: 1px solid var(--gray-200);
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+    }
+
+    .meta-icon {
+        background: var(--success-color);
+        color: white;
+        width: 32px;
+        height: 32px;
+        border-radius: var(--border-radius-sm);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1rem;
+    }
+
+    .meta-text {
+        font-weight: 600;
+        color: var(--gray-800);
+    }
+
+    /* Question Cards */
+    .question-card {
+        background: white;
+        border-radius: var(--border-radius-xl);
+        box-shadow: var(--shadow-lg);
+        overflow: hidden;
+        margin-bottom: 2rem;
+        border: 1px solid var(--gray-200);
+        transition: all 0.3s ease;
+    }
+
+        .question-card:hover {
+            transform: translateY(-4px);
+            box-shadow: var(--shadow-2xl);
+        }
+
+    .question-header {
+        background: linear-gradient(135deg, var(--gray-700) 0%, var(--gray-800) 100%);
+        color: white;
+        padding: 1.5rem 2rem;
+        position: relative;
+        overflow: hidden;
+    }
+
+        .question-header::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><defs><radialGradient id="a" cx="50%" cy="0%" r="100%"><stop offset="0%" stop-color="white" stop-opacity="0.1"/><stop offset="100%" stop-color="white" stop-opacity="0"/></radialGradient></defs><rect width="100" height="20" fill="url(%23a)"/></svg>');
+            opacity: 0.3;
+        }
+
+    .question-type {
+        background: rgba(255, 255, 255, 0.2);
+        padding: 0.375rem 1rem;
+        border-radius: var(--border-radius-sm);
+        font-weight: 600;
+        font-size: 0.875rem;
+        display: inline-block;
+        margin-bottom: 1rem;
+        backdrop-filter: blur(10px);
+        position: relative;
+        z-index: 1;
+    }
+
+    .question-title {
+        font-size: 1.25rem;
+        font-weight: 700;
+        margin: 0;
+        position: relative;
+        z-index: 1;
+        line-height: 1.4;
+    }
+
+    .question-body {
+        padding: 2rem;
+    }
+
+    /* Response Types */
+    .text-response {
+        background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
+        border: 1px solid var(--gray-200);
+        border-radius: var(--border-radius-lg);
+        padding: 1.5rem;
+        font-size: 1rem;
+        font-weight: 500;
+        color: var(--gray-800);
+        line-height: 1.6;
+        box-shadow: var(--shadow-sm);
+    }
+
+    .text-response-label {
+        font-size: 0.875rem;
+        font-weight: 600;
+        color: var(--gray-600);
+        margin-bottom: 1rem;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+    }
+
+    /* Choice Options */
+    .choices-container {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .choice-option {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        padding: 1rem 1.25rem;
+        border-radius: var(--border-radius-md);
+        border: 2px solid var(--gray-200);
+        transition: all 0.3s ease;
+        background: white;
+    }
+
+        .choice-option.selected {
+            border-color: var(--primary-color);
+            background: linear-gradient(135deg, #fef2f2 0%, #fecaca 10%, white 100%);
+            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+        }
+
+    .choice-input {
+        width: 20px;
+        height: 20px;
+        border: 2px solid var(--gray-300);
+        border-radius: 4px;
+        position: relative;
+        flex-shrink: 0;
+    }
+
+        .choice-input.radio {
+            border-radius: 50%;
+        }
+
+        .choice-input.checked {
+            background: var(--primary-color);
+            border-color: var(--primary-color);
+        }
+
+            .choice-input.checked::after {
+                content: '✓';
+                position: absolute;
+                color: white;
+                font-weight: bold;
+                font-size: 12px;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+            }
+
+    .choice-label {
+        font-weight: 500;
+        color: var(--gray-700);
+    }
+
+    .choice-option.selected .choice-label {
+        font-weight: 600;
+        color: var(--primary-color);
+    }
+
+    /* Rating Stars */
+    .rating-container {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1.5rem;
+        justify-content: center;
+        padding: 2rem;
+        background: var(--gray-50);
+        border-radius: var(--border-radius-lg);
+    }
+
+    .rating-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 0.75rem;
+        padding: 1rem;
+        border-radius: var(--border-radius-md);
+        transition: all 0.3s ease;
+    }
+
+        .rating-item.selected {
+            background: linear-gradient(135deg, var(--warning-color) 0%, var(--warning-light) 100%);
+            color: white;
+            box-shadow: var(--shadow-md);
+            transform: scale(1.1);
+        }
+
+    .rating-star {
+        font-size: 2rem;
+        color: var(--gray-300);
+        transition: all 0.3s ease;
+    }
+
+    .rating-item.selected .rating-star {
+        color: white;
+        text-shadow: 0 2px 4px rgba(0,0,0,0.2);
+    }
+
+    .rating-label {
+        font-size: 0.875rem;
+        font-weight: 600;
+        text-align: center;
+        color: var(--gray-600);
+    }
+
+    .rating-item.selected .rating-label {
+        color: white;
+    }
+
+    /* Likert Scale */
+    .likert-container {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .likert-option {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        padding: 1rem 1.25rem;
+        border-radius: var(--border-radius-md);
+        border: 2px solid var(--gray-200);
+        transition: all 0.3s ease;
+        background: white;
+    }
+
+        .likert-option.selected {
+            border-color: var(--success-color);
+            background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
+            box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
+        }
+
+    .likert-radio {
+        width: 20px;
+        height: 20px;
+        border: 2px solid var(--gray-300);
+        border-radius: 50%;
+        position: relative;
+        flex-shrink: 0;
+    }
+
+        .likert-radio.checked {
+            background: var(--success-color);
+            border-color: var(--success-color);
+        }
+
+            .likert-radio.checked::after {
+                content: '';
+                position: absolute;
+                width: 8px;
+                height: 8px;
+                background: white;
+                border-radius: 50%;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+            }
+
+    .likert-label {
+        font-weight: 500;
+        color: var(--gray-700);
+    }
+
+    .likert-option.selected .likert-label {
+        font-weight: 600;
+        color: var(--success-color);
+    }
+
+    /* Matrix Table */
+    .matrix-table {
+        width: 100%;
+        border-collapse: collapse;
+        background: white;
+        border-radius: var(--border-radius-lg);
+        overflow: hidden;
+        box-shadow: var(--shadow-sm);
+    }
+
+        .matrix-table th {
+            background: linear-gradient(135deg, var(--gray-600) 0%, var(--gray-700) 100%);
+            color: white;
+            padding: 1rem;
+            font-weight: 600;
+            text-align: left;
+        }
+
+        .matrix-table td {
+            padding: 1rem;
+            border-bottom: 1px solid var(--gray-200);
+            vertical-align: middle;
+        }
+
+        .matrix-table tr:last-child td {
+            border-bottom: none;
+        }
+
+        .matrix-table tr:hover {
+            background: var(--gray-50);
+        }
+
+    .matrix-option {
+        font-weight: 500;
+        color: var(--gray-700);
+    }
+
+        .matrix-option.selected {
+            font-weight: 600;
+            color: var(--primary-color);
+        }
+
+    .matrix-radio {
+        width: 20px;
+        height: 20px;
+        border: 2px solid var(--gray-300);
+        border-radius: 50%;
+        position: relative;
+    }
+
+        .matrix-radio.checked {
+            background: var(--primary-color);
+            border-color: var(--primary-color);
+        }
+
+            .matrix-radio.checked::after {
+                content: '';
+                position: absolute;
+                width: 8px;
+                height: 8px;
+                background: white;
+                border-radius: 50%;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+            }
+
+    /* Ranking */
+    .ranking-container {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 2rem;
+    }
+
+    .ranking-section {
+        background: var(--gray-50);
+        border-radius: var(--border-radius-lg);
+        padding: 1.5rem;
+        border: 1px solid var(--gray-200);
+    }
+
+    .ranking-title {
+        font-size: 1.1rem;
+        font-weight: 600;
+        color: var(--gray-800);
+        margin-bottom: 1.5rem;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    .ranking-list {
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+    }
+
+    .ranking-item {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        padding: 1rem;
+        background: white;
+        border-radius: var(--border-radius-md);
+        box-shadow: var(--shadow-sm);
+        border: 1px solid var(--gray-200);
+    }
+
+    .ranking-number {
+        background: var(--primary-color);
+        color: white;
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 600;
+        font-size: 0.875rem;
+        flex-shrink: 0;
+    }
+
+    .ranking-text {
+        font-weight: 500;
+        color: var(--gray-700);
+    }
+
+    /* Image Selection */
+    .images-container {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        gap: 1.5rem;
+        padding: 1rem;
+    }
+
+    .image-card {
+        background: white;
+        border-radius: var(--border-radius-lg);
+        overflow: hidden;
+        box-shadow: var(--shadow-md);
+        transition: all 0.3s ease;
+        border: 2px solid var(--gray-200);
+    }
+
+        .image-card.selected {
+            border-color: var(--success-color);
+            box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1), var(--shadow-lg);
+            transform: scale(1.05);
+        }
+
+        .image-card.unselected {
+            filter: grayscale(100%);
+            opacity: 0.6;
+        }
+
+    .card-image {
+        width: 100%;
+        height: 150px;
+        object-fit: cover;
+    }
+
+    .image-card-body {
+        padding: 1rem;
+        text-align: center;
+    }
+
+    .view-image-btn {
+        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
+        color: white;
+        border: none;
+        padding: 0.5rem 1rem;
+        border-radius: var(--border-radius-sm);
+        font-weight: 600;
+        text-decoration: none;
+        display: inline-block;
+        transition: all 0.3s ease;
+        font-size: 0.875rem;
+    }
+
+        .view-image-btn:hover {
+            background: linear-gradient(135deg, var(--primary-dark) 0%, #3730a3 100%);
+            transform: translateY(-1px);
+            color: white;
+            text-decoration: none;
+        }
+
+    .selected-indicator {
+        position: absolute;
+        top: 0.75rem;
+        right: 0.75rem;
+        background: var(--success-color);
+        color: white;
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1.25rem;
+        box-shadow: var(--shadow-md);
+    }
+
+    /* Slider */
+    .slider-container {
+        background: var(--gray-50);
+        border-radius: var(--border-radius-lg);
+        padding: 2rem;
+        border: 1px solid var(--gray-200);
+    }
+
+    .slider-item {
+        margin-bottom: 2rem;
+    }
+
+        .slider-item:last-child {
+            margin-bottom: 0;
+        }
+
+    .slider-label {
+        font-size: 1rem;
+        font-weight: 600;
+        color: var(--gray-800);
+        margin-bottom: 1rem;
+    }
+
+    .slider-wrapper {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        margin-bottom: 1rem;
+    }
+
+    .slider-min, .slider-max {
+        background: var(--gray-600);
+        color: white;
+        padding: 0.375rem 0.75rem;
+        border-radius: var(--border-radius-sm);
+        font-weight: 600;
+        font-size: 0.875rem;
+        min-width: 40px;
+        text-align: center;
+    }
+
+    .custom-slider {
+        flex: 1;
+        height: 8px;
+        border-radius: 4px;
+        background: var(--gray-300);
+        outline: none;
+        -webkit-appearance: none;
+        position: relative;
+    }
+
+        .custom-slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            background: var(--primary-color);
+            cursor: pointer;
+            box-shadow: var(--shadow-md);
+        }
+
+        .custom-slider::-moz-range-thumb {
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            background: var(--primary-color);
+            cursor: pointer;
+            border: none;
+            box-shadow: var(--shadow-md);
+        }
+
+    .slider-value {
+        background: var(--primary-color);
+        color: white;
+        padding: 0.5rem 1rem;
+        border-radius: var(--border-radius-md);
+        font-weight: 600;
+        box-shadow: var(--shadow-sm);
+    }
+
+    /* Back Link */
+    .back-link {
+        background: linear-gradient(135deg, var(--gray-500) 0%, var(--gray-600) 100%);
+        color: white;
+        padding: 0.75rem 1.5rem;
+        border-radius: var(--border-radius-md);
+        text-decoration: none;
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-weight: 600;
+        transition: all 0.3s ease;
+        box-shadow: var(--shadow-md);
+        margin-top: 2rem;
+    }
+
+        .back-link:hover {
+            background: linear-gradient(135deg, var(--gray-600) 0%, var(--gray-700) 100%);
+            transform: translateY(-2px);
+            box-shadow: var(--shadow-lg);
+            color: white;
+            text-decoration: none;
+        }
+
+    /* Responsive Design */
+    @@media (max-width: 768px) {
+        .container
+
+    {
+        padding: 1rem;
+    }
+
+    .header-content {
+        flex-direction: column;
+        text-align: center;
+        gap: 1rem;
+    }
+
+    .header-meta {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.5rem;
+    }
+
+    .ranking-container {
+        grid-template-columns: 1fr;
+    }
+
+    .images-container {
+        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    }
+
+    .rating-container {
+        gap: 1rem;
+    }
+
+    .slider-wrapper {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    }
+
+    /* Animations */
+    .fade-in {
+        animation: fadeIn 0.6s ease-out;
+    }
+
+    @@keyframes fadeIn {
+        from
+
+    {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+
+    }
+
+    .stagger-animation {
+        animation: fadeIn 0.6s ease-out;
+        animation-fill-mode: both;
+    }
+
+        .stagger-animation:nth-child(1) {
+            animation-delay: 0.1s;
+        }
+
+        .stagger-animation:nth-child(2) {
+            animation-delay: 0.2s;
+        }
+
+        .stagger-animation:nth-child(3) {
+            animation-delay: 0.3s;
+        }
+
+        .stagger-animation:nth-child(4) {
+            animation-delay: 0.4s;
+        }
+
+        .stagger-animation:nth-child(5) {
+            animation-delay: 0.5s;
+        }
+
+        .stagger-animation:nth-child(6) {
+            animation-delay: 0.6s;
+        }
 </style>
 
-    @{
-        int numberindex = 0;
-    }
+@{
+    int numberindex = 0;
+}
 
-
-<div class="container pt-5">
-   @*  <h2>Questionnaire: @Model.Questionnaire.Title</h2> *@
-   <div class="card shadow-1">
-       <div class="card-header">
-           Respond from user
-       </div>
-       <div class="card-body">
-            <h6 class="font-weight-bold">Response Details for  <span class="badge badge-dark"> @Model.UserName (@Model.UserEmail)</span></h6>
-       </div>
-        <div class="card-header">
-            <strong class="">Submitted on: <span id="localTime">@Model.SubmissionDate.ToString("yyyy-MM-ddTHH:mm:ss")</span></strong>
-      </div>
-       
-   </div>
-    <script>
-        document.addEventListener('DOMContentLoaded', function () {
-            var utcDate = document.getElementById('localTime').innerText;
-            var localDate = new Date(utcDate + 'Z'); // Add 'Z' to indicate UTC time
-            document.getElementById('localTime').innerText = localDate.toLocaleString();
-        });
-    </script>
-
-        @foreach (var detail in Model.ResponseDetails)
-        {
-        <div class="card mb-3" id="Errocard">
-            <div class="card-header" id="HeaderForQuestionType">
-                Question Type:@detail.QuestionType.ToString()
-            </div>
-            <div class="card-body">
-                <h6 class="card-title"><span class="font-weight-bold">Question @((numberindex = numberindex + 1)):</span> @detail.Question.Text</h6>
-                <div class="card-text ml-2">
-                        @switch (detail.QuestionType)
-                        {
-                            case QuestionType.Text:
-                            case QuestionType.Open_ended:
-                            <p><strong>Answer:</strong> @detail.TextResponse</p>
-                                break;
-                            case QuestionType.Multiple_choice:
-                            case QuestionType.CheckBox:
-                            case QuestionType.TrueFalse:
-                            <strong>Answer:</strong>
-                                @if (detail.Question.Type == QuestionType.TrueFalse)
-                                {
-                                <!-- Use radio buttons for True/False questions -->
-                                <div class="form-group">
-                                        @foreach (var answer in detail.Question.Answers)
-                                        {
-                                            // Ensuring each question has a unique group name by using the Question ID
-                                            string groupName = $"response{detail.Question.Id}";
-                                        <div class="form-check">
-                                            <input class="form-check-input" type="radio"
-                                                   name="@groupName" 
-                                                   id="radio-@answer.Id"
-                                                   value="@answer.Id"
-                                                   disabled @(detail.ResponseAnswers.Any(ra => ra.AnswerId == answer.Id) ? "checked" : "")>
-                                            <label class="form-check-label @(detail.ResponseAnswers.Any(ra => ra.AnswerId == answer.Id) ? "font-weight-bold text-primary" : "text-muted")"
-                                                   for="radio-@answer.Id">
-                                                    @answer.Text
-                                            </label>
-                                        </div>
-                                        }
-                                </div>
-                                }
-                                else
-                                {
-                                <!-- Use checkboxes for Multiple Choice and Checkbox questions -->
-                                <div class="form-group">
-                                        @foreach (var answer in detail.Question.Answers)
-                                        {
-                                        <div class="form-check">
-                                            <input class="form-check-input" type="checkbox" name="response@answer.Id"
-                                                   id="checkbox-@answer.Id" value="@answer.Id"
-                                                   disabled @(detail.ResponseAnswers.Any(ra => ra.AnswerId == answer.Id) ? "checked" : "")>
-                                            <label class="form-check-label @(detail.ResponseAnswers.Any(ra => ra.AnswerId == answer.Id) ? "font-weight-bold text-primary" : "text-muted")"
-                                                   for="checkbox-@answer.Id">
-                                                    @answer.Text
-                                            </label>
-                                        </div>
-                                        }
-                                </div>
-                                }
-                                break;
-
-                            case QuestionType.Rating:
-                                @if (detail.QuestionType == QuestionType.Rating)
-                                {
-                                <strong>User Selected rate</strong>
-                                <ul class="list-inline">
-                                        @foreach (var answer in detail.Question.Answers.OrderBy(a => a.Id))
-                                        {
-                                        <li class="list-inline-item  p-3">
-                                            <!-- Display answer text above the star -->
-                                            <div class="@(detail.ResponseAnswers.Any(ra => ra.AnswerId == answer.Id) ? "text-primary" : "text-muted")">
-                                                <span class="d-flex justify-content-center">@answer.Text</span>
-                                            </div>
-                                            <!-- Display star icon -->
-                                            <span class="@(detail.ResponseAnswers.Any(ra => ra.AnswerId == answer.Id) ? "text-primary fw-bold fs-3" : "text-secondary")">
-                                                <i class="bi bi-star-fill"></i> <!-- Star icon -->
-                                            </span>
-                                        </li>
-                                        }
-                                </ul>
-                                }
-                                
-                                break;
-                            case QuestionType.Likert:
-                            <strong> Answer:</strong>
-                            <ul class="list-unstyled m-3">
-                                    @foreach (var answer in detail.Question.Answers.OrderBy(a => a.Id))
-                                    {
-                                        // Construct a unique name for each question-answer pair to ensure radio buttons are not linked.
-                                        var radioName = $"likertResponse{detail.Question.Id}-{answer.Id}";
-                                        var isAnswerSelected = detail.ResponseAnswers.Any(ra => ra.AnswerId == answer.Id);
-
-                                    <li>
-                                        <label class=" @(isAnswerSelected ? "font-weight-bold text-primary" : "text-muted")">
-                                            <input type="radio"
-                                                   class="form-check-input"
-                                                   name="@radioName"
-                                                   value="@answer.Id"
-                                                   disabled
-                                                @(isAnswerSelected ? "checked='checked'" : "") />
-                                                @answer.Text
-                                        </label>
-                                    </li>
-                                    }
-                            </ul>
-
-
-                                break;
-                            case QuestionType.Matrix:
-                            <table class="table">
-
-                                <strong> Answer:</strong>
-                               @*  <thead>
-                                    <tr>
-                                        <th>User response</th>
-                                        
-                                    </tr>
-                                </thead> *@
-                                <tbody>
-                                        @foreach (var answer in detail.Question.Answers)
-                                        {
-                                            var isSelected = detail.ResponseAnswers.Any(ra => ra.AnswerId == answer.Id);
-                                            <tr>
-                                            <td class="@(isSelected ? "font-weight-bold text-primary" : "text-muted")">
-                                                    @answer.Text
-                                            </td>
-                                            <td>
-                                                <input type="radio" class="form-check-input" name="@($"response{detail.Question.Id}_{answer.Id}")" value="@answer.Id"
-                                                       disabled @(isSelected ? "checked='checked'" : "") />
-                                            </td>
-                                        </tr>
-                                        }
-                                </tbody>
-                            </table>
-                                break;
-
-
-                            case QuestionType.Ranking:
-                            <div class="row">
-                                <!-- Original Order of Answers -->
-                                <div class="col-md-6">
-                                    <strong>Original Order of Answers:</strong>
-                                    <ul class="list-group mb-3">
-                                            @foreach (var answer in detail.Question.Answers)
-                                            {
-                                                var userIndex = detail.ResponseAnswers.FindIndex(ra => ra.AnswerId == answer.Id) + 1;
-                                            <li class="list-group-item @($"color-{userIndex}")">
-                                                <span class="badge text-bg-secondary badge-pill">@userIndex</span>
-                                                    @answer.Text
-                                            </li>
-                                            }
-                                    </ul>
-                                </div>
-
-                                <!-- User Ranked Order -->
-                                <div class="col-md-6">
-                                    <strong>User Order of answers:</strong>
-                                    <ul class="list-group">
-                                            @for (int i = 0; i < detail.ResponseAnswers.Count; i++)
-                                            {
-                                                var ra = detail.ResponseAnswers[i];
-                                                var answer = detail.Question.Answers.FirstOrDefault(a => a.Id == ra.AnswerId);
-                                            <li class="list-group-item @($"color-{i+1}")">
-                                                <span class="badge text-bg-secondary badge-pill">@(i + 1)</span>
-                                                    @answer.Text
-                                            </li>
-                                            }
-                                    </ul>
-                                </div>
-                            </div>
-                         
-                                break;
-                            case QuestionType.Image:
-                            <div class="container">
-                                <div class="row">
-                                    <!-- All Images -->
-                                    <div class="col-md-12">
-                                        <strong>answers:</strong>
-                                        <div class="row">
-                                                @foreach (var answer in detail.Question.Answers)
-                                                {
-                                                    var isSelected = detail.ResponseAnswers.Any(ra => ra.AnswerId == answer.Id);
-                                                <div class="col-md-3 col-sm-4 col-6">
-                                                    <!-- Adjust column sizes for various breakpoints -->
-                                                    <div class="card mb-3 @(isSelected ? "selected-image-card" : "grayscale")">
-                                                        <img src="@answer.Text" class="card-img-top" alt="@answer.Text">
-                                                        <div class="card-body">
-                                                            <a class="btn btn-primary btn-sm btn-block" href="@answer.Text" target="_blank">
-                                                                View Image
-                                                            </a>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                                }
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-
-                                break;
-                            case QuestionType.Slider:
-                            <div class="container">
-                                <div class="row">
-                                    <!-- Slider Responses -->
-                                    <div class="col-md-12">
-                                        <strong>Answer</strong>
-                                        <ul class="list-group mb-3">
-                                                @foreach (var answer in detail.Question.Answers)
-                                                {
-                                                    // Retrieve the response that corresponds to the current answer
-                                                    var responseAnswer = detail.ResponseAnswers.FirstOrDefault(ra => ra.AnswerId == answer.Id);
-                                                    // Parse the response text to an integer
-                                                    int sliderValue = 0;
-                                                    Int32.TryParse(responseAnswer?.ResponseDetail.TextResponse, out sliderValue);
-
-                                                <li class="list-group-item">
-                                                    <label>@answer.Text</label>
-                                                    <div class="d-flex align-items-center">
-                                                        <span class="badge badge-secondary mr-2">0</span> <!-- Min value label -->
-                                                        <input type="range" min="0" max="100"
-                                                               value="@sliderValue" class="slider" disabled>
-                                                        <span class="badge badge-secondary ml-2">100</span> <!-- Max value label -->
-                                                    </div>
-                                                    <div class="mt-2">
-                                                        <span class="badge badge-primary badge-pill">User Response: @sliderValue</span>
-                                                    </div>
-                                                </li>
-                                                }
-                                        </ul>
-                                    </div>
-                                </div>
-                            </div>
-
-                                break;
-                            // Handle other question types as previously detailed
-
-                            // Other cases as previously detailed
-                            default:
-                            <p>Unsupported question type.</p>
-                             break;
-                        }
+<div class="container">
+    <!-- Response Header -->
+    <div class="response-header fade-in">
+        <div class="header-main">
+            <div class="header-content">
+                <div class="response-icon">
+                    <i class="bi bi-clipboard-check-fill"></i>
+                </div>
+                <div class="header-text">
+                    <h1>Response Details</h1>
+                    <div class="user-badge">@Model.UserName (@Model.UserEmail)</div>
+                    <p style="margin: 0; opacity: 0.9; font-weight: 500;">Complete survey response review</p>
                 </div>
             </div>
         </div>
-        }
-    <div>
-
-        <a asp-action="Index">Back to List</a>
+        <div class="header-meta">
+            <div class="meta-icon">
+                <i class="bi bi-calendar-check"></i>
+            </div>
+            <span class="meta-text">Submitted on: <span id="localTime">@Model.SubmissionDate.ToString("yyyy-MM-ddTHH:mm:ss")</span></span>
+        </div>
     </div>
+
+    <!-- Questions and Responses -->
+    @foreach (var detail in Model.ResponseDetails)
+    {
+        <div class="question-card stagger-animation">
+            <div class="question-header">
+                <div class="question-type">@detail.QuestionType.ToString()</div>
+                <h3 class="question-title">Question @((numberindex = numberindex + 1)): @detail.Question.Text</h3>
+            </div>
+            <div class="question-body">
+                @switch (detail.QuestionType)
+                {
+                    case QuestionType.Text:
+                    case QuestionType.Open_ended:
+                        <div class="text-response-label">Response:</div>
+                        <div class="text-response">@detail.TextResponse</div>
+                        break;
+
+                    case QuestionType.Multiple_choice:
+                    case QuestionType.CheckBox:
+                    case QuestionType.TrueFalse:
+                        <div class="text-response-label">Selected Answer@(detail.ResponseAnswers.Count > 1 ? "s" : ""):</div>
+                        <div class="choices-container">
+                            @foreach (var answer in detail.Question.Answers)
+                            {
+                                var isSelected = detail.ResponseAnswers.Any(ra => ra.AnswerId == answer.Id);
+                                <div class="choice-option @(isSelected ? "selected" : "")">
+                                    <div class="choice-input @(detail.Question.Type == QuestionType.TrueFalse ? "radio" : "") @(isSelected ? "checked" : "")"></div>
+                                    <span class="choice-label">@answer.Text</span>
+                                </div>
+                            }
+                        </div>
+                        break;
+
+                    case QuestionType.Rating:
+                        <div class="text-response-label">User Selected Rating:</div>
+                        <div class="rating-container">
+                            @foreach (var answer in detail.Question.Answers.OrderBy(a => a.Id))
+                            {
+                                var isSelected = detail.ResponseAnswers.Any(ra => ra.AnswerId == answer.Id);
+                                <div class="rating-item @(isSelected ? "selected" : "")">
+                                    <div class="rating-star">
+                                        <i class="bi bi-star-fill"></i>
+                                    </div>
+                                    <div class="rating-label">@answer.Text</div>
+                                </div>
+                            }
+                        </div>
+                        break;
+
+                    case QuestionType.Likert:
+                        <div class="text-response-label">Selected Response:</div>
+                        <div class="likert-container">
+                            @foreach (var answer in detail.Question.Answers.OrderBy(a => a.Id))
+                            {
+                                var isSelected = detail.ResponseAnswers.Any(ra => ra.AnswerId == answer.Id);
+                                <div class="likert-option @(isSelected ? "selected" : "")">
+                                    <div class="likert-radio @(isSelected ? "checked" : "")"></div>
+                                    <span class="likert-label">@answer.Text</span>
+                                </div>
+                            }
+                        </div>
+                        break;
+
+                    case QuestionType.Matrix:
+                        <div class="text-response-label">Selected Response:</div>
+                        <table class="matrix-table">
+                            <thead>
+                                <tr>
+                                    <th>Option</th>
+                                    <th style="width: 100px; text-align: center;">Selected</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                @foreach (var answer in detail.Question.Answers)
+                                {
+                                    var isSelected = detail.ResponseAnswers.Any(ra => ra.AnswerId == answer.Id);
+                                    <tr>
+                                        <td class="matrix-option @(isSelected ? "selected" : "")">@answer.Text</td>
+                                        <td style="text-align: center;">
+                                            <div class="matrix-radio @(isSelected ? "checked" : "")"></div>
+                                        </td>
+                                    </tr>
+                                }
+                            </tbody>
+                        </table>
+                        break;
+
+                    case QuestionType.Ranking:
+                        <div class="ranking-container">
+                            <div class="ranking-section">
+                                <div class="ranking-title">
+                                    <i class="bi bi-list-ol"></i>
+                                    Original Order
+                                </div>
+                                <div class="ranking-list">
+                                    @foreach (var answer in detail.Question.Answers)
+                                    {
+                                        var userIndex = detail.ResponseAnswers.FindIndex(ra => ra.AnswerId == answer.Id) + 1;
+                                        <div class="ranking-item">
+                                            <div class="ranking-number">@userIndex</div>
+                                            <div class="ranking-text">@answer.Text</div>
+                                        </div>
+                                    }
+                                </div>
+                            </div>
+                            <div class="ranking-section">
+                                <div class="ranking-title">
+                                    <i class="bi bi-arrow-up-down"></i>
+                                    User's Ranking
+                                </div>
+                                <div class="ranking-list">
+                                    @for (int i = 0; i < detail.ResponseAnswers.Count; i++)
+                                    {
+                                        var ra = detail.ResponseAnswers[i];
+                                        var answer = detail.Question.Answers.FirstOrDefault(a => a.Id == ra.AnswerId);
+                                        <div class="ranking-item">
+                                            <div class="ranking-number">@(i + 1)</div>
+                                            <div class="ranking-text">@answer.Text</div>
+                                        </div>
+                                    }
+                                </div>
+                            </div>
+                        </div>
+                        break;
+
+                    case QuestionType.Image:
+                        <div class="text-response-label">Image Selection:</div>
+                        <div class="images-container">
+                            @foreach (var answer in detail.Question.Answers)
+                            {
+                                var isSelected = detail.ResponseAnswers.Any(ra => ra.AnswerId == answer.Id);
+                                <div class="image-card @(isSelected ? "selected" : "unselected")" style="position: relative;">
+                                    @if (isSelected)
+                                    {
+                                        <div class="selected-indicator">
+                                            <i class="bi bi-check"></i>
+                                        </div>
+                                    }
+                                    <img src="@answer.Text" class="card-image" alt="Response Image">
+                                    <div class="image-card-body">
+                                        <a href="@answer.Text" target="_blank" class="view-image-btn">
+                                            <i class="bi bi-eye"></i>
+                                            View Image
+                                        </a>
+                                    </div>
+                                </div>
+                            }
+                        </div>
+                        break;
+
+                    case QuestionType.Slider:
+                        <div class="text-response-label">Slider Response:</div>
+                        <div class="slider-container">
+                            @foreach (var answer in detail.Question.Answers)
+                            {
+                                var responseAnswer = detail.ResponseAnswers.FirstOrDefault(ra => ra.AnswerId == answer.Id);
+                                int sliderValue = 0;
+                                Int32.TryParse(responseAnswer?.ResponseDetail.TextResponse, out sliderValue);
+
+                                <div class="slider-item">
+                                    <div class="slider-label">@answer.Text</div>
+                                    <div class="slider-wrapper">
+                                        <span class="slider-min">0</span>
+                                        <input type="range" min="0" max="100" value="@sliderValue" class="custom-slider" disabled>
+                                        <span class="slider-max">100</span>
+                                    </div>
+                                    <div class="slider-value">User Response: @sliderValue</div>
+                                </div>
+                            }
+                        </div>
+                        break;
+
+                    default:
+                        <div class="text-response">
+                            <div class="text-response-label">Unsupported Question Type</div>
+                            <p>This question type is not yet supported in the response viewer.</p>
+                        </div>
+                        break;
+                }
+            </div>
+        </div>
+    }
+
+    <!-- Back Link -->
+    <a asp-action="Index" class="back-link">
+        <i class="bi bi-arrow-left"></i>
+        Back to List
+    </a>
 </div>
 
-
-
-
-
-
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+        var utcDate = document.getElementById('localTime').innerText;
+        var localDate = new Date(utcDate + 'Z'); // Add 'Z' to indicate UTC time
+        document.getElementById('localTime').innerText = localDate.toLocaleString();
+    });
+</script>
\ No newline at end of file
diff --git a/Web/Areas/Admin/Views/UserResponseStatus/Index.cshtml b/Web/Areas/Admin/Views/UserResponseStatus/Index.cshtml
index 55d4667..d5da4bb 100644
--- a/Web/Areas/Admin/Views/UserResponseStatus/Index.cshtml
+++ b/Web/Areas/Admin/Views/UserResponseStatus/Index.cshtml
@@ -1,68 +1,982 @@
 @model IEnumerable<UserResponsesViewModel>
 
 @{
-    ViewData["Title"] = "User Responses Status";
+    ViewData["Title"] = "User Responses Management";
 }
 
-<div class="container-fluid mt-4 mb-5">
-    <div class="">
+<style>
+    /* Modern Design System */
+    @@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
 
-        <div class="card p-4 shadow-lg rounded-2">
+    :root {
+        --primary-color: #6366f1;
+        --primary-light: #8b5cf6;
+        --primary-dark: #4338ca;
+        --success-color: #10b981;
+        --success-light: #34d399;
+        --success-dark: #059669;
+        --info-color: #06b6d4;
+        --info-light: #22d3ee;
+        --info-dark: #0891b2;
+        --warning-color: #f59e0b;
+        --warning-light: #fbbf24;
+        --warning-dark: #d97706;
+        --danger-color: #ef4444;
+        --danger-light: #fca5a5;
+        --danger-dark: #dc2626;
+        --gray-50: #f8fafc;
+        --gray-100: #f1f5f9;
+        --gray-200: #e2e8f0;
+        --gray-300: #cbd5e1;
+        --gray-400: #94a3b8;
+        --gray-500: #64748b;
+        --gray-600: #475569;
+        --gray-700: #334155;
+        --gray-800: #1e293b;
+        --gray-900: #0f172a;
+        --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+        --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+        --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+        --border-radius-sm: 8px;
+        --border-radius-md: 12px;
+        --border-radius-lg: 16px;
+        --border-radius-xl: 24px;
+    }
 
-            <h3 class="text-primary">Response status</h3>
+    * {
+        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    }
 
-            <form asp-action="DeleteSelected" method="post">
-                <table class="table table-responsive w-100 d-block d-md-table table-bordered table-hover">
-                    <thead>
-                        <tr>
-                            <th>
-                                <input type="checkbox" id="selectAll" />
-                            </th>
-                            <th>Name</th>
-                            <th>Email</th>
-                            <th>Survey</th>
-                            <th>Action</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        @foreach (var item in Model)
-                        {
-                            <tr>
-                                <td>
-                                    <input type="checkbox" name="selectedEmails" value="@item.UserEmail" class="selectCheckbox" />
-                                </td>
-                                <td>@item.UserName</td>
-                                <td>@item.UserEmail</td>
-                                <td>
-                                    <ul>
-                                        @foreach (var response in item.Responses)
-                                        {
-                                            <span class="badge badge-primary p-2 shadow">@response.Questionnaire.Title</span>
-                                        }
-                                    </ul>
-                                </td>
-                                <td class="text-end">
-                                    <a asp-controller="UserResponseStatus" asp-action="UserResponsesStatus" asp-route-UserEmail="@item.UserEmail" class="btn btn-info btn-sm"><i class="bi bi-eye"></i> View Responses status</a>
-                                </td>
-                            </tr>
-                        }
-                    </tbody>
-                </table>
-                <button type="submit" class="btn btn-danger mt-2">Delete Selected</button>
-            </form>
+  
 
+ 
+
+    /* Header Section */
+    .page-header {
+        background: white;
+        border-radius: var(--border-radius-xl);
+        box-shadow: var(--shadow-xl);
+        padding: 2.5rem;
+        margin-bottom: 2rem;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .page-header::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 4px;
+        background: linear-gradient(90deg, var(--primary-color), var(--info-color), var(--success-color));
+    }
+
+    .header-content {
+        display: flex;
+        align-items: center;
+        gap: 1.5rem;
+    }
+
+    .header-icon {
+        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
+        color: white;
+        width: 64px;
+        height: 64px;
+        border-radius: var(--border-radius-lg);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1.75rem;
+        box-shadow: var(--shadow-lg);
+    }
+
+    .header-text h1 {
+        font-size: 2.25rem;
+        font-weight: 800;
+        color: var(--gray-800);
+        margin: 0 0 0.5rem;
+    }
+
+    .header-subtitle {
+        color: var(--gray-600);
+        font-size: 1.1rem;
+        font-weight: 500;
+    }
+
+    /* Statistics Section */
+    .stats-section {
+        background: linear-gradient(135deg, var(--info-color) 0%, var(--info-dark) 100%);
+        color: white;
+        padding: 2rem;
+        margin-bottom: 2rem;
+        border-radius: var(--border-radius-lg);
+        box-shadow: var(--shadow-lg);
+    }
+
+    .stats-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+        gap: 1.5rem;
+        text-align: center;
+    }
+
+    .stat-item {
+        padding: 1rem;
+        background: rgba(255, 255, 255, 0.1);
+        border-radius: var(--border-radius-md);
+        backdrop-filter: blur(10px);
+        transition: all 0.3s ease;
+    }
+
+    .stat-item:hover {
+        background: rgba(255, 255, 255, 0.2);
+        transform: translateY(-2px);
+    }
+
+    .stat-number {
+        font-size: 2.5rem;
+        font-weight: 800;
+        display: block;
+        margin-bottom: 0.25rem;
+    }
+
+    .stat-label {
+        font-size: 0.875rem;
+        font-weight: 500;
+        opacity: 0.9;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+    }
+
+    /* Selection Controls */
+    .selection-controls {
+        background: white;
+        border-radius: var(--border-radius-lg);
+        padding: 2rem;
+        margin-bottom: 2rem;
+        box-shadow: var(--shadow-lg);
+        border: 1px solid var(--gray-200);
+        display: none;
+        transition: all 0.3s ease;
+    }
+
+    .selection-controls.show {
+        display: block;
+        animation: slideDown 0.3s ease;
+    }
+
+    @@keyframes slideDown {
+        from {
+            opacity: 0;
+            transform: translateY(-20px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+
+    .selection-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        gap: 1rem;
+        margin-bottom: 1.5rem;
+    }
+
+    .selection-info {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+    }
+
+    .selection-icon {
+        background: var(--primary-color);
+        color: white;
+        width: 48px;
+        height: 48px;
+        border-radius: var(--border-radius-md);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1.5rem;
+    }
+
+    .selection-text h3 {
+        font-size: 1.25rem;
+        font-weight: 700;
+        color: var(--gray-800);
+        margin: 0 0 0.25rem;
+    }
+
+    .selection-count {
+        color: var(--gray-600);
+        font-weight: 500;
+    }
+
+    .selection-actions {
+        display: flex;
+        gap: 1rem;
+        flex-wrap: wrap;
+    }
+
+    .master-checkbox-container {
+        background: white;
+        border-radius: var(--border-radius-md);
+        padding: 1.5rem;
+        margin-bottom: 2rem;
+        box-shadow: var(--shadow-md);
+        border: 1px solid var(--gray-200);
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+    }
+
+    .master-checkbox {
+        width: 28px;
+        height: 28px;
+        border: 2px solid var(--gray-300);
+        border-radius: 8px;
+        background: white;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        box-shadow: var(--shadow-sm);
+    }
+
+    .master-checkbox:hover {
+        border-color: var(--primary-color);
+        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+    }
+
+    .master-checkbox.checked {
+        background: var(--primary-color);
+        border-color: var(--primary-color);
+        color: white;
+    }
+
+    .master-checkbox input {
+        display: none;
+    }
+
+    /* User Cards Grid */
+    .users-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+        gap: 2rem;
+        margin-bottom: 2rem;
+    }
+
+    /* User Card */
+    .user-card {
+        background: white;
+        border-radius: var(--border-radius-xl);
+        box-shadow: var(--shadow-lg);
+        overflow: hidden;
+        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+        position: relative;
+        border: 1px solid var(--gray-200);
+    }
+
+    .user-card:hover {
+        transform: translateY(-8px);
+        box-shadow: var(--shadow-2xl);
+        border-color: var(--primary-color);
+    }
+
+    .user-card.selected {
+        border-color: var(--primary-color);
+        background: linear-gradient(135deg, #fef2f2 0%, #fecaca 10%, white 100%);
+        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1), var(--shadow-lg);
+    }
+
+    .user-card::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 4px;
+        background: linear-gradient(90deg, var(--primary-color), var(--info-color), var(--success-color));
+        transform: scaleX(0);
+        transition: transform 0.3s ease;
+        transform-origin: left;
+    }
+
+    .user-card:hover::before {
+        transform: scaleX(1);
+    }
+
+    .user-card.selected::before {
+        transform: scaleX(1);
+        background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
+    }
+
+    /* Card Header */
+    .card-header-custom {
+        background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
+        padding: 1.5rem;
+        border-bottom: 1px solid var(--gray-200);
+        position: relative;
+    }
+
+    .user-checkbox {
+        position: absolute;
+        top: 1rem;
+        right: 1rem;
+        z-index: 10;
+    }
+
+    .custom-checkbox {
+        width: 24px;
+        height: 24px;
+        border: 2px solid var(--gray-300);
+        border-radius: 6px;
+        background: white;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        box-shadow: var(--shadow-sm);
+    }
+
+    .custom-checkbox:hover {
+        border-color: var(--primary-color);
+        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+    }
+
+    .custom-checkbox.checked {
+        background: var(--primary-color);
+        border-color: var(--primary-color);
+        color: white;
+    }
+
+    .custom-checkbox input {
+        display: none;
+    }
+
+    .user-info {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        padding-right: 3rem;
+    }
+
+    .user-avatar {
+        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
+        color: white;
+        width: 48px;
+        height: 48px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1.25rem;
+        font-weight: 700;
+        box-shadow: var(--shadow-md);
+    }
+
+    .user-details h3 {
+        font-size: 1.25rem;
+        font-weight: 700;
+        color: var(--gray-800);
+        margin: 0 0 0.25rem;
+    }
+
+    .user-email {
+        color: var(--gray-600);
+        font-size: 0.875rem;
+        font-weight: 500;
+    }
+
+    /* Card Content */
+    .card-content {
+        padding: 1.5rem;
+    }
+
+    .surveys-section {
+        margin-bottom: 1.5rem;
+    }
+
+    .surveys-header {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        margin-bottom: 1rem;
+    }
+
+    .surveys-icon {
+        background: var(--success-color);
+        color: white;
+        width: 32px;
+        height: 32px;
+        border-radius: var(--border-radius-sm);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1rem;
+    }
+
+    .surveys-title {
+        font-size: 1rem;
+        font-weight: 600;
+        color: var(--gray-800);
+        margin: 0;
+    }
+
+    .surveys-grid {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.75rem;
+    }
+
+    .survey-badge {
+        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
+        color: white;
+        padding: 0.5rem 1rem;
+        border-radius: var(--border-radius-md);
+        font-size: 0.875rem;
+        font-weight: 600;
+        box-shadow: var(--shadow-sm);
+        transition: all 0.3s ease;
+    }
+
+    .survey-badge:hover {
+        transform: translateY(-1px);
+        box-shadow: var(--shadow-md);
+    }
+
+    .no-surveys {
+        background: var(--gray-100);
+        color: var(--gray-500);
+        padding: 1rem;
+        border-radius: var(--border-radius-md);
+        text-align: center;
+        font-style: italic;
+        border: 1px dashed var(--gray-300);
+    }
+
+    /* Action Button */
+    .action-section {
+        background: var(--gray-50);
+        padding: 1.5rem;
+        border-top: 1px solid var(--gray-200);
+    }
+
+    .action-btn {
+        background: linear-gradient(135deg, var(--info-color) 0%, var(--info-dark) 100%);
+        color: white;
+        border: none;
+        padding: 0.75rem 1.5rem;
+        border-radius: var(--border-radius-md);
+        font-weight: 600;
+        text-decoration: none;
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        transition: all 0.3s ease;
+        box-shadow: var(--shadow-md);
+        width: 100%;
+        justify-content: center;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .action-btn::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: -100%;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+        transition: left 0.5s;
+    }
+
+    .action-btn:hover::before {
+        left: 100%;
+    }
+
+    .action-btn:hover {
+        background: linear-gradient(135deg, var(--info-dark) 0%, #0e7490 100%);
+        transform: translateY(-2px);
+        box-shadow: var(--shadow-lg);
+        color: white;
+        text-decoration: none;
+    }
+
+    /* Buttons */
+    .btn {
+        border-radius: var(--border-radius-md);
+        font-weight: 600;
+        padding: 0.75rem 1.5rem;
+        font-size: 0.875rem;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        border: none;
+        text-decoration: none;
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        box-shadow: var(--shadow-sm);
+        position: relative;
+        overflow: hidden;
+    }
+
+    .btn::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: -100%;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+        transition: left 0.5s;
+    }
+
+    .btn:hover::before {
+        left: 100%;
+    }
+
+    .btn-danger {
+        background: linear-gradient(135deg, var(--danger-color) 0%, var(--danger-dark) 100%);
+        color: white;
+    }
+
+    .btn-danger:hover {
+        background: linear-gradient(135deg, var(--danger-dark) 0%, #b91c1c 100%);
+        transform: translateY(-2px);
+        box-shadow: var(--shadow-lg);
+        color: white;
+    }
+
+    .btn-secondary {
+        background: linear-gradient(135deg, var(--gray-500) 0%, var(--gray-600) 100%);
+        color: white;
+    }
+
+    .btn-secondary:hover {
+        background: linear-gradient(135deg, var(--gray-600) 0%, var(--gray-700) 100%);
+        transform: translateY(-2px);
+        box-shadow: var(--shadow-lg);
+        color: white;
+    }
+
+    /* Empty State */
+    .empty-state {
+        text-align: center;
+        padding: 4rem 2rem;
+        background: white;
+        border-radius: var(--border-radius-xl);
+        box-shadow: var(--shadow-lg);
+        border: 2px dashed var(--gray-300);
+    }
+
+    .empty-state-icon {
+        background: var(--gray-100);
+        color: var(--gray-400);
+        width: 80px;
+        height: 80px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 2rem;
+        margin: 0 auto 1.5rem;
+    }
+
+    .empty-state h3 {
+        font-size: 1.5rem;
+        font-weight: 700;
+        color: var(--gray-700);
+        margin-bottom: 1rem;
+    }
+
+    .empty-state p {
+        color: var(--gray-500);
+        font-size: 1rem;
+    }
+
+    /* Loading States */
+    .btn.loading {
+        opacity: 0.7;
+        pointer-events: none;
+    }
+
+    .btn.loading::after {
+        content: "";
+        width: 18px;
+        height: 18px;
+        margin-left: 0.75rem;
+        border: 2px solid transparent;
+        border-top-color: currentColor;
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+    }
+
+    @@keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+
+    /* Responsive Design */
+    @@media (max-width: 1024px) {
+        .users-grid {
+            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+        }
+    }
+
+    @@media (max-width: 768px) {
+        .container-fluid {
+            padding: 1rem;
+        }
+
+        .users-grid {
+            grid-template-columns: 1fr;
+        }
+
+        .stats-grid {
+            grid-template-columns: repeat(2, 1fr);
+        }
+
+        .selection-header {
+            flex-direction: column;
+            align-items: flex-start;
+        }
+
+        .selection-actions {
+            width: 100%;
+        }
+
+        .selection-actions .btn {
+            flex: 1;
+        }
+    }
+
+    /* Animations */
+    .fade-in {
+        animation: fadeIn 0.6s ease-out;
+    }
+
+    @@keyframes fadeIn {
+        from {
+            opacity: 0;
+            transform: translateY(20px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+
+    .stagger-animation {
+        animation: fadeIn 0.6s ease-out;
+        animation-fill-mode: both;
+    }
+
+    .stagger-animation:nth-child(1) { animation-delay: 0.1s; }
+    .stagger-animation:nth-child(2) { animation-delay: 0.2s; }
+    .stagger-animation:nth-child(3) { animation-delay: 0.3s; }
+    .stagger-animation:nth-child(4) { animation-delay: 0.4s; }
+    .stagger-animation:nth-child(5) { animation-delay: 0.5s; }
+    .stagger-animation:nth-child(6) { animation-delay: 0.6s; }
+</style>
+
+<div class="container-fluid">
+    <!-- Page Header -->
+    <div class="page-header fade-in">
+        <div class="header-content">
+            <div class="header-icon">
+                <i class="bi bi-people-fill"></i>
+            </div>
+            <div class="header-text">
+                <h1>User Responses Management</h1>
+                <p class="header-subtitle">Monitor and manage user survey responses and participation</p>
+            </div>
         </div>
-
     </div>
+
+    <form asp-action="DeleteSelected" method="post" id="responseForm">
+        @if (Model.Any())
+        {
+            <!-- Statistics Section -->
+            <div class="stats-section fade-in">
+                <div class="stats-grid">
+                    <div class="stat-item">
+                        <span class="stat-number">@Model.Count()</span>
+                        <span class="stat-label">Total Users</span>
+                    </div>
+                    <div class="stat-item">
+                        <span class="stat-number">@Model.Sum(u => u.Responses?.Count ?? 0)</span>
+                        <span class="stat-label">Total Responses</span>
+                    </div>
+                    <div class="stat-item">
+                        <span class="stat-number">@Model.Where(u => u.Responses != null).SelectMany(u => u.Responses).Select(r => r.Questionnaire?.Title).Distinct().Count()</span>
+                        <span class="stat-label">Unique Surveys</span>
+                    </div>
+                    <div class="stat-item">
+                        <span class="stat-number">@Math.Round(Model.Any() ? (double)Model.Sum(u => u.Responses?.Count ?? 0) / Model.Count() : 0, 1)</span>
+                        <span class="stat-label">Avg Responses</span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Master Checkbox -->
+            <div class="master-checkbox-container fade-in">
+                <div class="master-checkbox" id="selectAllCheckbox">
+                    <input type="checkbox" id="selectAllInput">
+                    <i class="bi bi-check" style="display: none;"></i>
+                </div>
+                <label for="selectAllInput" class="mb-0 font-weight-bold">
+                    <i class="bi bi-check-square me-2"></i>Select All Users
+                </label>
+                <div class="ms-auto">
+                    <span id="selectedCount" class="badge bg-primary">0 selected</span>
+                </div>
+            </div>
+
+            <!-- Selection Controls -->
+            <div class="selection-controls" id="selectionControls">
+                <div class="selection-header">
+                    <div class="selection-info">
+                        <div class="selection-icon">
+                            <i class="bi bi-check-circle-fill"></i>
+                        </div>
+                        <div class="selection-text">
+                            <h3>Selection Active</h3>
+                            <p class="selection-count" id="selectionText">0 users selected</p>
+                        </div>
+                    </div>
+                    <div class="selection-actions">
+                        <button type="submit" class="btn btn-danger" id="deleteSelectedBtn">
+                            <i class="bi bi-trash-fill"></i>
+                            Delete Selected
+                        </button>
+                        <button type="button" class="btn btn-secondary" id="deselectAllBtn">
+                            <i class="bi bi-x-circle"></i>
+                            Deselect All
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Users Grid -->
+            <div class="users-grid">
+                @foreach (var item in Model.Select((user, index) => new { User = user, Index = index }))
+                {
+                    <div class="user-card stagger-animation" data-email="@item.User.UserEmail">
+                        <!-- Card Header -->
+                        <div class="card-header-custom">
+                            <!-- User Checkbox -->
+                            <div class="user-checkbox">
+                                <div class="custom-checkbox user-select-checkbox">
+                                    <input type="checkbox" class="selectCheckbox" name="selectedEmails" value="@item.User.UserEmail">
+                                    <i class="bi bi-check" style="display: none;"></i>
+                                </div>
+                            </div>
+
+                            <div class="user-info">
+                                <div class="user-avatar">
+                                    @(item.User.UserName?.Substring(0, 1).ToUpper() ?? "U")
+                                </div>
+                                <div class="user-details">
+                                    <h3>@item.User.UserName</h3>
+                                    <p class="user-email">@item.User.UserEmail</p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Card Content -->
+                        <div class="card-content">
+                            <div class="surveys-section">
+                                <div class="surveys-header">
+                                    <div class="surveys-icon">
+                                        <i class="bi bi-clipboard-check"></i>
+                                    </div>
+                                    <h4 class="surveys-title">
+                                        Survey Responses (@(item.User.Responses?.Count ?? 0))
+                                    </h4>
+                                </div>
+
+                                @if (item.User.Responses?.Any() == true)
+                                {
+                                    <div class="surveys-grid">
+                                        @foreach (var response in item.User.Responses)
+                                        {
+                                            <span class="survey-badge">@response.Questionnaire?.Title</span>
+                                        }
+                                    </div>
+                                }
+                                else
+                                {
+                                    <div class="no-surveys">
+                                        <i class="bi bi-inbox"></i>
+                                        No survey responses yet
+                                    </div>
+                                }
+                            </div>
+                        </div>
+
+                        <!-- Action Section -->
+                        <div class="action-section">
+                            <a asp-controller="UserResponseStatus" 
+                               asp-action="UserResponsesStatus" 
+                               asp-route-UserEmail="@item.User.UserEmail" 
+                               class="action-btn">
+                                <i class="bi bi-eye-fill"></i>
+                                View Response Details
+                            </a>
+                        </div>
+                    </div>
+                }
+            </div>
+        }
+        else
+        {
+            <!-- Empty State -->
+            <div class="empty-state fade-in">
+                <div class="empty-state-icon">
+                    <i class="bi bi-people"></i>
+                </div>
+                <h3>No User Responses Yet</h3>
+                <p>When users start responding to surveys, they will appear here for you to manage and review.</p>
+            </div>
+        }
+    </form>
 </div>
 
 @section Scripts {
     <script>
-        document.getElementById('selectAll').addEventListener('click', function (event) {
-            var checkboxes = document.querySelectorAll('.selectCheckbox');
-            checkboxes.forEach(function (checkbox) {
-                checkbox.checked = event.target.checked;
+        $(document).ready(function () {
+            let selectedUsers = [];
+
+            // Update selection UI
+            function updateSelectionUI() {
+                const selectedCount = selectedUsers.length;
+                $('#selectedCount').text(selectedCount + ' selected');
+                $('#selectionText').text(selectedCount + ' user' + (selectedCount !== 1 ? 's' : '') + ' selected');
+                
+                if (selectedCount > 0) {
+                    $('#selectionControls').addClass('show');
+                } else {
+                    $('#selectionControls').removeClass('show');
+                }
+
+                // Update master checkbox state
+                const totalUsers = $('.selectCheckbox').length;
+                const masterCheckbox = $('#selectAllCheckbox');
+                const masterInput = $('#selectAllInput');
+                
+                if (selectedCount === 0) {
+                    masterCheckbox.removeClass('checked');
+                    masterInput.prop('checked', false);
+                    masterCheckbox.find('i').hide();
+                } else if (selectedCount === totalUsers) {
+                    masterCheckbox.addClass('checked');
+                    masterInput.prop('checked', true);
+                    masterCheckbox.find('i').show();
+                } else {
+                    masterCheckbox.removeClass('checked');
+                    masterInput.prop('checked', false);
+                    masterCheckbox.find('i').hide();
+                }
+            }
+
+            // Handle individual user checkbox clicks
+            $(document).on('change', '.selectCheckbox', function() {
+                const userCard = $(this).closest('.user-card');
+                const userEmail = $(this).val();
+                const checkbox = $(this).closest('.custom-checkbox');
+                
+                if ($(this).is(':checked')) {
+                    if (!selectedUsers.includes(userEmail)) {
+                        selectedUsers.push(userEmail);
+                        userCard.addClass('selected');
+                        checkbox.addClass('checked');
+                        checkbox.find('i').show();
+                    }
+                } else {
+                    selectedUsers = selectedUsers.filter(email => email !== userEmail);
+                    userCard.removeClass('selected');
+                    checkbox.removeClass('checked');
+                    checkbox.find('i').hide();
+                }
+                
+                updateSelectionUI();
             });
+
+            // Handle checkbox visual clicks
+            $(document).on('click', '.user-select-checkbox', function() {
+                const input = $(this).find('input');
+                input.prop('checked', !input.is(':checked')).trigger('change');
+            });
+
+            // Handle master checkbox
+            $('#selectAllCheckbox').click(function() {
+                const shouldSelectAll = selectedUsers.length !== $('.selectCheckbox').length;
+                
+                $('.selectCheckbox').each(function() {
+                    const userCard = $(this).closest('.user-card');
+                    const userEmail = $(this).val();
+                    const checkbox = $(this).closest('.custom-checkbox');
+                    
+                    $(this).prop('checked', shouldSelectAll);
+                    
+                    if (shouldSelectAll) {
+                        if (!selectedUsers.includes(userEmail)) {
+                            selectedUsers.push(userEmail);
+                        }
+                        userCard.addClass('selected');
+                        checkbox.addClass('checked');
+                        checkbox.find('i').show();
+                    } else {
+                        selectedUsers = [];
+                        userCard.removeClass('selected');
+                        checkbox.removeClass('checked');
+                        checkbox.find('i').hide();
+                    }
+                });
+                
+                updateSelectionUI();
+            });
+
+            // Deselect all button
+            $('#deselectAllBtn').click(function() {
+                selectedUsers = [];
+                $('.selectCheckbox').prop('checked', false);
+                $('.user-card').removeClass('selected');
+                $('.custom-checkbox').removeClass('checked');
+                $('.custom-checkbox i').hide();
+                updateSelectionUI();
+            });
+
+            // Delete selected button with confirmation
+            $('#deleteSelectedBtn').click(function(e) {
+                if (selectedUsers.length === 0) {
+                    e.preventDefault();
+                    alert('Please select at least one user to delete.');
+                    return;
+                }
+
+                const confirmMessage = `Are you sure you want to delete ${selectedUsers.length} user response${selectedUsers.length !== 1 ? 's' : ''}? This action cannot be undone.`;
+                
+                if (!confirm(confirmMessage)) {
+                    e.preventDefault();
+                    return;
+                }
+
+                // Add loading state
+                $(this).addClass('loading').prop('disabled', true);
+            });
+
+            // Initialize UI
+            updateSelectionUI();
         });
     </script>
-}
+}
\ No newline at end of file
diff --git a/Web/Areas/Admin/Views/UserResponseStatus/UserResponsesStatus.cshtml b/Web/Areas/Admin/Views/UserResponseStatus/UserResponsesStatus.cshtml
index 2b78613..563b1c1 100644
--- a/Web/Areas/Admin/Views/UserResponseStatus/UserResponsesStatus.cshtml
+++ b/Web/Areas/Admin/Views/UserResponseStatus/UserResponsesStatus.cshtml
@@ -2,322 +2,1040 @@
 @model UserResponsesViewModel
 
 @{
-    ViewData["Title"] = "User Responses";
+    ViewData["Title"] = "User Response Details";
 }
 
 <style>
-    .stepper-wrapper {
-        display: flex;
-        flex-direction: column;
-        gap: 15px;
-        position: relative;
+    /* Modern Design System */
+    @@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+
+    :root {
+        --primary-color: #6366f1;
+        --primary-light: #8b5cf6;
+        --primary-dark: #4338ca;
+        --success-color: #10b981;
+        --success-light: #34d399;
+        --success-dark: #059669;
+        --info-color: #06b6d4;
+        --info-light: #22d3ee;
+        --info-dark: #0891b2;
+        --warning-color: #f59e0b;
+        --warning-light: #fbbf24;
+        --warning-dark: #d97706;
+        --danger-color: #ef4444;
+        --danger-light: #fca5a5;
+        --danger-dark: #dc2626;
+        --gray-50: #f8fafc;
+        --gray-100: #f1f5f9;
+        --gray-200: #e2e8f0;
+        --gray-300: #cbd5e1;
+        --gray-400: #94a3b8;
+        --gray-500: #64748b;
+        --gray-600: #475569;
+        --gray-700: #334155;
+        --gray-800: #1e293b;
+        --gray-900: #0f172a;
+        --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+        --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+        --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+        --border-radius-sm: 8px;
+        --border-radius-md: 12px;
+        --border-radius-lg: 16px;
+        --border-radius-xl: 24px;
     }
 
-    .stepper-item {
-        display: flex;
-        align-items: flex-start;
-        position: relative;
-        padding-left: 120px;
+    * {
+        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
     }
 
-        .stepper-item::before {
-            content: '';
-            position: absolute;
-            left: 20px;
-            top: 0;
-            bottom: 0;
-            width: 2px;
-            background-color: #007bff;
+    body {
+        background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
+        min-height: 100vh;
+    }
+
+    .container-fluid {
+        max-width: 1400px;
+        margin: 0 auto;
+        padding: 2rem 1rem;
+    }
+
+    /* Back Button */
+    .back-button {
+        background: linear-gradient(135deg, var(--gray-500) 0%, var(--gray-600) 100%);
+        color: white;
+        border: none;
+        padding: 0.75rem 1.5rem;
+        border-radius: var(--border-radius-md);
+        font-weight: 600;
+        text-decoration: none;
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        transition: all 0.3s ease;
+        box-shadow: var(--shadow-md);
+        margin-bottom: 2rem;
+    }
+
+        .back-button:hover {
+            background: linear-gradient(135deg, var(--gray-600) 0%, var(--gray-700) 100%);
+            transform: translateY(-2px);
+            box-shadow: var(--shadow-lg);
+            color: white;
+            text-decoration: none;
         }
 
-    .step-counter {
-        position: absolute;
-        left: 0;
-        top: 0;
+    /* Header Section */
+    .user-header {
+        background: white;
+        border-radius: var(--border-radius-xl);
+        box-shadow: var(--shadow-xl);
+        overflow: hidden;
+        margin-bottom: 2rem;
+        position: relative;
+    }
+
+        .user-header::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 4px;
+            background: linear-gradient(90deg, var(--primary-color), var(--info-color), var(--success-color));
+        }
+
+    .user-info-section {
+        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
+        color: white;
+        padding: 2.5rem;
+        position: relative;
+        overflow: hidden;
+    }
+
+        .user-info-section::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><defs><radialGradient id="a" cx="50%" cy="0%" r="100%"><stop offset="0%" stop-color="white" stop-opacity="0.1"/><stop offset="100%" stop-color="white" stop-opacity="0"/></radialGradient></defs><rect width="100" height="20" fill="url(%23a)"/></svg>');
+            opacity: 0.3;
+        }
+
+    .user-info-content {
+        display: grid;
+        grid-template-columns: auto 1fr auto;
+        gap: 2rem;
+        align-items: center;
+        position: relative;
+        z-index: 1;
+    }
+
+    .user-avatar {
+        background: rgba(255, 255, 255, 0.2);
+        width: 80px;
+        height: 80px;
+        border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
-        width: 40px;
-        height: 40px;
-        background-color: #aed5ff;
-        color: white;
-        border-radius: 50%;
-        font-size: 14px;
-        font-weight: bold;
+        font-size: 2rem;
+        font-weight: 800;
+        backdrop-filter: blur(10px);
+        box-shadow: var(--shadow-lg);
     }
 
+    .user-details h2 {
+        font-size: 1.75rem;
+        font-weight: 800;
+        margin: 0 0 0.5rem;
+    }
+
+    .user-email {
+        font-size: 1.1rem;
+        opacity: 0.9;
+        font-weight: 500;
+        margin: 0 0 1rem;
+    }
+
+    .response-count {
+        background: rgba(255, 255, 255, 0.2);
+        padding: 0.75rem 1.25rem;
+        border-radius: var(--border-radius-md);
+        backdrop-filter: blur(10px);
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-weight: 600;
+    }
+
+    .export-buttons {
+        display: flex;
+        gap: 1rem;
+        flex-wrap: wrap;
+    }
+
+    .export-btn {
+        background: rgba(255, 255, 255, 0.2);
+        color: white;
+        border: 1px solid rgba(255, 255, 255, 0.3);
+        padding: 0.75rem 1.25rem;
+        border-radius: var(--border-radius-md);
+        font-weight: 600;
+        text-decoration: none;
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        transition: all 0.3s ease;
+        backdrop-filter: blur(10px);
+    }
+
+        .export-btn:hover {
+            background: rgba(255, 255, 255, 0.3);
+            transform: translateY(-2px);
+            color: white;
+            text-decoration: none;
+            box-shadow: var(--shadow-md);
+        }
+
+    /* Charts Section */
+    .charts-section {
+        background: white;
+        padding: 2rem;
+        border-top: 1px solid var(--gray-200);
+    }
+
+    .charts-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 2rem;
+        margin-bottom: 2rem;
+    }
+
+    .chart-container {
+        background: var(--gray-50);
+        border-radius: var(--border-radius-lg);
+        padding: 1.5rem;
+        border: 1px solid var(--gray-200);
+    }
+
+    .chart-title {
+        font-size: 1.1rem;
+        font-weight: 600;
+        color: var(--gray-800);
+        margin-bottom: 1rem;
+        text-align: center;
+    }
+
+    .main-chart {
+        background: white;
+        border-radius: var(--border-radius-lg);
+        padding: 1.5rem;
+        border: 1px solid var(--gray-200);
+        box-shadow: var(--shadow-sm);
+    }
+
+    /* Timeline/Stepper Design */
+    .responses-timeline {
+        margin-top: 2rem;
+    }
+
+    .timeline-header {
+        background: white;
+        padding: 2rem;
+        border-radius: var(--border-radius-lg);
+        box-shadow: var(--shadow-lg);
+        margin-bottom: 2rem;
+        text-align: center;
+    }
+
+        .timeline-header h3 {
+            font-size: 1.75rem;
+            font-weight: 700;
+            color: var(--gray-800);
+            margin: 0 0 0.5rem;
+        }
+
+    .timeline-subtitle {
+        color: var(--gray-600);
+        font-weight: 500;
+    }
+
+    .stepper-wrapper {
+        position: relative;
+        padding-left: 3rem;
+    }
+
+        .stepper-wrapper::before {
+            content: '';
+            position: absolute;
+            left: 2rem;
+            top: 0;
+            bottom: 0;
+            width: 3px;
+            background: linear-gradient(180deg, var(--primary-color), var(--info-color), var(--success-color));
+            border-radius: 2px;
+        }
+
+    .stepper-item {
+        position: relative;
+        margin-bottom: 3rem;
+    }
+
+    .step-counter {
+        position: absolute;
+        left: -3rem;
+        top: 1.5rem;
+        width: 60px;
+        height: 60px;
+        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: var(--shadow-lg);
+        border: 4px solid white;
+        z-index: 2;
+    }
+
+        .step-counter i {
+            color: white;
+            font-size: 1.5rem;
+        }
+
     .step-content {
-        flex-grow: 1;
+        margin-left: 1rem;
     }
 
-    .step-header {
-        margin-bottom: 10px;
+    /* Response Card */
+    .response-card {
+        background: white;
+        border-radius: var(--border-radius-xl);
+        box-shadow: var(--shadow-xl);
+        overflow: hidden;
+        border: 1px solid var(--gray-200);
+        transition: all 0.3s ease;
     }
 
-    #QuestionnairCard {
+        .response-card:hover {
+            transform: translateY(-4px);
+            box-shadow: var(--shadow-2xl);
+        }
+
+    .response-header {
+        background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
         padding: 2rem;
-        border: 0.5px solid #e7e7e7;
-        border-radius: 3px;
-        -webkit-box-shadow: 0px 0px 14px -7px rgba(0,0,0,0.75);
-        -moz-box-shadow: 0px 0px 14px -7px rgba(0,0,0,0.75);
-        box-shadow: 0px 0px 14px -7px rgba(0,0,0,0.75);
+        border-bottom: 1px solid var(--gray-200);
+    }
+
+    .response-info {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        gap: 2rem;
+        align-items: start;
+    }
+
+    .response-details h4 {
+        font-size: 1.5rem;
+        font-weight: 700;
+        color: var(--gray-800);
+        margin: 0 0 1rem;
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+    }
+
+    .response-meta {
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+    }
+
+    .meta-item {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-weight: 500;
+    }
+
+        .meta-item i {
+            color: var(--primary-color);
+            font-size: 1.1rem;
+        }
+
+    .submission-date {
+        color: var(--success-color);
+    }
+
+    .question-count {
+        color: var(--info-color);
+    }
+
+    .chart-mini {
+        width: 200px;
+        height: 120px;
+        background: white;
+        border-radius: var(--border-radius-md);
+        border: 1px solid var(--gray-200);
+    }
+
+    .response-actions {
+        background: var(--gray-50);
+        padding: 1.5rem 2rem;
+        border-top: 1px solid var(--gray-200);
+        display: flex;
+        gap: 1rem;
+        flex-wrap: wrap;
+        align-items: center;
+    }
+
+    .action-btn {
+        padding: 0.75rem 1.25rem;
+        border-radius: var(--border-radius-md);
+        font-weight: 600;
+        text-decoration: none;
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        transition: all 0.3s ease;
+        border: none;
+        box-shadow: var(--shadow-sm);
+        font-size: 0.875rem;
+    }
+
+        .action-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: var(--shadow-md);
+            text-decoration: none;
+        }
+
+    .btn-pdf {
+        background: linear-gradient(135deg, var(--danger-color) 0%, var(--danger-dark) 100%);
+        color: white;
+    }
+
+        .btn-pdf:hover {
+            background: linear-gradient(135deg, var(--danger-dark) 0%, #b91c1c 100%);
+            color: white;
+        }
+
+    .btn-excel {
+        background: linear-gradient(135deg, var(--success-color) 0%, var(--success-dark) 100%);
+        color: white;
+    }
+
+        .btn-excel:hover {
+            background: linear-gradient(135deg, var(--success-dark) 0%, #047857 100%);
+            color: white;
+        }
+
+    .btn-toggle {
+        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
+        color: white;
+        cursor: pointer;
+    }
+
+        .btn-toggle:hover {
+            background: linear-gradient(135deg, var(--primary-dark) 0%, #3730a3 100%);
+            color: white;
+        }
+
+        .btn-toggle.expanded {
+            background: linear-gradient(135deg, var(--info-color) 0%, var(--info-dark) 100%);
+        }
+
+            .btn-toggle.expanded:hover {
+                background: linear-gradient(135deg, var(--info-dark) 0%, #0e7490 100%);
+                color: white;
+            }
+
+    /* Response Details Table */
+    .response-details-section {
+        padding: 0;
+        background: white;
+    }
+
+    .details-table {
+        width: 100%;
+        border-collapse: collapse;
+        margin: 0;
+    }
+
+        .details-table th {
+            background: linear-gradient(135deg, var(--gray-700) 0%, var(--gray-800) 100%);
+            color: white;
+            padding: 1.25rem;
+            font-weight: 600;
+            text-align: left;
+            border: none;
+        }
+
+        .details-table td {
+            padding: 1.5rem 1.25rem;
+            border-bottom: 1px solid var(--gray-200);
+            vertical-align: top;
+        }
+
+        .details-table tr:last-child td {
+            border-bottom: none;
+        }
+
+        .details-table tr:hover {
+            background: var(--gray-50);
+        }
+
+    .question-cell {
+        max-width: 300px;
+    }
+
+    .question-text {
+        font-weight: 600;
+        color: var(--gray-800);
+        margin-bottom: 0.5rem;
+        line-height: 1.4;
+    }
+
+    .question-type {
+        background: var(--gray-100);
+        color: var(--gray-600);
+        padding: 0.25rem 0.75rem;
+        border-radius: var(--border-radius-sm);
+        font-size: 0.75rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+    }
+
+    /* Status Indicators */
+    .status-badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.75rem 1rem;
+        border-radius: var(--border-radius-md);
+        font-weight: 600;
+        font-size: 0.875rem;
+        box-shadow: var(--shadow-sm);
     }
 
     .status-answered {
-        background-color: #d4edda;
-        border-color: #c3e6cb;
-        color: #155724;
-        padding: 8px;
-        border-radius: 4px;
-        margin-bottom: 5px;
+        background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
+        color: #065f46;
+        border: 1px solid #34d399;
     }
 
     .status-shown {
-        background-color: #fff3cd;
-        border-color: #ffeaa7;
-        color: #856404;
-        padding: 8px;
-        border-radius: 4px;
-        margin-bottom: 5px;
+        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+        color: #92400e;
+        border: 1px solid #fbbf24;
     }
 
     .status-skipped {
-        background-color: #d1ecf1;
-        border-color: #bee5eb;
-        color: #0c5460;
-        padding: 8px;
-        border-radius: 4px;
-        margin-bottom: 5px;
+        background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
+        color: #1e40af;
+        border: 1px solid #60a5fa;
     }
 
     .status-unknown {
-        background-color: #f8f9fa;
-        border-color: #dee2e6;
-        color: #6c757d;
-        padding: 8px;
-        border-radius: 4px;
-        margin-bottom: 5px;
+        background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 100%);
+        color: var(--gray-700);
+        border: 1px solid var(--gray-300);
     }
 
-    /* NEW: Styles for "Other" text responses */
-    .other-text-response {
-        background-color: #fff3cd;
-        border: 1px solid #ffeaa7;
-        border-radius: 6px;
-        padding: 10px 12px;
-        margin-top: 8px;
-        font-size: 0.9em;
+    .status-description {
+        font-size: 0.75rem;
+        opacity: 0.8;
+        margin-top: 0.25rem;
     }
 
-    .other-text-label {
-        font-weight: bold;
-        color: #856404;
-        margin-bottom: 5px;
+    /* Response Display */
+    .response-display {
+        min-width: 250px;
+    }
+
+    .answer-container {
         display: flex;
-        align-items: center;
-        font-size: 0.85em;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+        margin-bottom: 1rem;
     }
 
-    .other-text-content {
-        color: #495057;
-        font-style: italic;
-        line-height: 1.3;
-        background-color: #fff;
-        padding: 6px 10px;
-        border-radius: 4px;
-        border-left: 3px solid #ffc107;
+    .answer-badge {
+        background: linear-gradient(135deg, var(--success-color) 0%, var(--success-dark) 100%);
+        color: white;
+        padding: 0.5rem 1rem;
+        border-radius: var(--border-radius-md);
+        font-weight: 600;
+        font-size: 0.875rem;
+        box-shadow: var(--shadow-sm);
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
     }
 
     .other-option-badge {
-        background-color: #ffc107;
-        color: #212529;
-        font-size: 0.7em;
-        padding: 2px 6px;
-        border-radius: 3px;
-        margin-left: 5px;
+        background: var(--warning-color);
+        color: var(--gray-900);
+        font-size: 0.7rem;
+        padding: 0.25rem 0.5rem;
+        border-radius: var(--border-radius-sm);
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
     }
+
+    .text-response {
+        background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
+        border: 1px solid var(--gray-200);
+        border-radius: var(--border-radius-md);
+        padding: 1rem;
+        font-weight: 500;
+        color: var(--gray-800);
+        box-shadow: var(--shadow-sm);
+    }
+
+    .text-response-label {
+        font-size: 0.875rem;
+        font-weight: 600;
+        color: var(--gray-600);
+        margin-bottom: 0.5rem;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+    }
+
+    /* Other Text Response */
+    .other-text-response {
+        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+        border: 2px solid var(--warning-color);
+        border-radius: var(--border-radius-lg);
+        padding: 1.25rem;
+        margin-top: 1rem;
+        position: relative;
+    }
+
+        .other-text-response::before {
+            content: "CUSTOM RESPONSE";
+            position: absolute;
+            top: -12px;
+            left: 20px;
+            background: var(--warning-color);
+            color: white;
+            padding: 0.25rem 0.75rem;
+            border-radius: var(--border-radius-sm);
+            font-size: 0.7rem;
+            font-weight: 700;
+            letter-spacing: 0.5px;
+        }
+
+    .other-text-label {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-weight: 600;
+        color: #92400e;
+        margin-bottom: 0.75rem;
+        font-size: 0.875rem;
+    }
+
+    .other-text-content {
+        background: white;
+        padding: 1rem;
+        border-radius: var(--border-radius-md);
+        border-left: 4px solid var(--warning-color);
+        color: var(--gray-800);
+        font-style: italic;
+        line-height: 1.5;
+        box-shadow: var(--shadow-sm);
+    }
+
+    .no-response {
+        color: var(--gray-500);
+        font-style: italic;
+        padding: 1rem;
+        text-align: center;
+        background: var(--gray-50);
+        border-radius: var(--border-radius-md);
+        border: 1px dashed var(--gray-300);
+    }
+
+    /* Responsive Design */
+    @@media (max-width: 1024px) {
+        .charts-grid
+
+    {
+        grid-template-columns: 1fr;
+    }
+
+    .user-info-content {
+        grid-template-columns: 1fr;
+        text-align: center;
+        gap: 1.5rem;
+    }
+
+    .response-info {
+        grid-template-columns: 1fr;
+        gap: 1.5rem;
+    }
+
+    }
+
+    @@media (max-width: 768px) {
+        .container-fluid
+
+    {
+        padding: 1rem;
+    }
+
+    .stepper-wrapper {
+        padding-left: 1.5rem;
+    }
+
+        .stepper-wrapper::before {
+            left: 1rem;
+        }
+
+    .step-counter {
+        left: -2rem;
+        width: 48px;
+        height: 48px;
+    }
+
+        .step-counter i {
+            font-size: 1.25rem;
+        }
+
+    .response-actions {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .action-btn {
+        justify-content: center;
+    }
+
+    .export-buttons {
+        flex-direction: column;
+    }
+
+    .details-table {
+        font-size: 0.875rem;
+    }
+
+        .details-table th,
+        .details-table td {
+            padding: 1rem 0.75rem;
+        }
+
+    }
+
+    /* Animations */
+    .fade-in {
+        animation: fadeIn 0.6s ease-out;
+    }
+
+    @@keyframes fadeIn {
+        from
+
+    {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+
+    }
+
+    .slide-in {
+        animation: slideIn 0.4s ease-out;
+    }
+
+    @@keyframes slideIn {
+        from
+
+    {
+        opacity: 0;
+        transform: translateX(-20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+
+    }
+
+    .stagger-animation {
+        animation: fadeIn 0.6s ease-out;
+        animation-fill-mode: both;
+    }
+
+        .stagger-animation:nth-child(1) {
+            animation-delay: 0.1s;
+        }
+
+        .stagger-animation:nth-child(2) {
+            animation-delay: 0.2s;
+        }
+
+        .stagger-animation:nth-child(3) {
+            animation-delay: 0.3s;
+        }
+
+        .stagger-animation:nth-child(4) {
+            animation-delay: 0.4s;
+        }
+
+        .stagger-animation:nth-child(5) {
+            animation-delay: 0.5s;
+        }
+
+        .stagger-animation:nth-child(6) {
+            animation-delay: 0.6s;
+        }
 </style>
 
-<div class="container-fluid mt-3">
-    <p>
-        <a asp-action="Index" class="btn btn-primary btn-sm">Back to list</a>
-    </p>
+<div class="container-fluid">
+    <!-- Back Button -->
+    <a asp-action="Index" class="back-button fade-in">
+        <i class="bi bi-arrow-left"></i>
+        Back to List
+    </a>
 
-    <div class="card p-5 m-3">
-        <div class="bd-callout bd-callout-primary shadow">
-
-            <div class="row p-4">
-                <div class="col-md-3 mt-5">
-                    <h6 class="text-primary font-weight-bold"><i class="bi bi-person"></i> @Model.UserName (@Model.UserEmail)</h6>
-                    <p class="text-info font-weight-bold"><i class="bi bi-calculator"></i> Total responses: @Model.Responses.Count()</p>
-
-                    <a asp-action="GenerateReport" asp-route-userEmail="@Model.UserEmail" asp-route-format="pdf" class="btn btn-info btn-sm">
-                        <i class="bi bi-filetype-pdf"></i> PDF Reports
+    <!-- User Header Section -->
+    <div class="user-header fade-in">
+        <div class="user-info-section">
+            <div class="user-info-content">
+                <div class="user-avatar">
+                    @(Model.UserName?.Substring(0, 1).ToUpper() ?? "U")
+                </div>
+                <div class="user-details">
+                    <h2>@Model.UserName</h2>
+                    <p class="user-email">@Model.UserEmail</p>
+                    <div class="response-count">
+                        <i class="bi bi-clipboard-data"></i>
+                        Total Responses: @Model.Responses.Count()
+                    </div>
+                </div>
+                <div class="export-buttons">
+                    <a asp-action="GenerateReport" asp-route-userEmail="@Model.UserEmail" asp-route-format="pdf" class="export-btn">
+                        <i class="bi bi-filetype-pdf"></i>
+                        PDF Report
                     </a>
-                    <a asp-action="GenerateReport" asp-route-userEmail="@Model.UserEmail" asp-route-format="excel" class="btn btn-info btn-sm">
-                        <i class="bi bi-file-excel"></i> Excel Reports
+                    <a asp-action="GenerateReport" asp-route-userEmail="@Model.UserEmail" asp-route-format="excel" class="export-btn">
+                        <i class="bi bi-file-excel"></i>
+                        Excel Report
                     </a>
                 </div>
-
-                <div class="col-md-9">
-                    <div id="user_survey_summary_chart_div" style=" width: auto; height: 200px;"></div>
-                </div>
-
-            </div>
-            <hr class="border border-info border-1 opacity-50">
-            <div class="col-md-12 ">
-                <div id="chart_div" style="width: 100%; height: 400px;"></div>
             </div>
         </div>
 
-        <!-- Stepper -->
+        <!-- Charts Section -->
+        <div class="charts-section">
+            <div class="charts-grid">
+                <div class="chart-container">
+                    <h4 class="chart-title">Survey Summary</h4>
+                    <div id="user_survey_summary_chart_div" style="width: 100%; height: 200px;"></div>
+                </div>
+                <div class="chart-container">
+                    <h4 class="chart-title">Progress Overview</h4>
+                    <div style="height: 200px; display: flex; align-items: center; justify-content: center; color: var(--gray-500);">
+                        <i class="bi bi-graph-up" style="font-size: 3rem; margin-bottom: 1rem;"></i>
+                    </div>
+                </div>
+            </div>
+            <div class="main-chart">
+                <h4 class="chart-title">User Progress Timeline</h4>
+                <div id="chart_div" style="width: 100%; height: 400px;"></div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Responses Timeline -->
+    <div class="responses-timeline">
+        <div class="timeline-header fade-in">
+            <h3>Response Timeline</h3>
+            <p class="timeline-subtitle">Detailed view of all survey responses and interactions</p>
+        </div>
+
         <div class="stepper-wrapper">
-            @foreach (var response in Model.Responses)
+            @foreach (var response in Model.Responses.Select((r, index) => new { Response = r, Index = index }))
             {
-                <div class="stepper-item">
+                <div class="stepper-item stagger-animation">
                     <div class="step-counter">
-                        <span class="badge bg-primary p-2 shadow">@response.Questionnaire.Title  <i class="bi bi-arrow-right-circle-fill"></i></span>
+                        <i class="bi bi-clipboard-check-fill"></i>
                     </div>
                     <div class="step-content">
-
-                        <div id="QuestionnairCard">
-
-                            <div class="row">
-                                <div class="col-md-7 p-4">
-
-                                    <div class="step-header">
-                                        <h6 class="text-primary font-weight-bold"><i class="bi bi-ui-checks"></i> @response.Questionnaire.Title</h6>
-                                        <h6 class="text-success font-weight-bold"><i class="bi bi-calendar2-week"></i> Submitted on: @response.SubmissionDate</h6>
-                                        <p class="text-info font-weight-bold"><i class="bi bi-question-square"></i> Total questions: @response.Questionnaire.Questions.Count()</p>
+                        <div class="response-card">
+                            <!-- Response Header -->
+                            <div class="response-header">
+                                <div class="response-info">
+                                    <div class="response-details">
+                                        <h4>
+                                            <i class="bi bi-clipboard-data"></i>
+                                            @response.Response.Questionnaire.Title
+                                        </h4>
+                                        <div class="response-meta">
+                                            <div class="meta-item submission-date">
+                                                <i class="bi bi-calendar-check"></i>
+                                                Submitted: @response.Response.SubmissionDate.ToString("MMMM dd, yyyy 'at' HH:mm")
+                                            </div>
+                                            <div class="meta-item question-count">
+                                                <i class="bi bi-question-circle"></i>
+                                                Questions: @response.Response.Questionnaire.Questions.Count()
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="chart-mini">
+                                        <div id="survey_questions_answers_summary_chart_div_@response.Response.Questionnaire.Id" style="width: 100%; height: 100%;"></div>
                                     </div>
-
-                                    <!-- Buttons to generate individual reports -->
-                                    <a asp-action="GenerateQuestionnairePdfReport" asp-route-questionnaireId="@response.Questionnaire.Id" class="btn btn-info btn-sm ">
-                                        <i class="bi bi-filetype-pdf"></i> PDF report
-                                    </a>
-                                    <a asp-action="GenerateQuestionnaireExcelReport" asp-route-questionnaireId="@response.Questionnaire.Id" class="btn btn-info btn-sm">
-                                        <i class="bi bi-file-excel"></i> Excel report
-                                    </a><br />
-                                    <!-- Buttons to generate individual reports -->
-                                    <!-- Collapsible button -->
-                                    <button class="btn btn-primary btn-sm mt-2" type="button" data-bs-toggle="collapse" data-bs-target="#collapseResponse-@response.Id" aria-expanded="false" aria-controls="collapseResponse-@response.Id">
-                                        View Responses
-                                    </button>
-                                </div>
-
-                                <div class="col-md-5">
-                                    <div id="survey_questions_answers_summary_chart_div_@response.Questionnaire.Id" style="width: 100%; height: 200px;"></div>
                                 </div>
                             </div>
 
-                            <!-- Collapsible content -->
-                            <div class="collapse mt-3" id="collapseResponse-@response.Id">
-                                <table class="table table-responsive w-100 d-block d-md-table table-hover">
-                                    <thead>
-                                        <tr>
-                                            <th>Question</th>
-                                            <th>Status</th>
-                                            <th>Response</th>
-                                        </tr>
-                                    </thead>
-                                    <tbody>
-                                        @foreach (var question in response.Questionnaire.Questions.OrderBy(q => q.Id))
-                                        {
-                                            var responseDetail = response.ResponseDetails.FirstOrDefault(rd => rd.QuestionId == question.Id);
+                            <!-- Response Actions -->
+                            <div class="response-actions">
+                                <a asp-action="GenerateQuestionnairePdfReport" asp-route-questionnaireId="@response.Response.Questionnaire.Id" class="action-btn btn-pdf">
+                                    <i class="bi bi-filetype-pdf"></i>
+                                    PDF Report
+                                </a>
+                                <a asp-action="GenerateQuestionnaireExcelReport" asp-route-questionnaireId="@response.Response.Questionnaire.Id" class="action-btn btn-excel">
+                                    <i class="bi bi-file-excel"></i>
+                                    Excel Report
+                                </a>
+                                <button class="action-btn btn-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseResponse-@response.Response.Id" aria-expanded="false" aria-controls="collapseResponse-@response.Response.Id">
+                                    <i class="bi bi-eye"></i>
+                                    <span class="toggle-text">View Details</span>
+                                </button>
+                            </div>
 
+                            <!-- Collapsible Response Details -->
+                            <div class="collapse" id="collapseResponse-@response.Response.Id">
+                                <div class="response-details-section">
+                                    <table class="details-table">
+                                        <thead>
                                             <tr>
-                                                <td>
-                                                    <strong>@question.Text</strong>
-                                                    <br />
-                                                    <small class="text-muted">Type: @question.Type</small>
-                                                </td>
-                                                <td>
-                                                    @if (responseDetail != null)
-                                                    {
-                                                        @switch (responseDetail.Status)
-                                                        {
-                                                            case ResponseStatus.Answered:
-                                                                <div class="status-answered">
-                                                                    <strong>✅ Answered</strong>
-                                                                </div>
-                                                                break;
-
-                                                            case ResponseStatus.Shown:
-                                                                <div class="status-shown">
-                                                                    <strong>⚠️ Shown but not answered</strong>
-                                                                    <br />
-                                                                    <small>Question was displayed but left blank</small>
-                                                                </div>
-                                                                break;
-
-                                                            case ResponseStatus.Skipped:
-                                                                <div class="status-skipped">
-                                                                    <strong>⏭️ Skipped</strong>
-                                                                    <br />
-                                                                    <small>@responseDetail.SkipReason</small>
-                                                                </div>
-                                                                break;
-                                                        }
-                                                    }
-                                                    else
-                                                    {
-                                                        <div class="status-unknown">
-                                                            <strong>❓ No response data</strong>
-                                                            <br />
-                                                            <small>Status unknown</small>
-                                                        </div>
-                                                    }
-                                                </td>
-                                                <td>
-                                                    @if (responseDetail != null && responseDetail.Status == ResponseStatus.Answered)
-                                                    {
-                                                        @if (responseDetail.QuestionType == QuestionType.Text || responseDetail.QuestionType == QuestionType.Slider || responseDetail.QuestionType == QuestionType.Open_ended)
-                                                        {
-                                                            <div class="alert alert-light">
-                                                                <strong>Answer:</strong> @responseDetail.TextResponse
-                                                            </div>
-                                                        }
-                                                        else if (responseDetail.ResponseAnswers.Any())
-                                                        {
-                                                            <div class="d-flex flex-wrap gap-1">
-                                                                @foreach (var answer in responseDetail.ResponseAnswers)
-                                                                {
-                                                                    var answerObj = question.Answers.FirstOrDefault(a => a.Id == answer.AnswerId);
-                                                                    var answerText = answerObj?.Text;
-                                                                    <span class="badge bg-success">
-                                                                        @answerText
-                                                                        @if (answerObj?.IsOtherOption == true)
-                                                                        {
-                                                                            <span class="other-option-badge">Other</span>
-                                                                        }
-                                                                    </span>
-                                                                }
-                                                            </div>
-                                                        }
-
-                                                        @* NEW: Display "Other" text if available *@
-                                                        @if (!string.IsNullOrEmpty(responseDetail.OtherText))
-                                                        {
-                                                            <div class="other-text-response">
-                                                                <div class="other-text-label">
-                                                                    <i class="bi bi-pencil-square me-1"></i>
-                                                                    Custom "Other" Response:
-                                                                </div>
-                                                                <div class="other-text-content">
-                                                                    @responseDetail.OtherText
-                                                                </div>
-                                                            </div>
-                                                        }
-                                                    }
-                                                    else
-                                                    {
-                                                        <span class="text-muted">No response provided</span>
-                                                    }
-                                                </td>
+                                                <th style="width: 30%;">Question</th>
+                                                <th style="width: 25%;">Status</th>
+                                                <th style="width: 45%;">Response</th>
                                             </tr>
-                                        }
-                                    </tbody>
-                                </table>
+                                        </thead>
+                                        <tbody>
+                                            @foreach (var question in response.Response.Questionnaire.Questions.OrderBy(q => q.Id))
+                                            {
+                                                var responseDetail = response.Response.ResponseDetails.FirstOrDefault(rd => rd.QuestionId == question.Id);
+
+                                                <tr>
+                                                    <td class="question-cell">
+                                                        <div class="question-text">@question.Text</div>
+                                                        <span class="question-type">@question.Type</span>
+                                                    </td>
+                                                    <td>
+                                                        @if (responseDetail != null)
+                                                        {
+                                                            @switch (responseDetail.Status)
+                                                            {
+                                                                case ResponseStatus.Answered:
+                                                                    <div class="status-badge status-answered">
+                                                                        <i class="bi bi-check-circle-fill"></i>
+                                                                        <div>
+                                                                            <div>Answered</div>
+                                                                            <div class="status-description">Completed successfully</div>
+                                                                        </div>
+                                                                    </div>
+                                                                    break;
+
+                                                                case ResponseStatus.Shown:
+                                                                    <div class="status-badge status-shown">
+                                                                        <i class="bi bi-exclamation-triangle-fill"></i>
+                                                                        <div>
+                                                                            <div>Shown</div>
+                                                                            <div class="status-description">Displayed but not answered</div>
+                                                                        </div>
+                                                                    </div>
+                                                                    break;
+
+                                                                case ResponseStatus.Skipped:
+                                                                    <div class="status-badge status-skipped">
+                                                                        <i class="bi bi-skip-forward-fill"></i>
+                                                                        <div>
+                                                                            <div>Skipped</div>
+                                                                            <div class="status-description">@responseDetail.SkipReason</div>
+                                                                        </div>
+                                                                    </div>
+                                                                    break;
+                                                            }
+                                                        }
+                                                        else
+                                                        {
+                                                            <div class="status-badge status-unknown">
+                                                                <i class="bi bi-question-circle-fill"></i>
+                                                                <div>
+                                                                    <div>Unknown</div>
+                                                                    <div class="status-description">No response data</div>
+                                                                </div>
+                                                            </div>
+                                                        }
+                                                    </td>
+                                                    <td class="response-display">
+                                                        @if (responseDetail != null && responseDetail.Status == ResponseStatus.Answered)
+                                                        {
+                                                            @if (responseDetail.QuestionType == QuestionType.Text || responseDetail.QuestionType == QuestionType.Slider || responseDetail.QuestionType == QuestionType.Open_ended)
+                                                            {
+                                                                <div class="text-response">
+                                                                    <div class="text-response-label">Text Response</div>
+                                                                    @responseDetail.TextResponse
+                                                                </div>
+                                                            }
+                                                            else if (responseDetail.ResponseAnswers.Any())
+                                                            {
+                                                                <div class="answer-container">
+                                                                    @foreach (var answer in responseDetail.ResponseAnswers)
+                                                                    {
+                                                                        var answerObj = question.Answers.FirstOrDefault(a => a.Id == answer.AnswerId);
+                                                                        var answerText = answerObj?.Text;
+                                                                        <span class="answer-badge">
+                                                                            @answerText
+                                                                            @if (answerObj?.IsOtherOption == true)
+                                                                            {
+                                                                                <span class="other-option-badge">Other</span>
+                                                                            }
+                                                                        </span>
+                                                                    }
+                                                                </div>
+                                                            }
+
+                                                            @* Display "Other" text if available *@
+                                                            @if (!string.IsNullOrEmpty(responseDetail.OtherText))
+                                                            {
+                                                                <div class="other-text-response">
+                                                                    <div class="other-text-label">
+                                                                        <i class="bi bi-pencil-square"></i>
+                                                                        Custom Response:
+                                                                    </div>
+                                                                    <div class="other-text-content">
+                                                                        @responseDetail.OtherText
+                                                                    </div>
+                                                                </div>
+                                                            }
+                                                        }
+                                                        else
+                                                        {
+                                                            <div class="no-response">
+                                                                <i class="bi bi-dash-circle"></i>
+                                                                No response provided
+                                                            </div>
+                                                        }
+                                                    </td>
+                                                </tr>
+                                            }
+                                        </tbody>
+                                    </table>
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -331,7 +1049,6 @@
     <!-- Include Bootstrap 5 JS for collapse functionality -->
     <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
 
-
     <script type="text/javascript">
         google.charts.load('current', { packages: ['corechart', 'line'] });
         google.charts.setOnLoadCallback(drawChart);
@@ -370,10 +1087,10 @@
             var responsesData = [
         @foreach (var response in Model.Responses)
         {
-                    @foreach (var detail in response.ResponseDetails.Where(d => d.QuestionType == QuestionType.Slider))
-                    {
-                                @:['@response.Questionnaire.Title - @response.SubmissionDate.ToString("yyyy-MMMM-dd HH:mm")', getDescriptiveValue(@(detail.TextResponse != null ? int.Parse(detail.TextResponse) : 0))],
-                    }
+                        @foreach (var detail in response.ResponseDetails.Where(d => d.QuestionType == QuestionType.Slider))
+                        {
+                                        @:['@response.Questionnaire.Title - @response.SubmissionDate.ToString("yyyy-MMMM-dd HH:mm")', getDescriptiveValue(@(detail.TextResponse != null ? int.Parse(detail.TextResponse) : 0))],
+                        }
         }
              ];
 
@@ -382,12 +1099,14 @@
             });
 
             var options = {
-                title: 'User Progress',
+                title: 'User Progress Over Time',
                 hAxis: {
-                    title: 'Questionnaire and Submission Date'
+                    title: 'Questionnaire and Submission Date',
+                    titleTextStyle: { color: '#475569', fontSize: 12, bold: true }
                 },
                 vAxis: {
-                    title: 'Status',
+                    title: 'Progress Level',
+                    titleTextStyle: { color: '#475569', fontSize: 12, bold: true },
                     ticks: [
                         { v: 0, f: 'Unknown' },
                         { v: 1, f: 'Normal' },
@@ -402,7 +1121,11 @@
                         { v: 10, f: 'Perfect' }
                     ]
                 },
-                'titleTextStyle': { color: '#17a2b8', fontSize: 16, bold: true },
+                titleTextStyle: { color: '#1e293b', fontSize: 16, bold: true },
+                backgroundColor: 'transparent',
+                colors: ['#6366f1'],
+                lineWidth: 3,
+                pointSize: 6
             };
 
             var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
@@ -411,89 +1134,98 @@
     </script>
 
     <script type="text/javascript">
-        google.charts.load('current', { packages: ['corechart', 'bar'] });
-        google.charts.setOnLoadCallback(drawUserSurveySummaryChart);
+            google.charts.load('current', { packages: ['corechart', 'bar'] });
+            google.charts.setOnLoadCallback(drawUserSurveySummaryChart);
 
-        function drawUserSurveySummaryChart() {
-            var data = new google.visualization.DataTable();
-            data.addColumn('string', 'User');
-            data.addColumn('number', 'Total Surveys');
-            data.addColumn('number', 'Total Questions');
-            data.addColumn('number', 'Total Answers');
+            function drawUserSurveySummaryChart() {
+                var data = new google.visualization.DataTable();
+                data.addColumn('string', 'Metric');
+                data.addColumn('number', 'Count');
 
-            var userSurveySummaryData = @Html.Raw(JsonConvert.SerializeObject(
-                                    Model.Responses
-                                    .GroupBy(response => response.UserEmail)
-                                    .Select(g => new
-                                    {
-                                                UserName = g.First().UserName,
-                                                TotalSurveys = g.Count(),
-                                                TotalQuestions = g.SelectMany(r => r.ResponseDetails).Count(),
-                                                TotalAnswers = g.SelectMany(r => r.ResponseDetails.SelectMany(rd => rd.ResponseAnswers)).Count()
-                                    })
-                                    .ToList()
-                                    ));
+                var userSurveySummaryData = @Html.Raw(JsonConvert.SerializeObject(
+                                                                            Model.Responses
+                                                                            .GroupBy(response => response.UserEmail)
+                                                                            .Select(g => new
+                                                                            {
+                                                                                            TotalSurveys = g.Count(),
+                                                                                            TotalQuestions = g.SelectMany(r => r.ResponseDetails).Count(),
+                                                                                            TotalAnswers = g.SelectMany(r => r.ResponseDetails.SelectMany(rd => rd.ResponseAnswers)).Count()
+                                                                            })
+                                                                            .FirstOrDefault()
+                                                                            ));
 
-    userSurveySummaryData.forEach(function (row) {
-        data.addRow([row.UserName, row.TotalSurveys, row.TotalQuestions, row.TotalAnswers]);
-    });
+    if (userSurveySummaryData) {
+        data.addRow(['Surveys', userSurveySummaryData.TotalSurveys]);
+        data.addRow(['Questions', userSurveySummaryData.TotalQuestions]);
+        data.addRow(['Answers', userSurveySummaryData.TotalAnswers]);
+    }
 
-            var options = {
-                title: 'User Survey Summary',
-                hAxis: {
-                    title: 'Count'
-                },
-                vAxis: {
-                    title: 'User'
-                },
-                        'titleTextStyle': { color: '#17a2b8', fontSize: 16, bold: true },
-            };
+                var options = {
+                    title: 'Response Summary',
+                    titleTextStyle: { color: '#1e293b', fontSize: 14, bold: true },
+                    backgroundColor: 'transparent',
+                    colors: ['#06b6d4', '#10b981', '#f59e0b'],
+                    legend: { position: 'none' },
+                    hAxis: {
+                        titleTextStyle: { color: '#475569', fontSize: 11 }
+                    },
+                    vAxis: {
+                        titleTextStyle: { color: '#475569', fontSize: 11 }
+                    }
+                };
 
-            var chart = new google.visualization.BarChart(document.getElementById('user_survey_summary_chart_div'));
-            chart.draw(data, options);
-        }
+                var chart = new google.visualization.ColumnChart(document.getElementById('user_survey_summary_chart_div'));
+                chart.draw(data, options);
+            }
     </script>
-    <script type="text/javascript">
-            google.charts.load('current', { packages: ['corechart'] });
-            google.charts.setOnLoadCallback(drawSurveyQuestionsAnswersSummaryCharts);
 
-            function drawSurveyQuestionsAnswersSummaryCharts() {
-                var surveyQuestionsSummaryData = @Html.Raw(JsonConvert.SerializeObject(
-                                Model.Responses
-                                .GroupBy(response => response.Questionnaire.Title)
-                                .Select(g => new
-                                {
-                                            SurveyTitle = g.Key,
-                                            SurveyId = g.First().Questionnaire.Id,
-                                            TotalQuestions = g.SelectMany(r => r.ResponseDetails).Count(),
-                                            TotalAnswers = g.SelectMany(r => r.ResponseDetails.SelectMany(rd => rd.ResponseAnswers)).Count()
-                                })
-                                .ToList()
-                                ));
+    <script type="text/javascript">
+                google.charts.load('current', { packages: ['corechart'] });
+                google.charts.setOnLoadCallback(drawSurveyQuestionsAnswersSummaryCharts);
+
+                function drawSurveyQuestionsAnswersSummaryCharts() {
+                    var surveyQuestionsSummaryData = @Html.Raw(JsonConvert.SerializeObject(
+                                                                Model.Responses
+                                                                .GroupBy(response => response.Questionnaire.Title)
+                                                                .Select(g => new
+                                                                {
+                                                                                SurveyTitle = g.Key,
+                                                                                SurveyId = g.First().Questionnaire.Id,
+                                                                                TotalQuestions = g.SelectMany(r => r.ResponseDetails).Count(),
+                                                                                TotalAnswers = g.SelectMany(r => r.ResponseDetails.SelectMany(rd => rd.ResponseAnswers)).Count()
+                                                                })
+                                                                .ToList()
+                                                                ));
 
         surveyQuestionsSummaryData.forEach(function (row) {
             drawSingleSurveyChart(row.SurveyTitle, row.SurveyId, row.TotalQuestions, row.TotalAnswers);
         });
     }
 
-            function drawSingleSurveyChart(surveyTitle, surveyId, totalQuestions, totalAnswers) {
-                var data = new google.visualization.DataTable();
-                data.addColumn('string', 'Category');
-                data.addColumn('number', 'Count');
+                function drawSingleSurveyChart(surveyTitle, surveyId, totalQuestions, totalAnswers) {
+                    var data = new google.visualization.DataTable();
+                    data.addColumn('string', 'Category');
+                    data.addColumn('number', 'Count');
 
-                data.addRow(['Questions', totalQuestions]);
-                data.addRow(['Answers', totalAnswers]);
+                    data.addRow(['Questions', totalQuestions]);
+                    data.addRow(['Answers', totalAnswers]);
 
-                var options = {
+                    var options = {
+                        backgroundColor: 'transparent',
+                        is3D: false,
+                        colors: ['#6366f1', '#10b981'],
+                        legend: {
+                            position: 'bottom',
+                            textStyle: { fontSize: 10 }
+                        },
+                        chartArea: { width: '90%', height: '70%' }
+                    };
 
-                    is3D: true,
-                    titleTextStyle: { color: '#17a2b8', fontSize: 16, bold: true },
-                };
-
-                var chart = new google.visualization.PieChart(document.getElementById('survey_questions_answers_summary_chart_div_' + surveyId));
-                chart.draw(data, options);
-            }
+                    var chart = new google.visualization.PieChart(document.getElementById('survey_questions_answers_summary_chart_div_' + surveyId));
+                    chart.draw(data, options);
+                }
     </script>
+
     <script>
         document.addEventListener('DOMContentLoaded', function () {
             var collapseElements = document.querySelectorAll('[data-bs-toggle="collapse"]');
@@ -501,28 +1233,30 @@
             collapseElements.forEach(function (element) {
                 var targetId = element.getAttribute('data-bs-target');
                 var targetElement = document.querySelector(targetId);
+                var toggleText = element.querySelector('.toggle-text');
+                var icon = element.querySelector('i');
 
-                // Initialize button text and color based on current state
+                // Initialize button state
                 if (targetElement.classList.contains('show')) {
-                    element.textContent = 'Hide Responses';
-                    element.classList.remove('btn-primary');
-                    element.classList.add('btn-info');
+                    toggleText.textContent = 'Hide Details';
+                    element.classList.add('expanded');
+                    icon.className = 'bi bi-eye-slash';
                 } else {
-                    element.textContent = 'View Responses';
-                    element.classList.remove('btn-info');
-                    element.classList.add('btn-primary');
+                    toggleText.textContent = 'View Details';
+                    element.classList.remove('expanded');
+                    icon.className = 'bi bi-eye';
                 }
 
                 targetElement.addEventListener('shown.bs.collapse', function () {
-                    element.textContent = 'Hide Responses';
-                    element.classList.remove('btn-primary');
-                    element.classList.add('btn-info');
+                    toggleText.textContent = 'Hide Details';
+                    element.classList.add('expanded');
+                    icon.className = 'bi bi-eye-slash';
                 });
 
                 targetElement.addEventListener('hidden.bs.collapse', function () {
-                    element.textContent = 'View Responses';
-                    element.classList.remove('btn-info');
-                    element.classList.add('btn-primary');
+                    toggleText.textContent = 'View Details';
+                    element.classList.remove('expanded');
+                    icon.className = 'bi bi-eye';
                 });
             });
         });
diff --git a/Web/ViewModel/AnswerVM/AnswerViewModel.cs b/Web/ViewModel/AnswerVM/AnswerViewModel.cs
index b661381..aba0639 100644
--- a/Web/ViewModel/AnswerVM/AnswerViewModel.cs
+++ b/Web/ViewModel/AnswerVM/AnswerViewModel.cs
@@ -10,5 +10,6 @@ namespace Web.ViewModel.AnswerVM
         public int QuestionId { get; set; } // Foreign key for Question
         [ForeignKey("QuestionId")]
         public Question? Question { get; set; }
+        public bool IsDeleted { get; set; } = false;
     }
 }