diff --git a/client/css/GPACalculator.css b/client/css/GPACalculator.css
index 1819836..1d09c56 100644
--- a/client/css/GPACalculator.css
+++ b/client/css/GPACalculator.css
@@ -5,6 +5,13 @@
   margin: 20px 0;
 }
 
+@media (max-width: 767px) {
+  .gpaCalc .container form .subject-buttons {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
 .gpaCalc .container form .subject-buttons .sem {
   display: flex;
   flex-direction: column;
@@ -67,124 +74,142 @@
 
 .gpaCalc .container form .subject-buttons .sem .selectAllWrap p,
 .gpaCalc .container form .subject-buttons .sem .choiceWrap p {
-  
   margin: 0;
 }
-<div class="checkbox-wrapper">
-  <input type="checkbox" id="_checkbox">
-  <label for="_checkbox">
-    <div class="tickMark"></div>
-  </label>
-</div>
-
-<style>
-  .checkbox-wrapper-26 * {
-    -webkit-tap-highlight-color: transparent;
-    outline: none;
-  }
 
-  .checkbox-wrapper-26 input[type="checkbox"] {
-    display: none;
-  }
+.gpaCalc .container form .subject-buttons .sem .checkbox-wrapper {
+  -webkit-tap-highlight-color: transparent;
+  outline: none;
+}
 
-  .checkbox-wrapper-26 label {
-    --size: 50px;
-    --shadow: calc(var(--size) * .07) calc(var(--size) * .1);
-
-    position: relative;
-    display: block;
-    width: var(--size);
-    height: var(--size);
-    margin: 0 auto;
-    background-color: #f72414;
-    border-radius: 50%;
-    box-shadow: 0 var(--shadow) #ffbeb8;
-    cursor: pointer;
-    transition: 0.2s ease transform, 0.2s ease background-color,
-      0.2s ease box-shadow;
-    overflow: hidden;
-    z-index: 1;
-  }
+.gpaCalc .container form .subject-buttons .sem .checkbox-wrapper input[type="checkbox"] {
+  display: none;
+}
 
-  .checkbox-wrapper-26 label:before {
-    content: "";
-    position: absolute;
-    top: 50%;
-    right: 0;
-    left: 0;
-    width: calc(var(--size) * .7);
-    height: calc(var(--size) * .7);
-    margin: 0 auto;
-    background-color: #fff;
-    transform: translateY(-50%);
-    border-radius: 50%;
-    box-shadow: inset 0 var(--shadow) #ffbeb8;
-    transition: 0.2s ease width, 0.2s ease height;
-  }
+.gpaCalc .container form .subject-buttons .sem .checkbox-wrapper label {
+  --size: 1.8rem;
+  --shadow: calc(var(--size) * 0.07) calc(var(--size) * 0.1);
+
+  position: relative;
+  display: block;
+  width: var(--size);
+  height: var(--size);
+  margin: 0 auto;
+  /* background-color: #f72414; */
+  background-color: var(--third-color);
+  border-radius: 50%;
+  /* box-shadow: 0 var(--shadow) #ffbeb8; */
+  cursor: pointer;
+  transition:
+    0.2s ease transform,
+    0.2s ease background-color,
+    0.2s ease box-shadow;
+  overflow: hidden;
+  z-index: 1;
+}
 
-  .checkbox-wrapper-26 label:hover:before {
-    width: calc(var(--size) * .55);
-    height: calc(var(--size) * .55);
-    box-shadow: inset 0 var(--shadow) #ff9d96;
-  }
+.gpaCalc .container form .subject-buttons .sem .selectAllWrap .checkbox-wrapper label {
+  background-color: #f72414;
+}
 
-  .checkbox-wrapper-26 label:active {
-    transform: scale(0.9);
-  }
+.gpaCalc .container form .subject-buttons .sem .checkbox-wrapper label:before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  right: 0;
+  left: 0;
+  width: calc(var(--size) * 0.7);
+  height: calc(var(--size) * 0.7);
+  margin: 0 auto;
+  background-color: #fff;
+  transform: translateY(-50%);
+  border-radius: 50%;
+  /* box-shadow: inset 0 var(--shadow) #ffbeb8; */
+  transition:
+    0.2s ease width,
+    0.2s ease height;
+}
 
-  .checkbox-wrapper-26 .tick_mark {
-    position: absolute;
-    top: -1px;
-    right: 0;
-    left: calc(var(--size) * -.05);
-    width: calc(var(--size) * .6);
-    height: calc(var(--size) * .6);
-    margin: 0 auto;
-    margin-left: calc(var(--size) * .14);
-    transform: rotateZ(-40deg);
-  }
+.gpaCalc .container form .subject-buttons .sem .checkbox-wrapper label:hover:before {
+  width: calc(var(--size) * 0.55);
+  height: calc(var(--size) * 0.55);
+  /* box-shadow: inset 0 var(--shadow) #ff9d96; */
+}
 
-  .checkbox-wrapper-26 .tick_mark:before,
-  .checkbox-wrapper-26 .tick_mark:after {
-    content: "";
-    position: absolute;
-    background-color: #fff;
-    border-radius: 2px;
-    opacity: 0;
-    transition: 0.2s ease transform, 0.2s ease opacity;
-  }
+.gpaCalc .container form .subject-buttons .sem .checkbox-wrapper label:active {
+  transform: scale(0.9);
+}
 
-  .checkbox-wrapper-26 .tick_mark:before {
-    left: 0;
-    bottom: 0;
-    width: calc(var(--size) * .1);
-    height: calc(var(--size) * .3);
-    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.23);
-    transform: translateY(calc(var(--size) * -.68));
-  }
+.gpaCalc .container form .subject-buttons .sem .checkbox-wrapper .tickMark {
+  position: absolute;
+  top: -1px;
+  right: 0;
+  left: calc(var(--size) * -0.05);
+  width: calc(var(--size) * 0.6);
+  height: calc(var(--size) * 0.6);
+  margin: 0 auto;
+  margin-left: calc(var(--size) * 0.14);
+  transform: rotateZ(-40deg);
+}
 
-  .checkbox-wrapper-26 .tick_mark:after {
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    height: calc(var(--size) * .1);
-    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.23);
-    transform: translateX(calc(var(--size) * .78));
-  }
+.gpaCalc .container form .subject-buttons .sem .checkbox-wrapper .tickMark:before,
+.gpaCalc .container form .subject-buttons .sem .checkbox-wrapper .tickMark:after {
+  content: "";
+  position: absolute;
+  background-color: #fff;
+  border-radius: 2px;
+  opacity: 0;
+  transition:
+    0.2s ease transform,
+    0.2s ease opacity;
+}
 
