diff --git a/css/404.css b/css/404.css
index 9012320..88797e6 100644
--- a/css/404.css
+++ b/css/404.css
@@ -35,7 +35,7 @@ body{
 #error_text span {
     color: #272341;
     background-color: none;
-    font-family: Montserrat;
+    font-family: Montserrat,sans-serif;
     font-weight: 700;
 }
 
diff --git a/css/navbar.css b/css/navbar.css
index d02a07c..5d27332 100644
--- a/css/navbar.css
+++ b/css/navbar.css
@@ -11,7 +11,7 @@
   background-color: #ffffff70;
   width: 100%;
 
-  font-family: Montserrat;
+  font-family: Montserrat,sans-serif;
   padding: 1em;
   transition: 0.3s;
 }
diff --git a/css/style.css b/css/style.css
index 9cbfa6f..0640a79 100644
--- a/css/style.css
+++ b/css/style.css
@@ -141,7 +141,7 @@ a:visited {
   background-color: none;
   color: #272341;
   font-size: 56px;
-  font-family: Montserrat;
+  font-family: Montserrat,sans-serif;
   font-weight: 700;
   align-items: center;
   justify-content: center;
@@ -180,7 +180,7 @@ a:visited {
   border: 2px solid #01b3af;
   color: #01b3af;
   font-size: 24px;
-  font-family: Montserrat;
+  font-family: Montserrat,sans-serif;
   font-weight: 700;
   cursor: pointer;
   background: linear-gradient(to right, #01b3af 50%, #fff 50%);
@@ -283,7 +283,7 @@ a:visited {
   height: 75px;
   align-items: center;
   justify-content: center;
-  font-family: Montserrat;
+  font-family: Montserrat,sans-serif;
   font-weight: bold;
   font-size: 55px;
   background-color: none;
@@ -626,7 +626,7 @@ a:visited {
   position: relative;
   width: 100%;
   height: fit-content;
-  font-family: "Montserrat";
+  font-family: "Montserrat",sans-serif;
   font-weight: 500;
   font-size: 18px;
   color: #01b3af;
@@ -637,7 +637,7 @@ a:visited {
   color: #6b7280;
   margin-top: 5px;
   display: flex;
-  font-family: "Montserrat";
+  font-family: "Montserrat",sans-serif;
   font-weight: 500;
   font-size: 13px;
 }
@@ -692,7 +692,7 @@ a:visited {
   height: 75px;
   align-items: center;
   justify-content: center;
-  font-family: Montserrat;
+  font-family: Montserrat,sans-serif;
   font-weight: bold;
   font-size: 55px;
   background-color: none;
@@ -789,7 +789,7 @@ a:visited {
   height: 75px;
   align-items: center;
   justify-content: center;
-  font-family: Montserrat;
+  font-family: Montserrat,sans-serif;
   font-weight: bold;
   font-size: 55px;
   background-color: none;
@@ -827,8 +827,6 @@ a:visited {
   background: #f8f8f8;
   padding: 20px;
   border-radius: 10px;
-  transition: transform 0.3s;
-  /* border: 1.4px solid #f0f0f0; */
   cursor: pointer;
   transition: 0.3s;
 }
@@ -871,13 +869,12 @@ a:visited {
   color: #777;
   justify-content: center;
   align-items: center;
-  font-family: "Montserrat" !important;
+  font-family: "Montserrat",sans-serif !important;
 }
 
 @media screen and (max-width: 915px) {
   .servicesC .title {
     font-size: 43px;
-    left: 0;
     margin: auto;
     left: -10px !important;
     width: 100%;
@@ -914,7 +911,7 @@ a:visited {
   height: 75px;
   align-items: center;
   justify-content: center;
-  font-family: Montserrat;
+  font-family: Montserrat,sans-serif;
   font-weight: bold;
   font-size: 55px;
   background-color: none;
@@ -958,7 +955,6 @@ a:visited {
 
   background-color: #f8f8f8;
 
-  transition: transform 0.3s;
   /* border: 1.4px solid #f0f0f0; */
   cursor: pointer;
   transition: 0.3s;
@@ -997,7 +993,6 @@ a:visited {
   color: #6b7280;
   font-size: 11px;
   font-weight: bold;
-  display: flex;
 }
 
 .skillsC .container .boxes .right {
@@ -1010,7 +1005,7 @@ a:visited {
   justify-content: start;
   font-size: 15px;
   padding-left: 10px;
-  font-family: "Montserrat";
+  font-family: "Montserrat",sans-serif;
   font-weight: normal;
   letter-spacing: 0px;
   color: #6b7280;
@@ -1325,7 +1320,7 @@ a:visited {
   font-size: 14px;
   font-weight: bold;
   color: #3a3947;
-  font-family: Montserrat;
+  font-family: Montserrat,sans-serif;
   letter-spacing: 0px;
   margin-bottom: 8px;
 }
@@ -1334,7 +1329,7 @@ a:visited {
   position: relative;
   display: flex;
   font-size: 14px;
-  font-family: Montserrat;
+  font-family: Montserrat,sans-serif;
   font-weight: normal;
   color: #96989b;
   letter-spacing: 0px;
@@ -1406,7 +1401,7 @@ a:visited {
   align-items: start;
   justify-content: start;
   font-size: 14px;
-  font-family: Montserrat !important;
+  font-family: Montserrat,sans-serif !important;
   font-weight: normal !important;
   color: #96989b !important;
   letter-spacing: 0px;
diff --git a/js/404.js b/js/404.js
index 2742de9..994d724 100644
--- a/js/404.js
+++ b/js/404.js
@@ -1,23 +1,67 @@
 'use strict';
-var e, t;
-new function (e) {
-    const t = "ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`|".split(""),
-        n = e.querySelector(".source"),
-        o = e.querySelector(".target");
-    let r, i, l, s = 0;
+
+(function (e) {
+    const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`|".split("");
+    const source = e.querySelector(".source");
+    const target = e.querySelector(".target");
+
+    let interval, timeout, incrementInterval;
+    let index = 0;
+    let self = this;
+
     this.start = function () {
-        n.style.display = "none", o.style.display = "block", r = window.setInterval((() => {
-            s <= n.innerText.length && (o.innerText = n.innerText.substring(0, s) + function (e) {
-                let n = "";
-                for (let o = 0; o < e; o++) n += t[Math.floor(Math.random() * t.length)];
-                return n
-            }(n.innerText.length - s))
-        }), 15), i = window.setTimeout((() => {
-            l = window.setInterval((() => {
-                s > n.innerText.length - 1 && this.stop(), s++
-            }), 70)
-        }), 350)
-    }, this.stop = function () {
-        n.style.display = "block", o.style.display = "none", o.innerText = "", s = 0, void 0 !== r && (window.clearInterval(r), r = void 0), void 0 !== l && (window.clearInterval(l), l = void 0), void 0 !== i && (window.clearInterval(i), i = void 0)
+        source.style.display = "none";
+        target.style.display = "block";
+
+        // Random character substitution effect
+        interval = setInterval(() => {
+            if (index <= source.innerText.length) {
+                target.innerText = source.innerText.substring(0, index) + getRandomString(source.innerText.length - index);
+            }
+        }, 15);
+
+        // Delayed start of revealing the original text
+        timeout = setTimeout(() => {
+            incrementInterval = setInterval(() => {
+                if (index > source.innerText.length - 1) {
+                    self.stop();
+                }
+                index++;
+            }, 70);
+        }, 350);
+    };
+
+    this.stop = function () {
+        source.style.display = "block";
+        target.style.display = "none";
+        target.innerText = "";
+        index = 0;
+
+        if (interval !== undefined) clearInterval(interval);
+        if (incrementInterval !== undefined) clearInterval(incrementInterval);
+        if (timeout !== undefined) clearTimeout(timeout);
+    };
+
+    function getRandomString(length) {
+        let str = "";
+        for (let i = 0; i < length; i++) {
+            str += chars[Math.floor(Math.random() * chars.length)];
+        }
+        return str;
     }
-}(document.getElementById("error_text")).start(), "en" !== navigator.language.substring(0, 2).toLowerCase() && (e = document.createElement("script"), t = document.body, e.src = "", e.async = e.defer = !0, e.addEventListener("load", (() => t.removeChild(e))), t.appendChild(e));
\ No newline at end of file
+
+    this.start();
+})(document.getElementById("error_text"));
+
+// Handle different language settings
+if (navigator.language.substring(0, 2).toLowerCase() !== "en") {
+    let script = document.createElement("script");
+    let body = document.body;
+
+    script.src = "";  // Add the correct script source URL here
+    script.async = true;
+    script.defer = true;
+
+    script.addEventListener("load", () => body.removeChild(script));
+    body.appendChild(script);
+}
diff --git a/js/typingAnimation.js b/js/typingAnimation.js
index 808f337..bb5b18a 100644
--- a/js/typingAnimation.js
+++ b/js/typingAnimation.js
@@ -1,5 +1,5 @@
 // Custom the typed strings array based on your roles
-var typed = new Typed("#role", {
+let typed = new Typed("#role", {
   strings: ["the Unknown Developer", "a UI/UX Designer", "a Youtuber"],
   typeSpeed: 210,
   backSpeed: 40,