diff --git a/assets/css/styles.css b/assets/css/styles.css
index e4ad48a..44b573a 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -1,8 +1,9 @@
+
+
 body {
     background-color: rgb(240, 235, 248);
     font-family: Arial, sans-serif;
 }
-
 .container {
     position: relative;
     margin-top: 30px;
@@ -33,14 +34,13 @@ body {
 #preview-btn {
     margin-right: 10px;
     background-color: rgb(103, 58, 183); 
-    border-color: rgb(103, 58, 183); 
+    border-color: #007bff; 
     border-radius: 100%; 
     width: 33px; 
     height: 33px; 
     display: flex;
     justify-content: center;
     align-items: center;
-    outline: none;
 }
 
 #preview-btn i {
@@ -53,10 +53,12 @@ body {
     left: -60px;
     top: 24px;
     z-index: 1000;
-    border-radius: 100%; 
+    border-radius: 50%; 
     background-color: rgb(103, 58, 183); 
+
 }
 
+
 .form-section {
     background-color: white;
     width: 56%;
@@ -134,47 +136,38 @@ body {
     text-align: left;
 }
 
+
 .add-option-btn {
     background-color: #f0f0f0; 
     color: #333; 
     margin-top: 11px;
     font-size: 0.9em;
+
 }
 
+
 .ui-state-highlight {
-    background: rgb(240, 235, 248) !important; 
+    background-color: transparent !important;
+    border: none !important;
     margin-bottom: 10px;
     border-radius: 10px;
     width: 56%;
     margin-left: 240px;
-    border: none !important;
 }
-
-.btn-required {
-    position: absolute;
-    bottom: 10px;
-    right: 10px;
-    z-index: 100;
-    border-radius: 20px;
-}
-
-/* Toggle button styles */
-.toggle-container {
-    display: flex;
-    align-items: center;
-    margin-top: 20px;
-}
-
+/* Toggle Switch CSS */
+/* Toggle Switch CSS */
 .toggle-switch {
     position: relative;
     display: inline-block;
-    width: 36px;
-    height: 20.4px;
+    width: 34px;
+    height: 20px;
     margin-left: 10px;
 }
 
 .toggle-switch input {
-    display: none;
+    opacity: 0;
+    width: 0;
+    height: 0;
 }
 
 .slider {
@@ -192,19 +185,19 @@ body {
 .slider:before {
     position: absolute;
     content: "";
-    height: 15.6px;
-    width: 15.6px;
-    left: 2.4px;
-    bottom: 2.4px;
+    height: 14px;
+    width: 14px;
+    left: 3px;
+    bottom: 3px;
     background-color: white;
     transition: .4s;
     border-radius: 50%;
 }
 
 input:checked + .slider {
-    background-color: #2196F3;
+    background-color: rgb(103, 58, 183);
 }
 
 input:checked + .slider:before {
-    transform: translateX(15.6px);
+    transform: translateX(14px);
 }
diff --git a/assets/js/scripts.js b/assets/js/scripts.js
index db26eb4..12d4d7e 100644
--- a/assets/js/scripts.js
+++ b/assets/js/scripts.js
@@ -2,6 +2,7 @@ $(document).ready(function() {
     let index = 1;
     let activeSection = null;
 
+    // Add option function
     function addOption(type, container) {
         let optionIndex = container.children().length + 1;
         let optionHtml;
@@ -24,6 +25,7 @@ $(document).ready(function() {
         container.append(optionHtml);
     }
 
+    // Form section function
     function createFormSection() {
         let newSection = `
             <div class="form-section" data-index="${index}">
@@ -37,16 +39,13 @@ $(document).ready(function() {
                         <option value="checkboxes">Checkboxes</option>
                         <option value="dropdown">Dropdown</option>
                     </select>
+                    <label class="toggle-switch">
+                        <input type="checkbox" class="required-toggle">
+                        <span class="slider"></span>
+                    </label>
                     <span class="delete-section-icon"><i class="fas fa-trash-alt"></i></span>
                 </div>
                 <div class="options-container"></div>
-                <div class="toggle-container">
-                    <span class="status">Required</span>
-                    <label class="toggle-switch">
-                        <input type="checkbox" class="toggleButton">
-                        <span class="slider"></span>
-                    </label>
-                </div>
             </div>
         `;
         $('#form-container').append(newSection);
@@ -66,19 +65,11 @@ $(document).ready(function() {
                 left: position.left - buttonWidth - 47 + 'px',
                 top: position.top + activeSection.height() / 2 - buttonHeight / 2 + 'px'
             });
-        } else {
-            let containerPosition = $('#form-container').position();
-            let buttonWidth = $('#add-section-btn').outerWidth();
-            let buttonHeight = $('#add-section-btn').outerHeight();
-
-            $('#add-section-btn').css({
-                position: 'absolute',
-                left: containerPosition.left + 'px',
-                top: containerPosition.top + $('#form-container').height() + 20 + 'px'
-            });
         }
     }
 
+    // Event handler is triggered
+    // creates a new form section;sets it as active;repositions the add section button
     $('#add-section-btn').on('click', function() {
         createFormSection();
         $('.form-section').removeClass('active');
@@ -87,6 +78,7 @@ $(document).ready(function() {
         positionAddSectionButton();
     });
 
+    // It updates the options container based on the selected type, adding the necessary input fields or buttons.
     $(document).on('change', '.custom-select', function() {
         let type = $(this).val();
         let container = $(this).closest('.form-section').find('.options-container');
@@ -100,17 +92,21 @@ $(document).ready(function() {
             container.append('<textarea class="form-control" disabled placeholder="Paragraph text"></textarea>');
         } else {
             addOption(type, container);
-            $(this).closest('.form-section').append('<button class="btn btn-secondary btn-sm add-option-btn">Add Option</button>');
+            $(this).closest('.form-section').append('<button class="btn btn-secondary add-option-btn">Add Option</button>');
         }
     });
 
+    // add option event handler
+    // adds a new option to the options container and updates the option numbers
     $(document).on('click', '.add-option-btn', function() {
         let type = $(this).closest('.form-section').find('.custom-select').val();
         let container = $(this).closest('.form-section').find('.options-container');
         addOption(type, container);
+        // refreshOptionNumbers(container);
     });
 
-    $(document).on('click','.delete-section-icon', function() {
+    // removes the section;updates the active section;repositions add section button
+    $(document).on('click', '.delete-section-icon', function() {
         let section = $(this).closest('.form-section');
         let prevSection = section.prev('.form-section');
         let nextSection = section.next('.form-section');
@@ -129,19 +125,19 @@ $(document).ready(function() {
         positionAddSectionButton();
     });
 
+    // delete option
     $(document).on('click', '.delete-option-icon', function() {
         let option = $(this).closest('.option');
         let container = option.closest('.options-container');
         option.remove();
+K    });
+
+    // Event handler for required toggle button
+    $(document).on('click', '.required-toggle', function() {
+        $(this).closest('.form-section').toggleClass('required');
     });
 
-    $(document).on('click', '.form-section', function() {
-        $('.form-section').removeClass('active');
-        $(this).addClass('active');
-        activeSection = $(this);
-        positionAddSectionButton();
-    });
-
+    // Preview button functionality
     $('#preview-btn').on('click', function() {
         let previewWindow = window.open('', '_blank');
         let previewContent = `
@@ -171,6 +167,7 @@ $(document).ready(function() {
             previewContent += '</div>';
             let type = $(this).find('.custom-select').val();
             let optionsContainer = $(this).find('.options-container');
+
             if (type === 'multiple-choice') {
                 optionsContainer.find('.option').each(function() {
                     previewContent += `
@@ -204,7 +201,7 @@ $(document).ready(function() {
             previewContent += '</div>';
         });
         previewContent += `
-                    <button class="btn btn-success" style = "margin-left: 240px; margin-top: 20px ">Submit</button>
+                    <button class="btn btn-success" style="margin-left: 240px; margin-top: 20px">Submit</button>
                 </div>
             </body>
             </html>
@@ -213,6 +210,14 @@ $(document).ready(function() {
         previewWindow.document.close();
     });
 
+    // Activate the section;repositions add section button
+    $(document).on('click', '.form-section', function() {
+        $('.form-section').removeClass('active');
+        $(this).addClass('active');
+        activeSection = $(this);
+        positionAddSectionButton();
+    });
+
     $('#form-container').sortable({
         placeholder: 'ui-state-highlight',
         start: function (event, ui) {
@@ -224,13 +229,4 @@ $(document).ready(function() {
     });
 
     $('#form-container').disableSelection();
-    
-    $(document).on('change', '.toggleButton', function() {
-        let status = $(this).prop('checked');
-        if (status) {
-            $(this).closest('.form-section').addClass('required-section');
-        } else {
-            $(this).closest('.form-section').removeClass('required-section');
-        }
-    });
-});
+});
\ No newline at end of file