diff --git a/index.html b/index.html
index 2dd3467..25c6d92 100644
--- a/index.html
+++ b/index.html
@@ -49,6 +49,6 @@ <h3>history</h3>
      
       </div>
     </div>
-    <script src="index.js"></script>
+    <script type='module'src="index.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/index.js b/index.js
index 44cdb04..2f09708 100644
--- a/index.js
+++ b/index.js
@@ -1,3 +1,5 @@
+import {togglesClearHistoryButton, createHistoryList} from './util.js'
+
 const btns = document.querySelectorAll("[data-value]");
 const historyElement = document.querySelector(".computation-history");
 let screen = document.querySelector("[data-screen]");
@@ -266,21 +268,11 @@ function displayResult(array, outcome) {
   array.push(outcome);
 }
 
-function createHistoryList(array, element, history) {
-  array.forEach((entry) => {
-    history.push(entry);
-    element.innerHTML += `<li> ${entry.join(" ")}</li>`;
-    if (element.childElementCount > HISTORY_LIMIT) {
-      element.firstElementChild.remove();
-    }
-  });
-}
+
 clearHistoryBtn.addEventListener("click", () => {
   historyElement.innerHTML = "";
   togglesClearHistoryButton(historyElement, clearHistoryBtn);
 });
 
-function togglesClearHistoryButton(element, btn) {
-  btn.classList.toggle("display", element.childElementCount > 0);
-}
+
 // functions creations ends
diff --git a/util.js b/util.js
new file mode 100644
index 0000000..585208f
--- /dev/null
+++ b/util.js
@@ -0,0 +1,13 @@
+export function togglesClearHistoryButton(element, btn) {
+    btn.classList.toggle("display", element.childElementCount > 0);
+  }
+
+  export function createHistoryList(array, element, history) {
+    array.forEach((entry) => {
+      history.push(entry);
+      element.innerHTML += `<li> ${entry.join(" ")}</li>`;
+      if (element.childElementCount > 10) {
+        element.firstElementChild.remove();
+      }
+    });
+  }
\ No newline at end of file