diff --git a/index/src/pages/Bubble.js b/index/src/pages/Bubble.js
index 02aac45..d2e133f 100644
--- a/index/src/pages/Bubble.js
+++ b/index/src/pages/Bubble.js
@@ -2,11 +2,12 @@ import React from "react";
 import {arr, originalArray, getArray, bubbleSort} from "./main.js";
 
 function Bubble() {
+    let array = arr.slice();
 
     return (
         <div onLoad={() => {
-            originalArray(arr);
-            bubbleSort(arr);
+            originalArray(array);
+            bubbleSort(array);
         }}  style={{backgroundColor: "white", padding: "2.5%", margin: "2.5%"}}>
         <link rel="stylesheet" href="main.css" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
diff --git a/index/src/pages/Heap.js b/index/src/pages/Heap.js
index 6a9013f..1ee9074 100644
--- a/index/src/pages/Heap.js
+++ b/index/src/pages/Heap.js
@@ -3,11 +3,12 @@ import {arr, originalArray, getArray, heapSort} from "./main.js";
 
 
 function Heap() {
+    let array = arr.slice();
 
     return (
         <div onLoad={() => {
-            originalArray(arr);
-            heapSort(arr);
+            originalArray(array);
+            heapSort(array);
         }}  style={{backgroundColor: "white", padding: "2.5%", margin: "2.5%"}}>
         <link rel="stylesheet" href="main.css" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
diff --git a/index/src/pages/Insertion.js b/index/src/pages/Insertion.js
index 4d41663..427b431 100644
--- a/index/src/pages/Insertion.js
+++ b/index/src/pages/Insertion.js
@@ -2,11 +2,12 @@ import React from "react";
 import {arr, originalArray, getArray, insertionSort} from "./main.js";
 
 function Insertion() {
+    let array = arr.slice();
 
     return (
         <div onLoad={() => {
-            originalArray(arr);
-            insertionSort(arr);
+            originalArray(array);
+            insertionSort(array);
         }}  style={{backgroundColor: "white", padding: "2.5%", margin: "2.5%"}}>
         <link rel="stylesheet" href="main.css" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
diff --git a/index/src/pages/Quick.js b/index/src/pages/Quick.js
index 9dab660..e46655f 100644
--- a/index/src/pages/Quick.js
+++ b/index/src/pages/Quick.js
@@ -2,11 +2,12 @@ import React from "react";
 import {arr, originalArray, getArray, quickSort} from "./main.js";
 
 function Quick() {
+    let array = arr.slice();
     
     return (
         <div onLoad={() => {
-            originalArray(arr);
-            quickSort(arr);
+            originalArray(array);
+            quickSort(array);
         }}  style={{backgroundColor: "white", padding: "2.5%", margin: "2.5%"}}>
         <link rel="stylesheet" href="main.css" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
diff --git a/index/src/pages/Selection.js b/index/src/pages/Selection.js
index bd3a24f..8ced097 100644
--- a/index/src/pages/Selection.js
+++ b/index/src/pages/Selection.js
@@ -2,11 +2,12 @@ import React from "react";
 import {arr, originalArray, getArray, selectionSort} from "./main.js";
 
 function Selection() {
+    let array = arr.slice();
 
     return (
         <div onLoad={() => {
-            originalArray(arr);
-            selectionSort(arr);
+            originalArray(array);
+            selectionSort(array);
         }}  style={{backgroundColor: "white", padding: "2.5%", margin: "2.5%"}}>
         <link rel="stylesheet" href="main.css" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />