diff --git a/Web/Views/QuestionnaireResponse/DisplayQuestionnaire.cshtml b/Web/Views/QuestionnaireResponse/DisplayQuestionnaire.cshtml
index e6ae465..008ec72 100644
--- a/Web/Views/QuestionnaireResponse/DisplayQuestionnaire.cshtml
+++ b/Web/Views/QuestionnaireResponse/DisplayQuestionnaire.cshtml
@@ -151,6 +151,86 @@
         }
 
 
+    .likert {
+        box-shadow: 0px 0px 7px 0px rgba(20,101,230,1);
+        -moz-box-shadow: 0px 0px 36px -12px rgba(20, 101, 230, 1);
+         -webkit-box-shadow:0px 0px 7px 0px rgba(20,101,230,1); 
+        border-radius: 5px;
+        background-color: transparent;
+        padding: 20px;
+       
+    }
+
+        .likert .statement {
+            margin-bottom: 10px;
+        }
+
+        .likert .responses {
+            display: flex;
+            justify-content: space-between;
+        }
+
+        .likert .likert-option {
+            flex: 1;
+            text-align: center;
+        }
+
+        .likert label {
+            display: block;
+            cursor: pointer;
+            padding: 20px;
+            background-color: #182c4b;
+            border-radius: 2px;
+            margin: 3px;
+            transition: background-color 0.3s;
+            font-size: 0.8rem;
+        }
+
+        .likert input[type="radio"]:checked + label {
+            background-color: transparent;
+            color: white;
+            font-size:1rem;
+            
+        }
+
+    .card-deck .card {
+        cursor: pointer;
+       padding:0px;
+        border: 2px solid transparent;
+        box-shadow: 0px 0px 36px -12px rgba(20,101,230,1);
+        -webkit-box-shadow: 0px 0px 5px 0px rgba(20,101,230,1);
+        -moz-box-shadow: 0px 0px 36px -12px rgba(20, 101, 230, 1);
+      
+        background-color:transparent;
+        transition: border 0.3s ease; /* Add transition for a smooth effect */
+    }
+    img{
+        border-radius:3px;
+        box-shadow: 0px 0px 36px -12px rgba(20,101,230,1);
+        -webkit-box-shadow: 0px 0px 5px 0px rgba(20,101,230,1);
+        -moz-box-shadow: 0px 0px 36px -12px rgba(20, 101, 230, 1);
+    }
+
+        .card-deck .card:hover {
+            border: 2px solid #007bff;
+            transition: border 0.3s ease; /* Ensure the transition applies to the hover state as well */
+        }
+
+    .card-deck .image-card.selected {
+        border: 4px solid #28a745; /* Green border for selected cards */
+    }
+
+    .card-deck .image-option {
+        display: block;
+    }
+
+    
+
+        .card-deck .image-option input[type="radio"] {
+            display: none; /* Hide radio button */
+        }
+
+
 </style>
 
 
@@ -199,7 +279,9 @@
                                 <!-- Add more hidden fields as needed for other properties of the answer -->
                             }
                             <div class="step @(i == 0 ? "active" : "")">
-                                <p class="font-weight-normal">@(i + 1). @question.Text</p>
+
+                                 <p class="font-weight-normal">@(i + 1). @question.Text</p>
+
                                 <div id="QuestionCard">
 
                                     @switch (question.Type)
@@ -214,8 +296,6 @@
                                             break;
                                         case QuestionType.CheckBox:
                                         case QuestionType.Multiple_choice:
-                                        case QuestionType.Likert:
-                                        case QuestionType.Matrix:
                                         case QuestionType.Demographic:
 
                                             <div class="form-group">
@@ -263,9 +343,7 @@
                                             }
                                          
                                             break;
-                                        case QuestionType.Image:
-                                            <input type="file" class="form-control-file" id="question@(i + 1)" name="Questions[@i].SelectedAnswerIds">
-                                            break;
+                                      
                                         case QuestionType.Slider:
                                            
                                             @foreach(var answer in question.Answers)
@@ -313,19 +391,116 @@
                                                     }
                                                 </ul>
                                             </div>
-                                           <script>
-                                               
+                                          
+                                        break;
+                                          
+                                        case QuestionType.Likert:
 
-                                           </script>
+                                            @if (Model.Questions.Any(q => q.Type == QuestionType.Likert)) 
+                                            {
+                                             
 
+                                                <div class="likert">
+                                                    
 
+                                                    @foreach (var questions in Model.Questions.Where(q => q.Type == QuestionType.Likert)) 
+                                                    {
+                                                        <div class="statement">
+                                                            <label>Please indicate your level of agreement with the following statements:</label> 
+                                                            <div class="responses">
+                                                                @foreach (var answer in questions.Answers)  
+                                                                {
+                                                                    <label class="likert-option">
+                                                                        <input class="form-check-input" type="radio" name="Questions[@i].SelectedAnswerIds" value="@answer.Id">
+                                                                        @answer.Text
+                                                                    </label>
+                                                                }
+                                                            </div>
+                                                        </div>
+                                                       
+                                                    }
+                                                </div>
+                                            }
+                                            break;
+                                        case QuestionType.Matrix:
 
