diff --git a/osinaweb/static/js/points.js b/osinaweb/static/js/points.js
new file mode 100644
index 00000000..1e0bafc7
--- /dev/null
+++ b/osinaweb/static/js/points.js
@@ -0,0 +1,17 @@
+
+function setTextColor(color) {
+    document.querySelector('.pointTotalTime').classList.remove('text-green-700', 'text-red-500');
+    document.querySelector('.pointTotalTime').classList.add(color);
+}
+
+document.getElementById('startPointButton').addEventListener('click', function() {
+    document.getElementById('startPointButton').style.display = 'none';
+    document.getElementById('pausePointButton').style.display = 'block';
+    setTextColor('text-green-700');
+});
+
+document.getElementById('pausePointButton').addEventListener('click', function() {
+    document.getElementById('pausePointButton').style.display = 'none';
+    document.getElementById('startPointButton').style.display = 'block';
+    setTextColor('text-red-500');
+});
\ No newline at end of file
diff --git a/osinaweb/templates/popup_modals/showpoints-modal.html b/osinaweb/templates/popup_modals/showpoints-modal.html
index 0ac9152a..19474eb4 100644
--- a/osinaweb/templates/popup_modals/showpoints-modal.html
+++ b/osinaweb/templates/popup_modals/showpoints-modal.html
@@ -49,11 +49,13 @@
                     </div> -->
                     <div class="flex justify-end items-center gap-2">
                         <button
-                            class="w-[40px] h-[40px] rounded-full bg-gray-50 shadow-md text-gray-500 border border-gray-100 flex justify-center items-center hover:scale-105 transition-transform duration-300" id="startPointButton">
+                            class="w-[40px] h-[40px] rounded-full bg-gray-50 shadow-md text-gray-500 border border-gray-100 flex justify-center items-center hover:scale-105 transition-transform duration-300"
+                            id="startPointButton">
                             <i class="fa fa-play"></i>
                         </button>
                         <button
-                            class="w-[40px] h-[40px] rounded-full bg-gray-50 shadow-md text-gray-500 border border-gray-100 justify-center items-center hidden hover:scale-105 transition-transform duration-300" id="pausePointButton">
+                            class="w-[40px] h-[40px] rounded-full bg-gray-50 shadow-md text-gray-500 border border-gray-100 justify-center items-center hidden hover:scale-105 transition-transform duration-300"
+                            id="pausePointButton">
                             <i class="fa fa-pause"></i>
                         </button>
                         <button
@@ -78,42 +80,11 @@
                 </div>
 
                 <div class="w-full">
-                    <p class="text-gray-500 text-sm">Total Time: <span class="font-semibold pointTotalTime text-red-500">0min</span></p>
+                    <p class="text-gray-500 text-sm">Total Time: <span
+                            class="font-semibold pointTotalTime text-red-500">0min</span></p>
                 </div>
             </div>
 
-            <script>
-                function setTextColor(color) {
-                    document.querySelector('.pointTotalTime').classList.remove('text-green-700', 'text-red-500');
-                    document.querySelector('.pointTotalTime').classList.add(color);
-                }
-            
-                document.getElementById('startPointButton').addEventListener('click', function() {
-                    // Hide the play button
-                    document.getElementById('startPointButton').style.display = 'none';
-                    
-                    // Display the pause button
-                    document.getElementById('pausePointButton').style.display = 'block';
-            
-                    // Set the text color to green
-                    setTextColor('text-green-700');
-                });
-            
-                document.getElementById('pausePointButton').addEventListener('click', function() {
-                    // Hide the pause button
-                    document.getElementById('pausePointButton').style.display = 'none';
-                    
-                    // Display the play button
-                    document.getElementById('startPointButton').style.display = 'block';
-            
-                    // Set the text color to red
-                    setTextColor('text-red-500');
-                });
-            </script>
-            
-            
-            
-
             {% endif %}
 
             {% if point.status == 'Completed' %}
@@ -156,6 +127,10 @@
             {% endfor %}
         </div>
     </div>
+
+    <!---------------------- JS SCRIPTS -------------------->
+    
+    <script type="text/javascript" src='{% static "js/points.js" %}'></script>
 </body>
 
 </html>
\ No newline at end of file