diff --git a/Web/Areas/Admin/Controllers/QuestionnaireController.cs b/Web/Areas/Admin/Controllers/QuestionnaireController.cs
index aafc7a7..a6c08f8 100644
--- a/Web/Areas/Admin/Controllers/QuestionnaireController.cs
+++ b/Web/Areas/Admin/Controllers/QuestionnaireController.cs
@@ -250,18 +250,18 @@ namespace Web.Areas.Admin.Controllers
 
                        
                     }
-                    else
-                    {
+                    //else
+                    //{
                        
-                        var newQuestion = new Question
-                        {
-                            Text = questionViewModel.Text,
-                            Type = questionViewModel.Type,
-                            Answers = questionViewModel.Answers?.Select(a => new Answer { Text = a.Text }).ToList() ?? new List<Answer>()
-                        };
+                    //    var newQuestion = new Question
+                    //    {
+                    //        Text = questionViewModel.Text,
+                    //        Type = questionViewModel.Type,
+                    //        Answers = questionViewModel.Answers?.Select(a => new Answer { Text = a.Text }).ToList() ?? new List<Answer>()
+                    //    };
 
-                        existingQuestionnaire.Questions.Add(newQuestion);
-                    }
+                    //    existingQuestionnaire.Questions.Add(newQuestion);
+                    //}
 
                     //if (existingQuestion != null)
                     //{
diff --git a/Web/Areas/Admin/Views/Questionnaire/Create.cshtml b/Web/Areas/Admin/Views/Questionnaire/Create.cshtml
index ec80f65..5a2678b 100644
--- a/Web/Areas/Admin/Views/Questionnaire/Create.cshtml
+++ b/Web/Areas/Admin/Views/Questionnaire/Create.cshtml
@@ -10,9 +10,7 @@
         <div class="card-body">
             <h5 class="card-title h5">Create questionnaire</h5>
 
-            <div class="row ">
-                <!-- 12 columns for textboxes -->
-
+            <div class="row">
                 <form asp-action="Create" asp-controller="Questionnaire">
                     <div asp-validation-summary="All" class="text-danger"></div>
 
@@ -27,21 +25,15 @@
                         <span asp-validation-for="Description" class="text-danger"></span>
                     </div>
                     <div class="container p-5 shadow bg-body-tertiary rounded">
-                        
                         <div id="questions-container" class="mx-md-3 mx-lg-3 px-md-3 px-lg-3 mx-sm-0 px-sm-0">
-                            
                             <h3 class="text-primary font-weight-bold">Create Questions</h3>
-                           
                             <div class="form-group">
-                               
-
                                 @for (int i = 0; i < Model.Questions?.Count; i++)
                                 {
                                     <div class="question-group" data-question-index="@i">
                                         <label>Question @(i + 1)</label>
                                         <textarea name="Questions[@i].Text" class="form-control">@Model.Questions[i].Text</textarea>
-                                        
-                                        <select name="Questions[@i].Type" asp-items="ViewBag.QuestionTypes" class="form-control question-type">
+                                       <select name="Questions[@i].Type" asp-items="ViewBag.QuestionTypes" class="form-control question-type">
                                             
                                             <!-- Include options for question types... -->
                                             <div class="container-sm"></div>
@@ -52,31 +44,24 @@
                                             {
                                                 <div class="answer-group">
                                                     <input type="text" name="Questions[@i].Answers[@j].Text" class="form-control" value="@Model.Questions?[i]?.Answers?[j]?.Text" />
-                                                    <button type="button" class="btn btn-sm btn-danger remove-answer"> </button>
+                                                    <button type="button" class="btn btn-sm btn-danger  shadow remove-answer">Remove Answer</button>
                                                 </div>
                                             }
-                                            <button type="button" class="btn btn-sm btn-success add-answer"><i class="bi bi-plus-lg"></i> Add Answer</button>
-                                            <!-- Add a hidden field to address the required field validation -->
+                                            <button type="button" class="btn btn-sm btn-success shadow add-answer"><i class="bi bi-plus-square"></i> Create Answer</button>
                                             <input type="hidden" name="Questions[@i].Answers" />
                                         </div>
-                                        
-                                        <button type="button" class="btn btn-sm btn-danger remove-question">Remove Question <i class="bi bi-trash3-fill"></i></button>
-                                        
+                                        <button type="button" class="btn btn-sm p-3 btn-danger  shadow remove-question">Remove Question <i class="bi bi-trash3-fill"></i></button> |
+                                        <button type="button" class="btn btn-sm btn-primary  shadow m-3 save-question">Save Question</button>
+                                        <button type="button" class="btn btn-sm btn-secondary  shadow edit-question" style="display: none;">Edit Question</button>
                                     </div>
-                                  
                                 }
                             </div>
                         </div>
