diff --git a/ContactUs.html b/ContactUs.html
index fa918c1..fb815dd 100644
--- a/ContactUs.html
+++ b/ContactUs.html
@@ -4,9 +4,57 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Contact Us - Chaos</title>
+    <link rel="stylesheet" href="preloaderStyle.css">
     <link rel="stylesheet" href="css/contactus.css">
 </head>
 <body>
+    <!-- preloader -->
+    <div class="container">
+        <div class="preloader">
+            <div class="preloader__wheel-wrapper">
+                <div class="preloader__wheel"><span class="preloader__content">l</span>
+                    <div class="preloader__inner-wheel"></div>
+                    <div class="preloader__second-inner-whell"></div>
+                </div>
+            </div>
+            <div class="preloader__wheel-wrapper">
+                <div class="preloader__wheel"><span class="preloader__content">o</span>
+                    <div class="preloader__inner-wheel"></div>
+                    <div class="preloader__second-inner-whell"></div>
+                </div>
+            </div>
+            <div class="preloader__wheel-wrapper">
+                <div class="preloader__wheel"><span class="preloader__content">a</span>
+                    <div class="preloader__inner-wheel"></div>
+                    <div class="preloader__second-inner-whell"></div>
+                </div>
+            </div>
+            <div class="preloader__wheel-wrapper">
+                <div class="preloader__wheel"><span class="preloader__content">d</span>
+                    <div class="preloader__inner-wheel"></div>
+                    <div class="preloader__second-inner-whell"></div>
+                </div>
+            </div>
+            <div class="preloader__wheel-wrapper">
+                <div class="preloader__wheel"><span class="preloader__content">i</span>
+                    <div class="preloader__inner-wheel"></div>
+                    <div class="preloader__second-inner-whell"></div>
+                </div>
+            </div>
+            <div class="preloader__wheel-wrapper">
+                <div class="preloader__wheel"><span class="preloader__content">n</span>
+                    <div class="preloader__inner-wheel"></div>
+                    <div class="preloader__second-inner-whell"></div>
+                </div>
+            </div>
+            <div class="preloader__wheel-wrapper">
+                <div class="preloader__wheel"><span class="preloader__content">g</span>
+                    <div class="preloader__inner-wheel"></div>
+                    <div class="preloader__second-inner-whell"></div>
+                </div>
+            </div>
+        </div>
+    </div>
     <div class="contact-form-container">
         <h1>Contact Us</h1>
         <form id="contactForm">
@@ -28,6 +76,7 @@ <h1>Contact Us</h1>
         </form>
         <div id="popup" class="popup"></div>
     </div>
+    <script src="preloader.js"></script>
     <script src="js/script.js"></script>
     <script src="js/night_time.js"></script>
 </body>
