diff --git a/astros/static/astros/css/registration_style.css b/astros/static/astros/css/registration_style.css
index a86e690d..6cddda1b 100644
--- a/astros/static/astros/css/registration_style.css
+++ b/astros/static/astros/css/registration_style.css
@@ -10,6 +10,18 @@
     border-color: #333;  /* ending color (same as starting color) */
   }
 }
+#preloader {
+  background: #000 url('../images/cool_mars_gif.gif') no-repeat center center;
+  background-size: 15%;
+  height: 100vh;
+  width: 100vw;
+  position: fixed;
+  z-index:100;
+}
+#preloader.hide {
+  display: none;
+}
+
 
 .input-code {
   /* Initial border setup */
@@ -21,7 +33,7 @@
 body.body {
     background-color: black !important; 
     color:white;
-    overflow: hidden; /*To hide Scroll Bar*/
+    overflow: visible; /*To hide Scroll Bar*/
 }
 
 .landing-container {
diff --git a/astros/static/astros/css/style.css b/astros/static/astros/css/style.css
index db413703..b32c7283 100644
--- a/astros/static/astros/css/style.css
+++ b/astros/static/astros/css/style.css
@@ -8,6 +8,19 @@
   src: url('../fonts/aileron-regular.otf') format('truetype');
   /* Add additional src lines for other font formats if necessary */
 }
+
+#preloader {
+  background: #000 url('../images/loader.gif') no-repeat center center;
+  background-size: 15%;
+  height: 100vh;
+  width: 100vw;
+  position: fixed;
+  z-index:100;
+}
+#preloader.hide {
+  display: none;
+}
+
 body.body {
     background-color: white !important; 
     color:black;
diff --git a/astros/static/astros/images/cool_gif.gif b/astros/static/astros/images/cool_gif.gif
new file mode 100644
index 00000000..27792228
Binary files /dev/null and b/astros/static/astros/images/cool_gif.gif differ
diff --git a/astros/static/astros/images/cool_mars_gif.gif b/astros/static/astros/images/cool_mars_gif.gif
new file mode 100644
index 00000000..052aa755
Binary files /dev/null and b/astros/static/astros/images/cool_mars_gif.gif differ
diff --git a/astros/static/astros/images/loader.gif b/astros/static/astros/images/loader.gif
new file mode 100644
index 00000000..5c64db74
Binary files /dev/null and b/astros/static/astros/images/loader.gif differ
diff --git a/astros/static/astros/images/preload_image.jpg b/astros/static/astros/images/preload_image.jpg
new file mode 100644
index 00000000..dbbf6efb
Binary files /dev/null and b/astros/static/astros/images/preload_image.jpg differ
diff --git a/astros/static/astros/images/preloader_gif.gif b/astros/static/astros/images/preloader_gif.gif
new file mode 100644
index 00000000..b1f75510
Binary files /dev/null and b/astros/static/astros/images/preloader_gif.gif differ
diff --git a/astros/static/astros/js/registration.js b/astros/static/astros/js/registration.js
index 3b13ae1d..29ccdb79 100644
--- a/astros/static/astros/js/registration.js
+++ b/astros/static/astros/js/registration.js
@@ -2,6 +2,7 @@
 document.addEventListener('DOMContentLoaded',()=>{
 const submitBtns = document.querySelectorAll('.submit-btn-register');
 const forgotPLinks = document.querySelectorAll('.forgot-password-link');
+const preloader = document.querySelector('#preloader');
 if(forgotPLinks != null){
     forgotPLinks.forEach((fp)=>{
         const mformDiv = fp.closest('.main-form');
@@ -85,6 +86,7 @@ submitBtns.forEach((submitBtn)=>{
     }
 
     if(authenticationArea.classList.contains('closed')){
+        preloader.classList.remove('hide');
         fetch('/authentification/generate_code', {
             method: 'POST',
             headers: { 'X-CSRFToken': getCookie('csrftoken') },
@@ -94,13 +96,14 @@ submitBtns.forEach((submitBtn)=>{
           })
           .then(response => response.json())
           .then(result => {
+            preloader.classList.add('hide');
               alert(result.message);
               if(result.success){
                 authenticationArea.style.display='block';
                 authenticationArea.classList.remove('closed');
               }
           });
-        submitBtn.scrollIntoView({behavior: 'smooth'});
+          submitBtn.scrollIntoView({behavior: 'smooth'});
     }else {
         fetch('/authentification/validate_code', {
             method: 'POST',
diff --git a/astros/templates/astros/layout.html b/astros/templates/astros/layout.html
index 3ee2f909..87987bdc 100644
--- a/astros/templates/astros/layout.html
+++ b/astros/templates/astros/layout.html
@@ -14,6 +14,7 @@
         <link rel="icon" href="{% static 'astros/images/mars.ico' %}" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
     </head>
+    <div id="preloader"></div>
     <body class="body">
         <ul class="navbar-nav mr-auto">
             {% if user.is_authenticated %}
@@ -66,4 +67,11 @@
         <script src="{% static 'phobos/js/sidebar.js' %}"></script>
         {% block scripts %}{% endblock %}
     </body>
+    
+    <script>
+        var loader = document.querySelector('#preloader');
+        window.addEventListener('load', ()=>{
+            loader.classList.add('hide');
+        })
+    </script>
 </html>
\ No newline at end of file
diff --git a/astros/templates/astros/registration_layout.html b/astros/templates/astros/registration_layout.html
index 2314ef4e..3200bbd5 100644
--- a/astros/templates/astros/registration_layout.html
+++ b/astros/templates/astros/registration_layout.html
@@ -11,9 +11,18 @@
         <link rel="icon" href="{% static 'astros/images/mars.ico' %}" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
     </head>
+    
     <body class="body">
+        <div id="preloader"></div>
         <h2 style="color:white" id="dr-r" class="bs-overrides">Dr. R </h2>
         {% block body %} {% endblock %}
         {% block scripts %}{% endblock %}
     </body>
+    <script>
+        var loader = document.querySelector('#preloader');
+        window.addEventListener('load', ()=>{
+            console.log('loaded');
+           loader.classList.add('hide');
+        })
+    </script>
 </html>
\ No newline at end of file
diff --git a/astros/views.py b/astros/views.py
index 1f7527ba..c5277925 100644
--- a/astros/views.py
+++ b/astros/views.py
@@ -65,7 +65,7 @@ def course_enroll(request, course_id, code):
     if not Enrollment.objects.filter(student=student, course=course).exists():
         # Checking whether code is valid.
         try:
-            enrollment_code = EnrollmentCode.objects.filter(course=course, code=code)
+            enrollment_code = EnrollmentCode.objects.get(course=course, code=code)
         except EnrollmentCode.DoesNotExist:
             return HttpResponse(json.dumps({'state': False, 'response': 'Invalid code'}))
 
diff --git a/deimos/static/deimos/css/style.css b/deimos/static/deimos/css/style.css
index 3a0a70e2..af535f83 100644
--- a/deimos/static/deimos/css/style.css
+++ b/deimos/static/deimos/css/style.css
@@ -24,6 +24,17 @@
   }
 }
 
+#preloader {
+  background: #000 url('../images/cool_mars_gif.gif') no-repeat center center;
+  background-size: 15%;
+  height: 100vh;
+  width: 100vw;
+  position: fixed;
+  z-index:100;
+}
+#preloader.hide {
+  display: none;
+}
 .animate-border {
   /* Initial border setup */
   border: 2px solid #fff;
diff --git a/deimos/static/deimos/images/cool_gif.gif b/deimos/static/deimos/images/cool_gif.gif
new file mode 100644
index 00000000..27792228
Binary files /dev/null and b/deimos/static/deimos/images/cool_gif.gif differ
diff --git a/deimos/static/deimos/images/cool_mars_gif.gif b/deimos/static/deimos/images/cool_mars_gif.gif
new file mode 100644
index 00000000..052aa755
Binary files /dev/null and b/deimos/static/deimos/images/cool_mars_gif.gif differ
diff --git a/deimos/static/deimos/images/loader.gif b/deimos/static/deimos/images/loader.gif
new file mode 100644
index 00000000..5c64db74
Binary files /dev/null and b/deimos/static/deimos/images/loader.gif differ
diff --git a/deimos/static/deimos/images/loading.gif b/deimos/static/deimos/images/loading.gif
new file mode 100644
index 00000000..22bf4601
Binary files /dev/null and b/deimos/static/deimos/images/loading.gif differ
diff --git a/deimos/static/deimos/images/preloader_gif.gif b/deimos/static/deimos/images/preloader_gif.gif
new file mode 100644
index 00000000..b1f75510
Binary files /dev/null and b/deimos/static/deimos/images/preloader_gif.gif differ
diff --git a/deimos/templates/deimos/layout.html b/deimos/templates/deimos/layout.html
index 41761d80..beb77124 100644
--- a/deimos/templates/deimos/layout.html
+++ b/deimos/templates/deimos/layout.html
@@ -13,6 +13,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
     </head>
     <body class="body">
+        <div id="preloader"></div>
         <ul class="navbar-nav mr-auto">
             {% if user.is_authenticated %}
                 <li class="nav-item" style="display:none">
@@ -56,4 +57,10 @@
     <script src="{% static 'deimos/js/sidebar.js' %}"></script>
     {% block scripts %}{% endblock %}
     </body>
+    <script>
+        var loader = document.querySelector('#preloader');
+        window.addEventListener('load', ()=>{
+            loader.classList.add('hide');
+        })
+    </script>
 </html>
\ No newline at end of file
diff --git a/phobos/static/phobos/css/style.css b/phobos/static/phobos/css/style.css
index 37361b05..2c443cea 100644
--- a/phobos/static/phobos/css/style.css
+++ b/phobos/static/phobos/css/style.css
@@ -10,6 +10,18 @@
   /* Add additional src lines for other font formats if necessary */
 }
 
+#preloader {
+  background: #000 url('../images/cool_mars_gif.gif') no-repeat center center;
+  background-size: 15%;
+  height: 100vh;
+  width: 100vw;
+  position: fixed;
+  z-index:100;
+}
+#preloader.hide {
+  display: none;
+}
+
 body.body {
     background-color: white !important; 
     color:black;
diff --git a/phobos/static/phobos/images/cool_gif.gif b/phobos/static/phobos/images/cool_gif.gif
new file mode 100644
index 00000000..27792228
Binary files /dev/null and b/phobos/static/phobos/images/cool_gif.gif differ
diff --git a/phobos/static/phobos/images/cool_mars_gif.gif b/phobos/static/phobos/images/cool_mars_gif.gif
new file mode 100644
index 00000000..052aa755
Binary files /dev/null and b/phobos/static/phobos/images/cool_mars_gif.gif differ
diff --git a/phobos/static/phobos/images/loader.gif b/phobos/static/phobos/images/loader.gif
new file mode 100644
index 00000000..5c64db74
Binary files /dev/null and b/phobos/static/phobos/images/loader.gif differ
diff --git a/phobos/static/phobos/images/loading.gif b/phobos/static/phobos/images/loading.gif
new file mode 100644
index 00000000..fbd3b61d
Binary files /dev/null and b/phobos/static/phobos/images/loading.gif differ
diff --git a/phobos/static/phobos/images/loading_gif_2.gif b/phobos/static/phobos/images/loading_gif_2.gif
new file mode 100644
index 00000000..2a502b94
Binary files /dev/null and b/phobos/static/phobos/images/loading_gif_2.gif differ
diff --git a/phobos/static/phobos/images/preloader_gif.gif b/phobos/static/phobos/images/preloader_gif.gif
new file mode 100644
index 00000000..b1f75510
Binary files /dev/null and b/phobos/static/phobos/images/preloader_gif.gif differ
diff --git a/phobos/static/phobos/js/assign_question.js b/phobos/static/phobos/js/assign_question.js
index 0c1a7581..dc40985d 100644
--- a/phobos/static/phobos/js/assign_question.js
+++ b/phobos/static/phobos/js/assign_question.js
@@ -1,7 +1,9 @@
 document.addEventListener('DOMContentLoaded', () => {
     const assignBtn = document.querySelector('.assign-btn');
+    const preloader = document.querySelector('#preloader');
     assignBtn.addEventListener('click', () => {
         // Implement the fetch.
+        preloader.classList.remove('hide');
         fetch(window.location.href + '/assign', {
             method: 'POST', 
         })
@@ -13,6 +15,7 @@ document.addEventListener('DOMContentLoaded', () => {
         })
         .then(data => {
             alert(data.message);
+            preloader.classList.add('hide');
             if (data.success) {
                 assignBtn.parentNode.removeChild(assignBtn);
             }
diff --git a/phobos/static/phobos/js/export_question.js b/phobos/static/phobos/js/export_question.js
index dd2f4eaf..9c62506d 100644
--- a/phobos/static/phobos/js/export_question.js
+++ b/phobos/static/phobos/js/export_question.js
@@ -7,7 +7,7 @@
     var select_assignment;
     var selected_course_id;
     var select_course=export_to_assignment.querySelector('select[id=select_course]');
-
+    const preloader = document.querySelector('#preloader');
 
     document.querySelector('#btn-export_question').addEventListener('click',()=>{  
         export_to_assignment.style.display='block';
@@ -19,10 +19,12 @@
 
              if(event.target.classList.contains('export-confirm') && selected_course_id != null ){   
               // excute back_end export function and return result
-                select_assignment= export_to_assignment.querySelector('#' + selected_course_id)
+                select_assignment= export_to_assignment.querySelector('#' + selected_course_id);
+                preloader.classList.remove('hide');
                 fetch(window.location.href+ '/export_question_to/'+ select_assignment.value) 
                 .then(response=>response.json())
                 .then(result=>{
+                  preloader.classList.add('hide');
                     alert(result.message);
                     export_result.style.display= 'block';
                     export_to_assignment.style.display='none';
diff --git a/phobos/static/phobos/js/student_profile.js b/phobos/static/phobos/js/student_profile.js
index da4de01f..1780f159 100644
--- a/phobos/static/phobos/js/student_profile.js
+++ b/phobos/static/phobos/js/student_profile.js
@@ -1,226 +1,276 @@
+document.addEventListener("DOMContentLoaded", () => {
+    // Initialize application
+    assignmentDetailsInit();
 
+    // Add global event listeners
+    addGlobalEventListeners();
 
+    function getCookie(name) {
+        if (!document.cookie) {
+          return null;
+        }
+    
+        const csrfCookie = document.cookie
+          .split(';')
+          .map(c => c.trim())
+          .find(c => c.startsWith(name + '='));
+    
+        if (!csrfCookie) {
+          return null;
+        }
+    
+        return decodeURIComponent(csrfCookie.split('=')[1]);
+      }
 
-function table_generator(question, assignment_id) {
-
-    const div = document.createElement('div');
-    div.id = 'table' + assignment_id;
-    div.className='generated_assignment_table';
-
-    const title = document.createElement('div');
-    title.innerHTML = `</br><h3>${question[0].name} details </h3>
-   <br/>
-   <span class='Due-date-display suggestion original-size'>Due by: ${question[0].Due_date} </span> <button class="btn btn-outline-info due_date-btn"  data-assignmentId="${assignment_id}" style="display: inline; position:relative; float: right">Extend Due Date</button>
-   
-   <button class="btn btn-outline-success edit-score-btn"  style="display: inline; position:relative; float: right">Edit Scores</button>
-
-   <div  class="due-date-div" style="display: none; position:relative; float: right" >
-       <input type="datetime-local"  class="input-new-due-date-field">
-       <input type="button" class="save-new-due-date-field btn btn-outline-success" value="apply">
-       </div>
-   </div>`;
-
-    div.appendChild(title);
-
-    // adding due date extend functionality
 
+    // Function to initialize assignment details
+    function assignmentDetailsInit() {
+        const assignments = document.querySelectorAll('.assignment');
+        assignments.forEach(assignment => {
+            assignment.addEventListener('click', () => handleAssignmentClick(assignment));
+        });
+    }
 
-    const table = document.createElement('table');
-    table.className = "table table-striped table-bordered table-hover";
+    // Handle assignment click
+    function handleAssignmentClick(assignment) {
+        assignment.style.color = 'black';
+        const assignmentId = parseInt(assignment.id);
 
-    const thead = document.createElement('thead');
-    var tr = document.createElement('tr');
-    var column = [];
-    for (i = 1; i < question.length; i++) {
-        for (var col in question[i]) {
-            if (!column.includes(col) && col != 'id' && col != 'original_score') {
-                column.push(col);
-                th = document.createElement('th');
-                th.innerHTML = col;
-                tr.appendChild(th);
-            }
+        if (!document.querySelector(`#table${assignmentId}`)) {
+            fetch(`get_questions/${encodeURIComponent(assignmentId)}`)
+                .then(res => res.json())
+                .then(question => tableGenerator(question, assignmentId))
+                .catch(error => console.error('Error fetching questions:', error));
         }
     }
-    thead.appendChild(tr)
-    table.appendChild(thead)
-    var td;
-    const tbody = document.createElement('tbody');
-    for (i = 1; i < question.length; i++) {
-        tr = document.createElement('tr');
-        for (j = 0; j < column.length; j++) {
-            td = document.createElement('td');
-
-            // We place and edit button under elements of the score column
-            const field_heading = thead.querySelectorAll('th')[j];
-            const score_field_heading = thead.querySelectorAll('th')[1];
-            const questionNum_field_heading = thead.querySelectorAll('th')[0];
-
-            if (field_heading.innerHTML === score_field_heading.innerHTML) {
-                td.dataset.original_score = question[i]['original_score']
-                td.className = 'score_record';
-                td.innerHTML = `<span class='score-record'>${question[i][column[j]]} </span>
-           <u  class='edit-score-line' data-question_student_id=${question[i]['id']} style="display: none;"> edit </u>`;
-            }
-            else {
-                td.innerHTML = question[i][column[j]]
-            }
 
-            tr.appendChild(td);
-        }
-        tbody.appendChild(tr);
+    // Function to add global event listeners
+    function addGlobalEventListeners() {
+        document.body.addEventListener('click', handleGlobalClick);
     }
-    table.appendChild(tbody);
 
-    div.appendChild(table);
-    document.querySelector('.body-container').appendChild(div);
-    div.scrollIntoView({behavior:'smooth'})
+    // Handle global click events
+    function handleGlobalClick(event) {
+        const target = event.target;
 
-}
-
-
-function assignment_details() {
-
-    assignments = document.querySelectorAll('.assignment')
-    for (i = 0; i < assignments.length; i++) {
-        assignments[i].addEventListener('click', function () {
-            this.style.color = 'black';
-            let assignment_id = parseInt(this.id);
-
-            //loading content and generating a particular assignment table if it wasn't done before
-            if (document.querySelector('#table' + assignment_id) == null) {
-                fetch(`get_questions/${encodeURIComponent(assignment_id)}`)
-                    .then(res => res.json())
-                    .then(question => table_generator(question, assignment_id))
-            }
-        })
+        handleDueDateExtension(target);
+        handleScoreEdit(target);
+        handleScoreEditToggle(target);
     }
-}
-
-document.addEventListener("DOMContentLoaded", assignment_details)
-
 
-// implementing due date extension function
-document.body.addEventListener('click', (event) => {
-
-    target = event.target;
-    // event.preventDefault();
-    var DueDateDiv = target.parentNode.querySelector('.due-date-div');
+// Handle due date extension
+function handleDueDateExtension(target) {
+    // Show due date extension input
     if (target.classList.contains('due_date-btn')) {
-        DueDateDiv.style.display = 'inline';
+        const dueDateDiv = target.parentNode.querySelector('.due-date-div');
+        dueDateDiv.style.display = 'inline';
         target.style.display = 'none';
     }
 
+    // Save new due date
     if (target.classList.contains('save-new-due-date-field')) {
-        DueDateDiv = target.parentNode;
-        const dueDateBtn = target.parentNode.parentNode.querySelector('.due_date-btn');
-        const new_date_field = DueDateDiv.querySelector('.input-new-due-date-field');
-        // console.log(dueDateBtn.dataset.assignmentid)
-        fetch(window.location.href + '/' + dueDateBtn.dataset.assignmentid + '/edit_student_assignment_due_date', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'X-CSRFToken': getCookie('csrftoken')
-            },
-            body: JSON.stringify({
-                new_date: new_date_field.value,
-            })
-        })
-            .then(response => response.json())
-            .then(result => {
-                alert(result.message);
-                if (result.success) {
-                    dueDateBtn.style.display = 'inline';
-                    target.parentNode.parentNode.querySelector('.Due-date-display').innerHTML = "Due by: " + new_date_field.value;
-                    DueDateDiv.style.display = 'none';
-                }
-            })
-
+        const dueDateDiv = target.parentNode;
+        const dueDateInput = dueDateDiv.querySelector('.input-new-due-date-field');
+        const dueDateBtn = dueDateDiv.parentNode.querySelector('.due_date-btn');
+        const assignmentId = dueDateBtn.dataset.assignmentid;
+        const newDueDate = dueDateInput.value;
+
+        if (newDueDate) {
+            updateDueDate(assignmentId, newDueDate, dueDateDiv, dueDateBtn);
+        }
     }
-    // HANDLING MODIFY QUESTION SCORE ************
+}
+
+// Update the due date on the server
+function updateDueDate(assignmentId, newDueDate, dueDateDiv, dueDateBtn) {
+    // Implement the logic to send the new due date to the server
+    fetch(`${window.location.href}/${assignmentId}/edit_student_assignment_due_date`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-CSRFToken': getCookie('csrftoken')
+        },
+        body: JSON.stringify({ new_date: newDueDate })
+    })
+    .then(response => response.json())
+    .then(result => {
+        alert(result.message);
+        if (result.success) {
+            const dueDateDisplay = dueDateDiv.parentNode.querySelector('.Due-date-display');
+            dueDateDisplay.textContent = `Due by: ${newDueDate}`;
+            dueDateDiv.style.display = 'none';
+            dueDateBtn.style.display = 'inline';
+        }
+    })
+    .catch(error => {
+        console.error('Error:', error);
+        alert('Failed to update due date.');
+    });
+}
+
+
+// Handle score editing
+function handleScoreEdit(target) {
     if (target.classList.contains('edit-score-line')) {
-        const EditQuestionDiv = document.querySelector('.edit_questions_details');
-        const ApplyBtn = EditQuestionDiv.querySelector('.apply-btn');
-        const CancelBtn = EditQuestionDiv.querySelector('.cancel-btn')
-        const questionNum = EditQuestionDiv.querySelector('.question-num');
-        const originalScore = EditQuestionDiv.querySelector('.original-score');
-        const actualScore = EditQuestionDiv.querySelector('.actual-score');
-        const newScoreInputField = EditQuestionDiv.querySelector('.new-score-input-field');
         const row = target.closest('tr');
-        const cell = target.closest('td');
-        const questionNumCell = row.firstElementChild;
-        const question_student_id = target.dataset.question_student_id
-
-        //positioning Edit question box
-        position= event.target.closest('table').parentNode;
-        // console.log(position)
-        EditQuestionDiv.parentNode.removeChild(EditQuestionDiv)
-        position.parentNode.insertBefore(EditQuestionDiv,position)
-
-        //initial Views
-        EditQuestionDiv.style.display = 'block';
-        EditQuestionDiv.scrollIntoView({behavior:'smooth'})
-        actual_score = cell.querySelector('.score-record').innerHTML;
-        actualScore.innerHTML = actual_score;
-        questionNum.innerHTML = questionNumCell.innerHTML;
-        originalScore.innerHTML = cell.dataset.original_score;
-
-        //Events
-        CancelBtn.addEventListener('click', () => {
-            EditQuestionDiv.style.display = 'none';
-        })
-        ApplyBtn.addEventListener('click', () => {
-
-            if (confirm('Are you sure you want to modify this score')) {
-                new_score = newScoreInputField.value
-                fetch(window.location.href + '/modify_question_student_score/' + new_score + '/' + question_student_id)
-                    .then(response => response.json())
-                    .then(result => {
-                        alert(result.result)
-                        if (result.success) {
-                            cell.querySelector('.score-record').innerHTML = new_score;
-                            EditQuestionDiv.style.display = 'none';
-                        }
-                    })
-                    .catch(error => console.error('error', error))
-            }
-
-        })
+        const scoreCell = row.querySelector('.score_record');
+        const questionStudentId = target.dataset.questionStudentId;
+        const originalScore = scoreCell.dataset.originalScore;
+        const editSection = document.createElement('div');
+        editSection.classList.add('edit-section');
+        const editInput = document.createElement('input');
+        editInput.type = 'number';
+        
+        editInput.classList.add('edit-score-input', 'field-style');
+
+        editInput.value = scoreCell.querySelector('.value').textContent;
+        const dSection = scoreCell.querySelector('.d-section');
+        dSection.style.display = 'none';
+
+        editSection.appendChild(editInput);
+        //scoreCell.appendChild(editInput);
+
+        const saveButton = document.createElement('button');
+        saveButton.innerText = 'save';
+        saveButton.classList.add('save-score-btn', 'btn', 'btn-outline-info');
+        saveButton.onclick = () => saveEditedScore(questionStudentId, editInput.value, scoreCell);
+        editSection.appendChild(saveButton);
+
+        const oScoreSpan = document.createElement('span')
+        oScoreSpan.innerHTML = ` Initial: ${originalScore}`;
+
+        editSection.appendChild(oScoreSpan);
+
+        //scoreCell.appendChild(saveButton);
+        scoreCell.appendChild(editSection);
     }
+}
 
+// Save the edited score
+function saveEditedScore(questionStudentId, newScore, scoreCell) {
+    // Implement the logic to send the new score to the server
+    // For example, using fetch to send a POST request
+    fetch(`student_profile/modify_question_student_score/${newScore}/${questionStudentId}`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-CSRFToken': getCookie('csrftoken')
+        }
+    })
+    .then(response => response.json())
+    .then(result => {
+        alert(result.message);
+        if (result.success) {
+            scoreCell.querySelector('.value').innerHTML = result.new_score;
+            scoreCell.querySelector('.d-section').style.display = 'block';
+            scoreCell.removeChild(scoreCell.querySelector('.edit-section'));
+        }
+    })
+    .catch(error => {
+        console.error('Error:', error);
+        alert('Failed to save score.');
+    });
+}
+
+
+// Toggle score editing mode
+function handleScoreEditToggle(target) {
     if (target.classList.contains('edit-score-btn')) {
-        const editScoreLines = document.querySelectorAll('.edit-score-line');
-        const EditQuestionDiv = document.querySelector('.edit_questions_details');
-        if (target.innerHTML != 'Cancel') {
+        const table = target.closest('.generated_assignment_table');
+        const editScoreLines = table.querySelectorAll('.edit-score-line');
+
+        if (target.textContent === 'Edit Scores') {
             editScoreLines.forEach(line => {
                 line.style.display = 'inline';
-                line.style.color = 'blue';
             });
-            target.innerHTML = 'Cancel';
-
-        }
-        else {
-            editScoreLines.forEach(line => { line.style.display = 'none'; });
-            target.innerHTML = 'Edit Scores';
-            EditQuestionDiv.style.display = 'none';
+            target.textContent = 'Cancel';
+        } else {
+            editScoreLines.forEach(line => {
+                line.style.display = 'none';
+            });
+            target.textContent = 'Edit Scores';
         }
     }
+}
 
-    function getCookie(name) {
-        if (!document.cookie) {
-          return null;
-        }
-    
-        const csrfCookie = document.cookie
-          .split(';')
-          .map(c => c.trim())
-          .find(c => c.startsWith(name + '='));
+// Generate assignment detail table
+function tableGenerator(questions, assignmentId) {
+    const container = document.querySelector('.body-container');
+    const div = document.createElement('div');
+    div.id = 'table' + assignmentId;
+    div.className = 'generated_assignment_table';
+
+    // Create title and controls
+    div.appendChild(createTableTitle(questions[0], assignmentId));
+
+    // Create table
+    const table = document.createElement('table');
+    table.className = 'table table-striped table-bordered table-hover';
+    table.appendChild(createTableHeader(questions));
+    table.appendChild(createTableBody(questions));
+
+    div.appendChild(table);
+    container.appendChild(div);
+    div.scrollIntoView({ behavior: 'smooth' });
+}
+
+// Create table title and controls
+function createTableTitle(question, assignmentId) {
+    const titleDiv = document.createElement('div');
+    titleDiv.innerHTML = `
+        <h3>${question.name} details</h3>
+        <span class='Due-date-display suggestion original-size'>Due by: ${question.Due_date}</span>
+        <button class="btn btn-outline-info due_date-btn" data-assignmentId="${assignmentId}">Extend Due Date</button>
+        <button class="btn btn-outline-success edit-score-btn">Edit Scores</button>
+        <div class="due-date-div" style="display: none;">
+            <input type="datetime-local" class="input-new-due-date-field">
+            <input type="button" class="save-new-due-date-field btn btn-outline-success" value="Apply">
+        </div>`;
+    return titleDiv;
+}
+
+// Create table header
+function createTableHeader(questions) {
+    const thead = document.createElement('thead');
+    const tr = document.createElement('tr');
     
-        if (!csrfCookie) {
-          return null;
+    // Assuming the first question object has all necessary fields
+    Object.keys(questions[1]).forEach(key => {
+        if (key !== 'id' && key !== 'original_score' && key !== 'real_score' && key !== 'total') {
+            const th = document.createElement('th');
+            th.textContent = key;
+            tr.appendChild(th);
         }
-    
-        return decodeURIComponent(csrfCookie.split('=')[1]);
-      }
+    });
+
+    thead.appendChild(tr);
+    return thead;
+}
+
+// Create table body
+function createTableBody(questions) {
+    const tbody = document.createElement('tbody');
+
+    questions.slice(1).forEach(question => {
+        const tr = document.createElement('tr');
+        Object.entries(question).forEach(([key, value]) => {
+            if (key !== 'id' && key !== 'original_score' && key !== 'real_score' && key !== 'total') {
+                const td = document.createElement('td');
+                if (key === 'score') {
+                    td.dataset.originalScore = question.original_score;
+                    td.className = 'score_record';
+                    td.innerHTML = `<div class="d-section"><span class='score-record'><span class="value">${question.real_score}</span>/${question.total}</span>
+                                    <u class='edit-score-line' data-question-student-id=${question.id} style="display: none;">edit</u></div>`;
+                } else {
+                    td.textContent = value;
+                }
+                tr.appendChild(td);
+            }
+        });
+        tbody.appendChild(tr);
+    });
 
-})
+    return tbody;
+}
 
+});
diff --git a/phobos/templates/phobos/layout.html b/phobos/templates/phobos/layout.html
index 09a457b3..a9f7abd0 100644
--- a/phobos/templates/phobos/layout.html
+++ b/phobos/templates/phobos/layout.html
@@ -15,6 +15,7 @@
         {% block headscript %} {% endblock %}
     </head>
     <body class="body">
+        <div id="preloader"></div>
         <ul class="navbar-nav mr-auto">
             {% if user.is_authenticated %}
                 <li class="nav-item" style="display:none">
@@ -60,4 +61,11 @@
         <script src="{% static 'phobos/js/sidebar.js' %}"></script>
         {% block scripts %}{% endblock %}
     </body>
+
+    <script>
+        var loader = document.querySelector('#preloader');
+        window.addEventListener('load', ()=>{
+            loader.classList.add('hide');
+        })
+    </script>
 </html>
\ No newline at end of file
diff --git a/phobos/templates/phobos/manage_enrollment_codes.html b/phobos/templates/phobos/manage_enrollment_codes.html
index c78a060e..5aa147ad 100644
--- a/phobos/templates/phobos/manage_enrollment_codes.html
+++ b/phobos/templates/phobos/manage_enrollment_codes.html
@@ -22,7 +22,7 @@ <h4>{{course.name}}</h4><hr/>
     <button class="btn-enrollment-code btn btn-outline-primary"> Create an Enrollment Code</button>
     <ul class="course code-list"></ul>
 
-    <h5 class="suggestion original-size"> Students can the code(s) above to enroll your in course.</h5>
+    <h5 class="suggestion original-size"> Students can use the code(s) above to enroll your in course.</h5>
 </div>
 
 {% endblock %}
diff --git a/phobos/views.py b/phobos/views.py
index 617405dc..1371f415 100644
--- a/phobos/views.py
+++ b/phobos/views.py
@@ -147,13 +147,13 @@ def register(request):
         last_name = request.POST["last_name"].strip().title()
         department = request.POST["department"].strip().title()
 
-        try: 
+        try: # Checking if username is taken
             prof = Professor.objects.get(username=username)
             username = str(username) + str(random.randint(1, 1000000))
-        except:
+        except Professor.DoesNotExist:
             pass
 
-        try:
+        try: # checking if email is taken.
             checking_prof = Professor.objects.get(email=email)
             if checking_prof:
                 return render(request, "astros/register.html", {
@@ -867,25 +867,35 @@ def get_questions(request, student_id, assignment_id, course_id=None):
         else:
             num_pts = question.struct_settings.num_points
         try:
-            question_student = QuestionStudent.objects.get(student= student, question=question)
-            question_modified_score, is_created= QuestionModifiedScore.objects.get_or_create(question_student=question_student)
-            if question_modified_score.is_modified:
-                question_details.append({'Question_number':'Question ' + question.number,\
-                                    'score':f"{round(question_modified_score.score, 2)} / {num_pts}", \
-                                        'num_attempts': question_student.get_num_attempts(),\
-                                        'original_score':f"{question_student.get_num_points()} / {num_pts}", \
-                                            'id': question_student.pk})
-            else:
-                        question_details.append({'Question_number':'Question ' + question.number,\
-                                    'score':f"{round(question_student.get_num_points(), 2)} / {num_pts}", \
-                                        'num_attempts': question_student.get_num_attempts(),\
-                                    'original_score':f"{question_student.get_num_points()} / {num_pts}", \
-                                            'id': question_student.pk})
+            question_student = QuestionStudent.objects.get(student=student, question=question)
+            question_modified_score, is_created = QuestionModifiedScore.objects.get_or_create(question_student=question_student)
+
+            score = question_modified_score.score if question_modified_score.is_modified else question_student.get_num_points()
+            score_display = f"{round(score, 2)} / {num_pts}"
+            attempts = question_student.get_num_attempts()
+            original_score = f"{question_student.get_num_points()} / {num_pts}"
+
+            question_details.append({
+                'Question_number': f'Question {question.number}',
+                'score': score_display,
+                'num_attempts': attempts,
+                'original_score': original_score,
+                'id': question_student.pk,
+                'real_score':round(score, 2),
+                'total':num_pts
+            })
 
         except QuestionStudent.DoesNotExist:
-            question_details.append({'Question_number':'Question ' + question.number,\
-                                     'score':f"0 / {num_pts}",'num_attempts': "0",\
-                                     'original_score':f"0 / {num_pts}",'id': "-1"})    
+            question_details.append({
+                'Question_number': f'Question {question.number}',
+                'score': f"0 / {num_pts}",
+                'num_attempts': "0",
+                'original_score': f"0 / {num_pts}",
+                'id': "-1",
+                'real_score':0,
+                'total':num_pts
+            })
+    
         
     question_details= json.dumps(question_details)
     return HttpResponse(question_details)
@@ -907,7 +917,7 @@ def modify_question_student_score(request,question_student_id,new_score,course_i
         question_student= QuestionStudent.objects.get(pk= question_student_id)
     except QuestionStudent.DoesNotExist:
         return JsonResponse({
-            'success': False, 'result':"Can't modify grade when student has not even attempted question!"
+            'success': False, 'message':"Can't modify grade when student has not even attempted question!", 'new_score':0
         })
         # question_student = QuestionStudent.objects.create(question, student) # Needs the question and student
         # question_student.save()
@@ -917,9 +927,9 @@ def modify_question_student_score(request,question_student_id,new_score,course_i
         question_modified_score.score= new_score
         question_modified_score.is_modified= True
         question_modified_score.save()
-        return JsonResponse({'success':True,'result':'Grade successfully edited.'})
+        return JsonResponse({'success':True, 'message':'Grade successfully edited.', 'new_score':new_score})
     except:
-        return JsonResponse({'success':False,'result':'Something Went Wrong'})
+        return JsonResponse({'success':False, 'message':'Something Went Wrong', 'new_score':new_score})
 
 def search_question(request):
     if request.method == 'POST':