-
-                      
-                        
-                      
                     </div>
-
                     <div class="mt-3 card-footer">
-                        <button type="button" id="add-question-btn" class="btn btn-md btn-success"><i class="bi bi-plus-lg"></i>Add New Question</button>
-                        <button type="submit" class="btn btn-primary">Submit</button>
-                        | <a asp-action="Index" class="btn btn-info">Back to list</a>
+                        <button type="button" id="add-question-btn" class="btn btn-md btn-success  shadow"><i class="bi bi-plus-square"></i> Create New Question</button> |
+                        <button type="submit" class="btn btn-primary  shadow">Submit</button>
+                        | <a asp-action="Index" class="btn btn-info  shadow">Back to list</a>
                     </div>
                 </form>
             </div>
@@ -86,8 +71,6 @@
 <hr />
 
 
-
-
 @section Scripts {
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.11.4/ckeditor.js"></script>
@@ -100,97 +83,107 @@
     }
 
      <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
-    <script>
-        $(document).ready(function () {
-            var questionIndex = @Model.Questions?.Count;
+   
+ <script>
+    $(document).ready(function () {
+        var questionIndex = @Model.Questions?.Count;
 
-            $("#add-question-btn").click(function () {
-                var newQuestionHtml = `
-                        <div class="question-group" data-question-index="${questionIndex}">
-                            <label>Question ${questionIndex + 1}</label>
-                            <textarea name="Questions[${questionIndex}].Text" class="form-control"></textarea>
-                            <br>
-                             <label class=h5>Select question type</label>
-                            <select name="Questions[${questionIndex}].Type" class="form-control question-type">`;
+        $("#add-question-btn").click(function () {
+            var newQuestionHtml = `
+                <div class="question-group" data-question-index="${questionIndex}">
+                    <label>Question ${questionIndex + 1}</label>
+                    <textarea name="Questions[${questionIndex}].Text" class="form-control"></textarea>
+                    <br>
+                    <label class=h5>Select question type</label>
+                    <select name="Questions[${questionIndex}].Type" class="form-control question-type-${questionIndex}">`;
 
-                                var questionTypes = @Html.Raw(Json.Serialize(Enum.GetNames(typeof(QuestionType))));
+            var questionTypes = @Html.Raw(Json.Serialize(Enum.GetNames(typeof(QuestionType))));
 
-                                for (var i = 0; i < questionTypes.length; i++) {
-                                    newQuestionHtml += `<option value="${questionTypes[i]}">${questionTypes[i]}</option>`;
-                                }
+            for (var i = 0; i < questionTypes.length; i++) {
+                newQuestionHtml += `<option value="${questionTypes[i]}">${questionTypes[i]}</option>`;
+            }
 
-                newQuestionHtml += `</select>`;
+            newQuestionHtml += `</select>`;
 
-                // Add answers input fields
+            // Add answers input fields
 
-                newQuestionHtml += `<div class="container-ms mx-5 py-2 px-5 ">`;
-                newQuestionHtml += `<div class="answers-container" data-question-index="${questionIndex}"><br>`;
-                newQuestionHtml += `<label class="h3">Create Answers:</label>`;
-                newQuestionHtml += `<div class="answer-group" data-answer-index="0"><hrclass="border border-primary border-1 opacity-35">`;
-                newQuestionHtml += `<label>Answer 1</label>`;
-                newQuestionHtml += `<input type="text" name="Questions[${questionIndex}].Answers[0].Text" class="form-control" placeholder="new answer"/><br>`;
-                
-                newQuestionHtml += `<button type="button" class="btn btn-sm btn-success add-answer mt-2"><i class="bi bi-plus-lg"></i> Add Answer</button>`;
-                newQuestionHtml += `<hr class="border m-2">`
-                newQuestionHtml += `</div> `;
-                newQuestionHtml += `</div>`;
-                newQuestionHtml += `</div> `;
-               
-                // Add Remove Question button
-                newQuestionHtml += `<button type="button" class="btn btn-md btn-danger remove-question"><i class="bi bi-trash3-fill"></i> Remove Question </button>`;
-                newQuestionHtml += `<hr class="border border-primary border-4 opacity-75 mb-5">`
-                newQuestionHtml += `</div>`;
-               
-                $("#questions-container .form-group").append(newQuestionHtml);
-                questionIndex++;
-            });
-            $("#questions-container").on("click", ".add-answer", function () {
-                var questionIndex = $(this).closest('.answers-container').data('question-index');
-                var answerIndex = $(this).closest('.answers-container').find('.answer-group').length;
+            newQuestionHtml += `<div class="container-ms mx-5 py-2 px-5 ">`;
+            newQuestionHtml += `<div class="answers-container" data-question-index="${questionIndex}"><br>`;
+            newQuestionHtml += `<label class="h3">Create Answers:</label>`;
+            newQuestionHtml += `<div class="answer-group" data-answer-index="0"><hr class="border border-primary border-1 opacity-35">`;
+            newQuestionHtml += `<label>Answer 1</label>`;
+            newQuestionHtml += `<input type="text" name="Questions[${questionIndex}].Answers[0].Text" class="form-control" placeholder="new answer"/><br>`;
 
-                var answerGroupHtml = `
+            newQuestionHtml += `<button type="button" class="btn btn-sm btn-success add-answer mt-2 shadow"><i class="bi bi-plus-lg"></i> create Answer</button>`;
+            newQuestionHtml += `<hr class="border m-2">`
+            newQuestionHtml += `</div> `;
+            newQuestionHtml += `</div>`;
+            newQuestionHtml += `</div> `;
+
+            // Add Remove Question button
+            newQuestionHtml += `<button type="button" class="btn btn-sm btn-danger m-4  shadow remove-question"><i class="bi bi-trash3-fill"></i> Remove Question </button>`;
+            newQuestionHtml += `<button type="button" class="btn btn-sm btn-primary  shadow save-question">Save Question</button>`;
+            newQuestionHtml += `<button type="button" class="btn btn-sm btn-secondary  shadow edit-question" style="display: none;">Edit Question</button>`;
+            newQuestionHtml += `<hr class="border border-primary border-4 opacity-75 mb-5">`
+            newQuestionHtml += `</div>`;
+
+            $("#questions-container .form-group").append(newQuestionHtml);
+            questionIndex++;
+        });
+
+        $("#questions-container").on("click", ".add-answer", function () {
+            var questionIndex = $(this).closest('.answers-container').data('question-index');
+            var answerIndex = $(this).closest('.answers-container').find('.answer-group').length;
+
+            var answerGroupHtml = `
                 <div class="answer-group">
-                <br>
+                    <br>
                     <label class="control-label">Answer ${answerIndex + 1}</label>
-                            <input type="text" class="form-control" name="Questions[${questionIndex}].Answers[${answerIndex}].Text" placeholder="new answer"/>
-                            <button type="button" class="btn btn-danger remove-answer"><i class="bi bi-trash3-fill"></i></button>
-                            <br>
-                            
+                    <input type="text" class="form-control" name="Questions[${questionIndex}].Answers[${answerIndex}].Text" placeholder="new answer"/>
+                    <button type="button" class="btn btn-danger btn-sm mt-1  shadow remove-answer"><i class="bi bi-trash3-fill"></i></button>
+                    <br>
                 </div>`;
 
-                // Append the new answer group before the "Add Answer" button
-                $(this).before(answerGroupHtml);
-
-                // Show the "Remove Answer" button only for the newly added answer group
-                $(this).prev('.answer-group').find('.remove-answer').show();
-            });
-
-
-
-
-
-
-
-
-            // Remove answer dynamically
-            $("#questions-container").on("click", ".remove-answer", function () {
-                $(this).closest('.answer-group').remove();
-            });
-
-            // Remove question dynamically
-            $("#questions-container").on("click", ".remove-question", function () {
-                $(this).closest('.question-group').remove();
-            });
+            $(this).before(answerGroupHtml);
+            $(this).prev('.answer-group').find('.remove-answer').show();
         });
-    </script>
+
+        // Remove answer dynamically
+        $("#questions-container").on("click", ".remove-answer", function () {
+            $(this).closest('.answer-group').remove();
+        });
+
+        // Remove question dynamically
+        $(document).on("click", ".remove-question", function () {
+            $(this).closest('.question-group').remove();
+        });
+
+        // Save question
+        $("#questions-container").on("click", ".save-question", function () {
+            var questionGroup = $(this).closest('.question-group');
+            questionGroup.find('.edit-question').show();
+            questionGroup.find('.remove-question').hide();
+            questionGroup.find('.save-question').hide();
+            questionGroup.find('.question-type').prop('disabled', true).hide(); // Hide question type
+            questionGroup.find('textarea').prop('disabled', true);
+            questionGroup.find('.answers-container').slideUp();
+            questionGroup.addClass('collapsed');
+        });
+
+        // Edit question
+        $("#questions-container").on("click", ".edit-question", function () {
+            var questionGroup = $(this).closest('.question-group');
+            questionGroup.find('.save-question').show();
+            questionGroup.find('.remove-question').show();
+            questionGroup.find('.edit-question').hide();
+            questionGroup.find('.question-type').prop('disabled', false).show(); // Show question type
+            questionGroup.find('textarea').prop('disabled', false);
+            questionGroup.find('.answers-container').slideDown();
+            questionGroup.removeClass('collapsed');
+        });
+    });
+</script>
 
 
-    
-
-    
-    
-
-   
-  
 
 } 
\ 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 0911f84..fc697c2 100644
--- a/Web/Areas/Admin/Views/Questionnaire/Edit.cshtml
+++ b/Web/Areas/Admin/Views/Questionnaire/Edit.cshtml
@@ -42,7 +42,7 @@
                         <textarea asp-for="Description" class="form-control"></textarea>
                         <span asp-validation-for="Description" class="text-danger"></span>
                     </div>
-                    <div class="card shadow rounded p-4">
+                    <div class="card shadow rounded" id="customCard">
                         <div id="questionsContainer">
                           
 
@@ -56,8 +56,8 @@
                                             <hr class="border border-primary border-4 opacity-75 line-start">
                                         </div>
                                         <!-- Container for the next question text -->
-                                        <div class="next-question-container">
-                                            <p class="next-question">Next Question</p>
+                                        <div class="next-question-container mt-2">
+                                           <p> <span class="badge badge-primary">NEXT QUESTION</span></p> 
                                         </div>
                                         <!-- Container for the second half of the line -->
                                         <div class="line-container">
@@ -89,14 +89,14 @@
                                                         <label asp-for="Questions[i].Answers[j].Text" class="control-label"></label>
                                                         <input asp-for="Questions[i].Answers[j].Text" class="form-control" />
                                                         <span asp-validation-for="Questions[i].Answers[j].Text" class="text-danger"></span>
-                                                        <button type="button" class="btn btn-danger removeAnswer">Remove Answer</button>
+                                                        <button type="button" class="btn btn-danger btn-sm mt-1 removeAnswer"><i class="bi bi-trash3"></i></button>
                                                     </div>
                                                 </div>
                                             }
                                         </div>
-                                        <button type="button" class="btn btn-primary btn-sm addAnswer">Add new Answer</button>
+                                        <button type="button" class="btn btn-primary btn-sm mb-2 addAnswer"><i class="bi bi-plus-square"></i> Add new Answer</button>
                                     </div>
-                                    <button type="button" class="btn btn-success btn-sm m-5 saveQuestion" style="display: none;"><i class="bi bi-floppy"></i> Save question</button>
+                                    <button type="button" class="btn btn-success btn-md  ml-5 mt-2 saveQuestion" style="display: none;"><i class="bi bi-floppy"></i> Save question</button>
                                 </div>
                             }
                         </div>
@@ -217,7 +217,7 @@
                     <div class="form-group">
                         <label class="control-label">Answer</label>
                         <input type="text" name="Questions[${newQuestionIndex}].Answers[${newAnswerIndex}].Text" class="form-control" />
-                        <button type="button" class="btn btn-danger removeAnswer">Remove Answer</button>
+                                <button type="button" class="btn btn-danger btn-sm mt-1 removeAnswer"><i class="bi bi-trash3"></i></button>
                     </div>`;
 
                 // Append the new answer to the specific question
diff --git a/Web/wwwroot/css/site.css b/Web/wwwroot/css/site.css
index eacf892..3498c3a 100644
--- a/Web/wwwroot/css/site.css
+++ b/Web/wwwroot/css/site.css
@@ -35,11 +35,48 @@
     --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
+.question {
+    margin:1rem 2rem 0rem 2rem;
+}
+.question-details{
+   padding:0 4rem 0 4rem;
+}
+.answers {
+    margin: 3rem !important;
+}
 
+#customCard {
+    background-color: #f2f2f2 !important;
+    margin: 3rem;
+    padding: 3rem 0 2rem 0;
+}
+.question-title {
+    color: #007bff;
+    font-weight: bold;
+}
 .question-group {
     margin-bottom: 20px; /* Adjust the value to control the spacing */
 }
 
+
+.question-separator {
+    display: flex;
+    align-items: center;
+}
+
+.line-container {
+    flex-grow: 1;
+}
+
+.next-question-container {
+    margin: 0 10px; /* Adjust margin as needed */
+    text-align: center;
+}
+
+.next-question {
+    margin: 0;
+}
+
 *,
 *::before,
 *::after {