diff --git a/Timeline.html b/Timeline.html
index 9564d99..ba544a8 100644
--- a/Timeline.html
+++ b/Timeline.html
@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Chaotic Timeline</title>
+    <link rel="stylesheet" href="preloaderStyle.css">
     <style>
         * {
             margin: 0;
@@ -134,6 +135,53 @@
 </head>
 
 <body>
+    <!-- preloader -->
+    <div class="container">
+        <div class="preloader">
+            <div class="preloader__wheel-wrapper">
+                <div class="preloader__wheel"><span class="preloader__content">l</span>
+                    <div class="preloader__inner-wheel"></div>
+                    <div class="preloader__second-inner-whell"></div>
+                </div>
+            </div>
+            <div class="preloader__wheel-wrapper">
+                <div class="preloader__wheel"><span class="preloader__content">o</span>
+                    <div class="preloader__inner-wheel"></div>
+                    <div class="preloader__second-inner-whell"></div>
+                </div>
+            </div>
+            <div class="preloader__wheel-wrapper">
+                <div class="preloader__wheel"><span class="preloader__content">a</span>
+                    <div class="preloader__inner-wheel"></div>
+                    <div class="preloader__second-inner-whell"></div>
+                </div>
+            </div>
+            <div class="preloader__wheel-wrapper">
+                <div class="preloader__wheel"><span class="preloader__content">d</span>
+                    <div class="preloader__inner-wheel"></div>
+                    <div class="preloader__second-inner-whell"></div>
+                </div>
+            </div>
+            <div class="preloader__wheel-wrapper">
+                <div class="preloader__wheel"><span class="preloader__content">i</span>
+                    <div class="preloader__inner-wheel"></div>
+                    <div class="preloader__second-inner-whell"></div>
+                </div>
+            </div>
+            <div class="preloader__wheel-wrapper">
+                <div class="preloader__wheel"><span class="preloader__content">n</span>
+                    <div class="preloader__inner-wheel"></div>
+                    <div class="preloader__second-inner-whell"></div>
+                </div>
+            </div>
+            <div class="preloader__wheel-wrapper">
+                <div class="preloader__wheel"><span class="preloader__content">g</span>
+                    <div class="preloader__inner-wheel"></div>
+                    <div class="preloader__second-inner-whell"></div>
+                </div>
+            </div>
+        </div>
+    </div>
     <div class="timeline-container">
         <h1>Chaotic Timeline of Historical Events</h1>
         <div class="timeline">
@@ -163,6 +211,7 @@ <h1>Chaotic Timeline of Historical Events</h1>
                 Pandemic</div>
         </div>
     </div>
+    <script src="preloader.js"></script>
     <script>
         document.addEventListener("DOMContentLoaded", () => {
             const events = document.querySelectorAll(".even");
diff --git a/hypnotic.html b/hypnotic.html
index 3b00df1..a1adaeb 100644
--- a/hypnotic.html
+++ b/hypnotic.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Hypnotic Chaos</title>
+    <link rel="stylesheet" href="preloaderStyle.css">
     <style>
         .parent {
             width: 100vw;
@@ -52,11 +53,59 @@
 </head>
 
 <body class="parent">
+    <!-- preloader -->
+    <div class="container">
+        <div class="preloader">
+            <div class="preloader__wheel-wrapper">
+                <div class="preloader__wheel"><span class="preloader__content">l</span>
+                    <div class="preloader__inner-wheel"></div>
+                    <div class="preloader__second-inner-whell"></div>
+                </div>
+            </div>
+            <div class="preloader__wheel-wrapper">
+                <div class="preloader__wheel"><span class="preloader__content">o</span>
+                    <div class="preloader__inner-wheel"></div>
+                    <div class="preloader__second-inner-whell"></div>
+                </div>
+            </div>
+            <div class="preloader__wheel-wrapper">
+                <div class="preloader__wheel"><span class="preloader__content">a</span>
+                    <div class="preloader__inner-wheel"></div>
+                    <div class="preloader__second-inner-whell"></div>
+                </div>
+            </div>
+            <div class="preloader__wheel-wrapper">
+                <div class="preloader__wheel"><span class="preloader__content">d</span>
+                    <div class="preloader__inner-wheel"></div>
+                    <div class="preloader__second-inner-whell"></div>
+                </div>
+            </div>
+            <div class="preloader__wheel-wrapper">
+                <div class="preloader__wheel"><span class="preloader__content">i</span>
+                    <div class="preloader__inner-wheel"></div>
+                    <div class="preloader__second-inner-whell"></div>
+                </div>
+            </div>
+            <div class="preloader__wheel-wrapper">
+                <div class="preloader__wheel"><span class="preloader__content">n</span>
+                    <div class="preloader__inner-wheel"></div>
+                    <div class="preloader__second-inner-whell"></div>
+                </div>
+            </div>
+            <div class="preloader__wheel-wrapper">
+                <div class="preloader__wheel"><span class="preloader__content">g</span>
+                    <div class="preloader__inner-wheel"></div>
+                    <div class="preloader__second-inner-whell"></div>
+                </div>
+            </div>
+        </div>
+    </div>
     <div class="content">
         <div class="chaotic-text top-text">Welcome to Chaos! Where sanity is overrated.</div>
         <canvas id="myCanvas" width="300" height="300"></canvas>
         <div class="chaotic-text bottom-text">Relax? Sure, if you like chaos!</div>
     </div>
+    <script src="preloader.js"></script>
     <script>
         window.onload = function() {
             var STEPS = 1;
diff --git a/index.html b/index.html
index a2ddc82..6360eea 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>ChaosWeb - The Disorderly UI Experiment</title>
+    <link rel="stylesheet" href="preloaderStyle.css">
     <link rel="stylesheet" href="css/style.css">
 
 <link rel="shortcut icon" href="./assets/logo/favicon.ico" type="image/x-icon">
@@ -11,6 +12,53 @@
 </head>
 <body>
     <!--ALL SVGs taken from https://undraw.co/-->
+<!-- preloader -->
+    <div class="container">
+        <div class="preloader">
+            <div class="preloader__wheel-wrapper">
+                <div class="preloader__wheel"><span class="preloader__content">l</span>
+                    <div class="preloader__inner-wheel"></div>
+                    <div class="preloader__second-inner-whell"></div>
+                </div>
+            </div>
+            <div class="preloader__wheel-wrapper">
+                <div class="preloader__wheel"><span class="preloader__content">o</span>
+                    <div class="preloader__inner-wheel"></div>
+                    <div class="preloader__second-inner-whell"></div>
+                </div>
+            </div>
+            <div class="preloader__wheel-wrapper">
+                <div class="preloader__wheel"><span class="preloader__content">a</span>
+                    <div class="preloader__inner-wheel"></div>
+                    <div class="preloader__second-inner-whell"></div>
+                </div>
+            </div>
+            <div class="preloader__wheel-wrapper">
+                <div class="preloader__wheel"><span class="preloader__content">d</span>
+                    <div class="preloader__inner-wheel"></div>
+                    <div class="preloader__second-inner-whell"></div>
+                </div>
+            </div>
+            <div class="preloader__wheel-wrapper">
+                <div class="preloader__wheel"><span class="preloader__content">i</span>
+                    <div class="preloader__inner-wheel"></div>
+                    <div class="preloader__second-inner-whell"></div>
+                </div>
+            </div>
+            <div class="preloader__wheel-wrapper">
+                <div class="preloader__wheel"><span class="preloader__content">n</span>
+                    <div class="preloader__inner-wheel"></div>
+                    <div class="preloader__second-inner-whell"></div>
+                </div>
+            </div>
+            <div class="preloader__wheel-wrapper">
+                <div class="preloader__wheel"><span class="preloader__content">g</span>
+                    <div class="preloader__inner-wheel"></div>
+                    <div class="preloader__second-inner-whell"></div>
+                </div>
+            </div>
+        </div>
+    </div>
     <nav class="nav">
         <img src="./assets/logo/ChaosWeb.svg" alt="ChaosWeb-Logo" id="chaos-logo">
         <h1 id="chaos-header">ChaosWeb - The Disorderly UI Experiment</h1>
@@ -49,7 +97,7 @@ <h1 id="chaos-header">ChaosWeb - The Disorderly UI Experiment</h1>
             <span>Hypnotic Chaos</span>
         </div>
     </div>
-
+    <script src="preloader.js"></script>
     <script src="js/script.js"></script>
     <script src="js/night_time.js" defer></script>
 </body>
diff --git a/night_time.html b/night_time.html
index 18c6139..0f807a8 100644
--- a/night_time.html
+++ b/night_time.html
@@ -4,15 +4,64 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>ChaosWeb - The Disorderly UI Experiment</title>
+    <link rel="stylesheet" href="preloaderStyle.css">
     <link rel="stylesheet" href="style1.css">
 
 </head>
 <body>
+    <!-- preloader -->
+    <div class="container">
+        <div class="preloader">
+            <div class="preloader__wheel-wrapper">
+                <div class="preloader__wheel"><span class="preloader__content">l</span>
+                    <div class="preloader__inner-wheel"></div>
+                    <div class="preloader__second-inner-whell"></div>
+                </div>
+            </div>
+            <div class="preloader__wheel-wrapper">
+                <div class="preloader__wheel"><span class="preloader__content">o</span>
+                    <div class="preloader__inner-wheel"></div>
+                    <div class="preloader__second-inner-whell"></div>
+                </div>
+            </div>
+            <div class="preloader__wheel-wrapper">
+                <div class="preloader__wheel"><span class="preloader__content">a</span>
+                    <div class="preloader__inner-wheel"></div>
+                    <div class="preloader__second-inner-whell"></div>
+                </div>
+            </div>
+            <div class="preloader__wheel-wrapper">
+                <div class="preloader__wheel"><span class="preloader__content">d</span>
+                    <div class="preloader__inner-wheel"></div>
+                    <div class="preloader__second-inner-whell"></div>
+                </div>
+            </div>
+            <div class="preloader__wheel-wrapper">
+                <div class="preloader__wheel"><span class="preloader__content">i</span>
+                    <div class="preloader__inner-wheel"></div>
+                    <div class="preloader__second-inner-whell"></div>
+                </div>
+            </div>
+            <div class="preloader__wheel-wrapper">
+                <div class="preloader__wheel"><span class="preloader__content">n</span>
+                    <div class="preloader__inner-wheel"></div>
+                    <div class="preloader__second-inner-whell"></div>
+                </div>
+            </div>
+            <div class="preloader__wheel-wrapper">
+                <div class="preloader__wheel"><span class="preloader__content">g</span>
+                    <div class="preloader__inner-wheel"></div>
+                    <div class="preloader__second-inner-whell"></div>
+                </div>
+            </div>
+        </div>
+    </div>
     <div class="moon1">
         <img src="assets/moon1.png" width="650px"></img>
     </div>
     <div class="text">Too late to reach us.</div>
     <div class="text">Come back during daylight.</div>
 </body>
+<script src="preloader.js"></script>
 <script src="js/night_time.js"></script>
 </html>
\ No newline at end of file
diff --git a/preloader.js b/preloader.js
new file mode 100644
index 0000000..bfff775
--- /dev/null
+++ b/preloader.js
@@ -0,0 +1,6 @@
+// preloader styling 
+
+let preloader = document.querySelector(".container");
+window.addEventListener("load",function(e){
+    preloader.style.display = "none";
+});
\ No newline at end of file
diff --git a/preloaderStyle.css b/preloaderStyle.css
new file mode 100644
index 0000000..013d537
--- /dev/null
+++ b/preloaderStyle.css
@@ -0,0 +1,221 @@
+/* Scroll Bar Styling */
+::-webkit-scrollbar{
+    width: 0.8em;
+}
+::-webkit-scrollbar-track{
+    background: transparent;
+    border-radius: 100vw;
+    margin-block:.5em ;
+    scroll-behavior:smooth;
+}
+::-webkit-scrollbar-thumb{
+    background-color:#b21af3 ;
+    border-radius: 10vw;
+} 
+@supports (scrollbar-color:#b21af3){
+    *{
+        scrollbar-color:#b21af3;
+    }
+}
+
+@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
+.container{
+	 background-color: #222;
+	 margin: 0;
+	 padding: 0;
+	 font-family: 'Josefin Sans', sans-serif;
+	 box-sizing: border-box;
+     height: 100vh;
+    width: 100%;
+    position: fixed;
+    z-index: 200;
+    min-height: 100vh;
+}
+ *, *::before, *::after {
+	 box-sizing: inherit;
+}
+ .preloader {
+	 position: absolute;
+	 left: 50%;
+	 /* top: 10%; */
+	 transform: translate(-50%, -50%);
+}
+ .preloader__content {
+	 position: absolute;
+	 color: #f4511e;
+	 top: -20px;
+	 font-size: 1.2em;
+	 text-transform: uppercase;
+}
+ .preloader__wheel {
+	 width: 60px;
+	 height: 60px;
+	 background: #f4511e;
+	 z-index: 2;
+}
+ .preloader__wheel-wrapper {
+	 position: absolute;
+	 z-index: 1;
+}
+ .preloader__wheel-wrapper:nth-child(2n) {
+	 right: 10px;
+}
+ .preloader__wheel-wrapper:nth-child(2n):before {
+	 content: '';
+	 top: -15px;
+	 left: 2px;
+	 position: absolute;
+	 width: 110px;
+	 height: 1px;
+	 background-color: #dd2c00;
+	 transform: rotate(-50.5deg);
+	 z-index: 5;
+}
+ .preloader__wheel-wrapper:nth-child(2n):after {
+	 content: '';
+	 position: absolute;
+	 width: 110px;
+	 height: 1px;
+	 background-color: #dd2c00;
+	 transform: rotate(-33.5deg);
+	 z-index: 5;
+	 left: 23px;
+	 top: 10px;
+}
+ .preloader__wheel-wrapper:nth-child(2n+1) {
+	 left: 10px;
+}
+ .preloader__wheel-wrapper:nth-child(2n+1):before {
+	 content: '';
+	 top: 9px;
+	 left: -74px;
+	 position: absolute;
+	 width: 110px;
+	 height: 1px;
+	 background-color: #dd2c00;
+	 transform: rotate(33deg);
+	 z-index: 5;
+}
+ .preloader__wheel-wrapper:nth-child(2n+1):after {
+	 content: '';
+	 position: absolute;
+	 width: 110px;
+	 height: 1px;
+	 background-color: #dd2c00;
+	 transform: rotate(49deg);
+	 z-index: 5;
+	 top: -17.5px;
+	 left: -54px;
+}
+ .preloader__wheel-wrapper:nth-child(1):after {
+	 display: none;
+}
+ .preloader__wheel-wrapper:nth-child(1):before {
+	 display: none;
+}
+ .preloader__inner-wheel, .preloader__second-inner-whell {
+	 width: 20px;
+	 height: 20px;
+	 background-color: #dd2c00;
+	 position: absolute;
+	 left: 20px;
+	 top: 20px;
+	 transform: rotate(45deg);
+	 border-radius: 50%;
+	 z-index: 10;
+}
+ .preloader__second-inner-whell {
+	 width: 50px;
+	 height: 50px;
+	 left: 5px;
+	 top: 5px;
+	 background-color: #ff7043;
+	 border: 1px solid #dd2c00;
+	 z-index: 2;
+}
+ .preloader .preloader__wheel-wrapper:nth-child(1) {
+	 top: 70px;
+}
+ .preloader .preloader__wheel-wrapper:nth-child(1) .preloader__content {
+	 animation: wheel_rotate 7s linear infinite;
+}
+ .preloader .preloader__wheel-wrapper:nth-child(1) .preloader__wheel {
+	 animation: _wheel_rotate 7s linear infinite;
+}
+ .preloader .preloader__wheel-wrapper:nth-child(2) {
+	 top: 140px;
+}
+ .preloader .preloader__wheel-wrapper:nth-child(2) .preloader__content {
+	 animation: wheel_rotate 3.5s linear infinite;
+}
+ .preloader .preloader__wheel-wrapper:nth-child(2) .preloader__wheel {
+	 animation: _wheel_rotate 3.5s linear infinite;
+}
+ .preloader .preloader__wheel-wrapper:nth-child(3) {
+	 top: 210px;
+}
+ .preloader .preloader__wheel-wrapper:nth-child(3) .preloader__content {
+	 animation: wheel_rotate 2.3333333333s linear infinite;
+}
+ .preloader .preloader__wheel-wrapper:nth-child(3) .preloader__wheel {
+	 animation: _wheel_rotate 2.3333333333s linear infinite;
+}
+ .preloader .preloader__wheel-wrapper:nth-child(4) {
+	 top: 280px;
+}
+ .preloader .preloader__wheel-wrapper:nth-child(4) .preloader__content {
+	 animation: wheel_rotate 1.75s linear infinite;
+}
+ .preloader .preloader__wheel-wrapper:nth-child(4) .preloader__wheel {
+	 animation: _wheel_rotate 1.75s linear infinite;
+}
+ .preloader .preloader__wheel-wrapper:nth-child(5) {
+	 top: 350px;
+}
+ .preloader .preloader__wheel-wrapper:nth-child(5) .preloader__content {
+	 animation: wheel_rotate 1.4s linear infinite;
+}
+ .preloader .preloader__wheel-wrapper:nth-child(5) .preloader__wheel {
+	 animation: _wheel_rotate 1.4s linear infinite;
+}
+ .preloader .preloader__wheel-wrapper:nth-child(6) {
+	 top: 420px;
+}
+ .preloader .preloader__wheel-wrapper:nth-child(6) .preloader__content {
+	 animation: wheel_rotate 1.1666666667s linear infinite;
+}
+ .preloader .preloader__wheel-wrapper:nth-child(6) .preloader__wheel {
+	 animation: _wheel_rotate 1.1666666667s linear infinite;
+}
+ .preloader .preloader__wheel-wrapper:nth-child(7) {
+	 top: 490px;
+}
+ .preloader .preloader__wheel-wrapper:nth-child(7) .preloader__content {
+	 animation: wheel_rotate 1s linear infinite;
+}
+ .preloader .preloader__wheel-wrapper:nth-child(7) .preloader__wheel {
+	 animation: _wheel_rotate 1s linear infinite;
+}
+ @keyframes wheel_rotate {
+	 0% {
+		 transform: rotate(0);
+	}
+	 80% {
+		 transform: rotate(335deg);
+	}
+	 100% {
+		 transform: rotate(360deg);
+	}
+}
+ @keyframes _wheel_rotate {
+	 0% {
+		 transform: rotate(360deg);
+	}
+	 80% {
+		 transform: rotate(15deg);
+	}
+	 100% {
+		 transform: rotate(0deg);
+	}
+}
+ 
\ No newline at end of file
diff --git a/testing.html b/testing.html
index d242d0d..a621b07 100644
--- a/testing.html
+++ b/testing.html
@@ -4,9 +4,11 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>ChaosWeb - The Disorderly UI Experiment</title>
+    <link rel="stylesheet" href="preloaderStyle.css">
 </head>
 <body>
     <h1 id="chaos-header">ChaosWeb - The Disorderly UI Experiment</h1>
+    
 
     <style>
         @keyframes wave {
@@ -35,8 +37,56 @@ <h1 id="chaos-header">ChaosWeb - The Disorderly UI Experiment</h1>
     <a href="#">Tester link</a>
     <button>Tester button</button>
     <input placeholder="test">
+    <!-- preloader -->
+    <div class="container">
+        <div class="preloader">
+            <div class="preloader__wheel-wrapper">
+                <div class="preloader__wheel"><span class="preloader__content">l</span>
+                    <div class="preloader__inner-wheel"></div>
+                    <div class="preloader__second-inner-whell"></div>
+                </div>
+            </div>
+            <div class="preloader__wheel-wrapper">
+                <div class="preloader__wheel"><span class="preloader__content">o</span>
+                    <div class="preloader__inner-wheel"></div>
+                    <div class="preloader__second-inner-whell"></div>
+                </div>
+            </div>
+            <div class="preloader__wheel-wrapper">
+                <div class="preloader__wheel"><span class="preloader__content">a</span>
+                    <div class="preloader__inner-wheel"></div>
+                    <div class="preloader__second-inner-whell"></div>
+                </div>
+            </div>
+            <div class="preloader__wheel-wrapper">
+                <div class="preloader__wheel"><span class="preloader__content">d</span>
+                    <div class="preloader__inner-wheel"></div>
+                    <div class="preloader__second-inner-whell"></div>
+                </div>
+            </div>
+            <div class="preloader__wheel-wrapper">
+                <div class="preloader__wheel"><span class="preloader__content">i</span>
+                    <div class="preloader__inner-wheel"></div>
+                    <div class="preloader__second-inner-whell"></div>
+                </div>
+            </div>
+            <div class="preloader__wheel-wrapper">
+                <div class="preloader__wheel"><span class="preloader__content">n</span>
+                    <div class="preloader__inner-wheel"></div>
+                    <div class="preloader__second-inner-whell"></div>
+                </div>
+            </div>
+            <div class="preloader__wheel-wrapper">
+                <div class="preloader__wheel"><span class="preloader__content">g</span>
+                    <div class="preloader__inner-wheel"></div>
+                    <div class="preloader__second-inner-whell"></div>
+                </div>
+            </div>
+        </div>
+    </div>
 
     <script src="js/script.js"></script>
     <script src="js/sound.js"></script>
+    <script src="preloader.js"></script>
 </body>
 </html>