+                                            @if (Model.Questions.Any(q => q.Type == QuestionType.Matrix))  // Check for Matrix type questions
+                                            {
+                                                @foreach (var matrixQuestion in Model.Questions.Where(q => q.Type == QuestionType.Matrix))  // Iterate through Matrix questions
+                                                {
+                                                    <div class="matrix-question">
+                                                       
+                                                        <table class="table table-responsive">
+                                                            <thead>
+                                                                <tr>
+                                                                    <th>Question</th> 
+                                                                    @foreach (var option in matrixQuestion.Answers)  // Assuming these are the consistent answer options across all sub-questions
+                                                                    {
+                                                                        <th>@option.Text</th>
+                                                                    }
+                                                                </tr>
+                                                            </thead>
+                                                            <tbody>
+                                                                <tr>
+                                                                    <td>@matrixQuestion.Text</td> 
+                                                                    @foreach (var option in matrixQuestion.Answers)  // Use consistent options for each sub-question
+                                                                    {
+                                                                        <td>
+                                                                            <input type="radio" name="Questions[@i].SelectedAnswerIds" value="@option.Id">
+                                                                        </td>
+                                                                    }
+                                                                </tr>
+                                                            </tbody>
+                                                        </table>
+
+                                                    </div>
+                                                }
+                                            }
+
+                                            break;
+                                        case QuestionType.Image:
+                                            @if (Model.Questions.Any(q => q.Type == QuestionType.Image))
+                                            {
+                                                <script>
+                                                    
+                                                    function selectImageCard(answerId, questionId) {
+                                                        // Clear previously selected
+                                                        var cards = document.querySelectorAll('.image-question[data-question-id="' + questionId + '"] .card');
+                                                        cards.forEach(function (card) {
+                                                            card.classList.remove('selected');
+                                                        });
+
+                                                        // Set new selected
+                                                        var selectedCard = document.getElementById('card_' + answerId);
+                                                        selectedCard.classList.add('selected');
+
+                                                        // Set the radio button as checked
+                                                        var radioButton = document.getElementById('image_answer_' + answerId);
+                                                        radioButton.checked = true;
+                                                    }
+                                                </script>
+
+                                                @foreach (var imageQuestion in Model.Questions.Where(q => q.Type == QuestionType.Image))
+                                                {
+                                                    <div class="image-question" data-question-id="@imageQuestion.Id">
+                                                        <div class="card-deck">
+                                                            @foreach (var answer in imageQuestion.Answers)
+                                                            {
+                                                                <div class="card image-card" id="card_@answer.Id" onclick="selectImageCard('@answer.Id', '@imageQuestion.Id')">
+                                                                    <img src="@answer.Text" alt="Image option" class="img-fluid" />
+                                                                    <input type="radio" id="image_answer_@answer.Id" name="Questions[@i].SelectedAnswerIds" value="@answer.Id" hidden />
+                                                                </div>
+                                                            }
+                                                        </div>
+                                                    </div>
+                                                }
+                                            }
                                             break;
                                         default:
                                             <div class="alert alert-danger" role="alert">
                                                 Unsupported question type.
                                             </div>
-                                            break;
+                                        break;
                                     }
                                 </div>
                                 <div class="mt-3">
@@ -382,9 +557,8 @@
                 });
             });
 
+          
 
-
-         
                 // Ensure we only add listeners once by checking if they've been added already
                 if (!window.hasEventListenersAdded) {
                     const upButtons = document.querySelectorAll('.up-button');
@@ -500,6 +674,28 @@
             // Initialize the form at the first step
             showStep(currentStep);
         });
+
+        document.addEventListener("DOMContentLoaded", function () {
+            const stepper = document.querySelector('.stepper');
+            if (!stepper) {
+                console.error('Stepper not found!');
+                return;
+            }
+
+            let shownTypes = new Set(); // Set to track shown question types
+            const stepIndicators = stepper.querySelectorAll('.step-indicator');
+
+            stepIndicators.forEach(indicator => {
+                const type = indicator.querySelector('.step-label').textContent.trim(); // Get the text content of the step-label
+                if (shownTypes.has(type)) {
+                    // If this type has already been shown, hide this indicator
+                    indicator.style.display = 'none';
+                } else {
+                    // Otherwise, mark this type as shown
+                    shownTypes.add(type);
+                }
+            });
+        });
     </script>
 
  @*    <script>