-  .checkbox-wrapper-26 input[type="checkbox"]:checked + label {
-    background-color: #07d410;
-    box-shadow: 0 var(--shadow) #92ff97;
-  }
+.gpaCalc .container form .subject-buttons .sem .checkbox-wrapper .tickMark:before {
+  left: 0;
+  bottom: 0;
+  width: calc(var(--size) * 0.1);
+  height: calc(var(--size) * 0.3);
+  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.23);
+  transform: translateY(calc(var(--size) * -0.68));
+}
 
-  .checkbox-wrapper-26 input[type="checkbox"]:checked + label:before {
-    width: 0;
-    height: 0;
-  }
+.gpaCalc .container form .subject-buttons .sem .checkbox-wrapper .tickMark:after {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: calc(var(--size) * 0.1);
+  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.23);
+  transform: translateX(calc(var(--size) * 0.78));
+}
 
-  .checkbox-wrapper-26 input[type="checkbox"]:checked + label .tick_mark:before,
-  .checkbox-wrapper-26 input[type="checkbox"]:checked + label .tick_mark:after {
-    transform: translate(0);
-    opacity: 1;
-  }
-</style>
+.gpaCalc .container form .subject-buttons .sem .checkbox-wrapper input[type="checkbox"]:checked + label {
+  background-color: #07d410;
+  box-shadow: 0 var(--shadow) #92ff97;
+}
+
+.gpaCalc .container form .subject-buttons .sem .checkbox-wrapper input[type="checkbox"]:checked + label:before {
+  width: 0;
+  height: 0;
+}
+
+.gpaCalc
+  .container
+  form
+  .subject-buttons
+  .sem
+  .checkbox-wrapper
+  input[type="checkbox"]:checked
+  + label
+  .tickMark:before,
+.gpaCalc
+  .container
+  form
+  .subject-buttons
+  .sem
+  .checkbox-wrapper
+  input[type="checkbox"]:checked
+  + label
+  .tickMark:after {
+  transform: translate(0);
+  opacity: 1;
+}
diff --git a/client/js/GPACalculator.js b/client/js/GPACalculator.js
index fb0d500..cda2731 100644
--- a/client/js/GPACalculator.js
+++ b/client/js/GPACalculator.js
@@ -85,15 +85,23 @@ document.addEventListener("DOMContentLoaded", function () {
       semesterHeader.textContent = `Semester ${subject.semester}`;
       semesterDiv.appendChild(semesterHeader);
 
-      // Add the div to the subjectButtonsContainer
-      subjectButtonsContainer.appendChild(semesterDiv);
-
       // Update the currentSemesterDiv
       currentSemesterDiv = semesterDiv;
 
+      // Add the div to the subjectButtonsContainer
+      subjectButtonsContainer.appendChild(semesterDiv);
+
       // Create a checkbox to select all subjects of this semester
       const selectAllWrap = document.createElement("div");
       selectAllWrap.classList.add("selectAllWrap");
+
+      const checkBoxWrapAll = document.createElement("div");
+      checkBoxWrapAll.classList.add("checkbox-wrapper");
+
+      const label = document.createElement("label");
+      label.setAttribute("for", `semester-${subject.semester}`);
+      const tickMarkAll = document.createElement("div");
+      tickMarkAll.classList.add("tickMark");
       const input = document.createElement("input");
       input.type = "checkbox";
       input.name = `semester-${subject.semester}`;
@@ -101,7 +109,9 @@ document.addEventListener("DOMContentLoaded", function () {
       input.value = subject.creditHours;
       const pContent = document.createElement("p");
       pContent.textContent = `Select All Semester ${subject.semester}`;
-      selectAllWrap.appendChild(input);
+      checkBoxWrapAll.appendChild(input);
+      checkBoxWrapAll.appendChild(label);
+      selectAllWrap.appendChild(checkBoxWrapAll);
       selectAllWrap.appendChild(pContent);
       currentSemesterDiv.appendChild(selectAllWrap);
     }
@@ -109,14 +119,30 @@ document.addEventListener("DOMContentLoaded", function () {
     // Create a div to wrap each input and label
     const choiceWrapDiv = document.createElement("div");
     choiceWrapDiv.classList.add("choiceWrap");
-
-    const input = document.createElement("input");
-    input.type = "checkbox";
-    input.name = subject.name + "-" + subject.semester;
-    input.id = subject.semester + subject.name;
-    input.value = subject.creditHours;
-    const label = document.createElement("label");
-    label.textContent = `${subject.name} (${subject.creditHours} credit hours)`;
+    //create checkbox wrap
+    const checkboxWrap = document.createElement("div");
+    checkboxWrap.classList.add("checkbox-wrapper");
+
+    const labelCheckBox = document.createElement("label");
+    const tickMark = document.createElement("div");
+    tickMark.classList.add("tickMark");
+
+    const checkboxSubject = document.createElement("input");
+    checkboxSubject.type = "checkbox";
+    checkboxSubject.name = subject.name + "-" + subject.semester;
+    checkboxSubject.id = subject.semester + subject.name;
+    checkboxSubject.value = subject.creditHours;
+
+    //apend the checkbox, label and tickmark inside the checkboxWrap
+    checkboxWrap.appendChild(checkboxSubject);
+    checkboxWrap.appendChild(labelCheckBox);
+    labelCheckBox.appendChild(tickMark);
+
+    // Set the 'for' attribute of the label to match the checkbox 'id'
+    labelCheckBox.setAttribute("for", subject.semester + subject.name);
+
+    const pSubject = document.createElement("p");
+    pSubject.textContent = `${subject.name} (${subject.creditHours} credit hours)`;
     const gradeSelect = document.createElement("select");
     gradeSelect.name = `${subject.name}-grade`;
 
@@ -128,15 +154,15 @@ document.addEventListener("DOMContentLoaded", function () {
     }
 
     // Append input, label, and gradeSelect to the choiceWrapDiv
-    choiceWrapDiv.appendChild(input);
-    choiceWrapDiv.appendChild(label);
+    choiceWrapDiv.appendChild(checkboxWrap);
+    choiceWrapDiv.appendChild(pSubject);
     choiceWrapDiv.appendChild(gradeSelect);
 
     // Hide grade option by default
     gradeSelect.style.display = "none";
-    input.addEventListener("change", function () {
+    checkboxSubject.addEventListener("change", function () {
       // Make grade option visible when checkbox is checked
-      if (input.checked) {
+      if (checkboxSubject.checked) {
         gradeSelect.style.display = "block";
       }
       // Hide grade option when checkbox is unchecked
@@ -146,19 +172,21 @@ document.addEventListener("DOMContentLoaded", function () {
     });
 
     gradeSelect.addEventListener("change", function () {
-      if (input.checked) {
-        const selectedGrade = gradeSelect.value;
-        const gradeValue = grades[selectedGrade];
+      let gradeValue;
+      let selectedGrade;
+      if (labelCheckBox.checked) {
+        selectedGrade = gradeSelect.value;
+        gradeValue = grades[selectedGrade];
         gradesArray[subject.id - 1] = gradeValue; // Update grade in gradesArray
       }
-
-      console.log(gradesArray);
+      console.log(gradeValue, selectedGrade);
     });
-
+    console.log(gradeSelect);
     // Append the choiceWrapDiv to the currentSemesterDiv
     currentSemesterDiv.appendChild(choiceWrapDiv);
   });
 
+
   // Select buttons that id starts with semester
   const selectButtons = document.querySelectorAll('input[id^="semester-"]');
   selectButtons.forEach((button) => {
@@ -200,4 +228,4 @@ document.addEventListener("DOMContentLoaded", function () {
     alert(`GPA: ${result.toFixed(4)}`);
     console.log("Grades Array:", gradesArray);
   });
-});
+});
\ No newline at end of file