diff --git a/css/loading.css b/css/loading.css
index 306f485f..b7c6cb69 100644
--- a/css/loading.css
+++ b/css/loading.css
@@ -76,6 +76,10 @@ body {
     animation-name: worm2;
 }
 
+.stopped {
+    animation-play-state: paused;
+}
+
 @keyframes worm1 {
     from {
         stroke-dashoffset: 0;
@@ -136,7 +140,6 @@ section {
     position: absolute;
     top: 0;
     left: 0;
-    z-index: 5;
     overflow: hidden;
 }
 
@@ -151,7 +154,12 @@ section {
     width: 100%;
     height: 100%;
     overflow: hidden;
-    z-index: 9;
+    z-index: 1;
+
+    /* this makes browser use GPU acceleration for blur */
+    will-change: contents;
+
+    filter: blur(2.5px);
 }
 
 .hexagonGrid .row {
diff --git a/index.html b/index.html
index d9b88593..8df4e2fb 100644
--- a/index.html
+++ b/index.html
@@ -7,17 +7,43 @@
     <meta name="og:image" content="favicon.png">
 
     <link href="css/loading.css" rel="preload" as="style" onload="this.rel = 'stylesheet'">
-    <noscript>
-        <link href="css/loading.css" rel="stylesheet">
-    </noscript>
+    
+    <link href="js/loading.js" rel="preload" as="script">
+    <link href="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js" rel="preload" as="script">
 </head>
 <body>
+    <noscript>
+        <p id="noscript-text">
+            This site requires you to be able to run JavaScript.
+        </p>
+        <style>
+            body *:not(noscript) {
+                display: none;
+            }
+
+            #noscript-text {
+                display: block;
+                position: absolute;
+                top: 0;
+                left: 0;
+                margin: 0;
+                padding: 0;
+                box-sizing: border-box;
+                height: 100vh;
+                width: 100vw;
+                background-color: black;
+                color: white;
+                z-index: 999;
+            }
+        </style>
+    </noscript>
+
     <div class="loading">
         <div>
             <div class="loading-tip">
                 <script>
                     const tips = ["Press CTRL+C to cloak your current tab","Press CTRL+M to mask your current tab", "Press CTRL+B to go back to the home page", "Join our discord server!", "Make sure to enable popups for automatic cloak", "Why are you here?"]
-                    document.getElementsByClassName("loading-tip")[0].textContent = tips[Math.floor(Math.random() * tips.length)];
+                    document.getElementsByClassName("loading-tip")[0].textContent = "Loading...\n" + tips[Math.floor(Math.random() * tips.length)];
                 </script>
             </div>
             <div class="loading-infinity">
@@ -55,10 +81,46 @@
         </div>
     </div>
     <section>
+        
+    </section>
+    <section id="everything-else">
         <canvas class="particles"></canvas>
         
         <div class="hexagonGrid"></div>
+
+        <!-- TEMPORARY!!! increases loading times to demonstrate loading screen -->
+        <img src="https://random.imagecdn.app/1500/1500">
     </section>
-    <script src="js/loading.js" async defer></script>
+
+    <!-- loading.js file and jQuery are preloaded -->
+    <script defer>
+        const loading = document.createElement("script");
+        loading.src = "js/loading.js";
+        document.body.appendChild(loading);
+
+        const jquery = document.createElement("script");
+        jquery.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js";
+        document.body.appendChild(jquery);
+        
+        jquery.onload = () => {            
+            $(window).on("load", () => {
+                $(".track").attr("stroke", "url(#grad2)");
+                $(".worm1").hide();
+                $(".worm2").hide();
+
+                $(".loading").fadeOut({
+                    duration: 300,
+                    /*complete: () => {
+                        setTimeout(500, () => {
+                            $("#everything-else").fadeIn({
+                                duration: 500,
+                                easing: "easeInOutSine"
+                            });
+                        });
+                    }*/
+                });
+            });
+        }
+    </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/js/loading.js b/js/loading.js
index c1db61f6..000d7e4d 100644
--- a/js/loading.js
+++ b/js/loading.js
@@ -2,7 +2,7 @@ function changeLoadingTip() {
     const tips = ["Press CTRL+C to cloak your current tab","Press CTRL+M to mask your current tab", "Press CTRL+B to go back to the home page", "Join our discord server!", "Make sure to enable popups for automatic cloak", "Why are you here?"]
     const element = document.getElementsByClassName("loading-tip")[0];
 
-    element.textContent =  tips[Math.floor(Math.random() * tips.length)];
+    element.textContent =  "Loading... \n" + tips[Math.floor(Math.random() * tips.length)];
 }
 
 let changeTip = setInterval(() => {
@@ -32,10 +32,9 @@ window.addEventListener('mousemove', function(event) {
     mouse.x = event.x;
     mouse.y = event.y;
     mouse.radius = 170;
-    console.log(mouse.radius);
 });
 
-document.onmousemove = (function(event) {
+document.onmousemove = (function(_) {
     var onmousestop = function() {
         mouse.radius = 0;
     }, thread;
