diff --git a/htdocs/assets/style.css b/htdocs/assets/style.css
index b34db12..9c254ae 100644
--- a/htdocs/assets/style.css
+++ b/htdocs/assets/style.css
@@ -654,11 +654,6 @@ video {
   margin-bottom: 0.75rem;
 }
 
-.my-32 {
-  margin-top: 8rem;
-  margin-bottom: 8rem;
-}
-
 .my-7 {
   margin-top: 1.75rem;
   margin-bottom: 1.75rem;
@@ -701,14 +696,14 @@ video {
   margin-bottom: 1.5rem;
 }
 
-.mb-60 {
-  margin-bottom: 15rem;
-}
-
 .mb-7 {
   margin-bottom: 1.75rem;
 }
 
+.mb-72 {
+  margin-bottom: 18rem;
+}
+
 .mb-8 {
   margin-bottom: 2rem;
 }
@@ -721,6 +716,10 @@ video {
   margin-bottom: 2rem;
 }
 
+.mb-\[60vh\] {
+  margin-bottom: 60vh;
+}
+
 .ml-2 {
   margin-left: 0.5rem;
 }
@@ -793,8 +792,8 @@ video {
   margin-top: 0.75rem;
 }
 
-.mt-40 {
-  margin-top: 10rem;
+.mt-32 {
+  margin-top: 8rem;
 }
 
 .mt-5 {
@@ -813,42 +812,10 @@ video {
   margin-top: 2.2rem;
 }
 
-.mb-96 {
-  margin-bottom: 24rem;
-}
-
-.mt-60 {
-  margin-top: 15rem;
-}
-
-.mt-72 {
-  margin-top: 18rem;
-}
-
-.mt-80 {
-  margin-top: 20rem;
-}
-
-.mb-\[60vh\] {
-  margin-bottom: 60vh;
-}
-
-.mt-\[40vh\] {
-  margin-top: 40vh;
-}
-
 .mt-\[30vh\] {
   margin-top: 30vh;
 }
 
-.mt-32 {
-  margin-top: 8rem;
-}
-
-.mb-72 {
-  margin-bottom: 18rem;
-}
-
 .flex {
   display: flex;
 }
@@ -1596,6 +1563,10 @@ video {
     margin-bottom: 0.75rem;
   }
 
+  .lg\:mb-32 {
+    margin-bottom: 8rem;
+  }
+
   .lg\:ml-4 {
     margin-left: 1rem;
   }
@@ -1640,18 +1611,6 @@ video {
     margin-top: 7rem;
   }
 
-  .lg\:mb-60 {
-    margin-bottom: 15rem;
-  }
-
-  .lg\:mt-40 {
-    margin-top: 10rem;
-  }
-
-  .lg\:mb-32 {
-    margin-bottom: 8rem;
-  }
-
   .lg\:block {
     display: block;
   }
diff --git a/htdocs/projects.php b/htdocs/projects.php
index 01b6d3b..67ac88f 100644
--- a/htdocs/projects.php
+++ b/htdocs/projects.php
@@ -15,6 +15,7 @@ $years = create_project_years_array($conn);
     <?php require 'assets/_integrate.php';?>
 </head>
 <body class="font-lexend bg-bg_primary text-accent_secondary">
+    <div id="preloader" class="absolute top-0 right-0 h-full w-screen z-[100] flex justify-center items-center bg-bg_primary overflow-hidden"><div class="spinner border-[5px] border-accent_secondary_transparent border-t-[5px] border-t-accent_primary rounded-[50%] h-[50px] w-[50px] animate-spin"></div></div>
     <?php require 'assets/_header.php';?>
     <div class="projectsbox w-full px-4 lg:px-[4.5rem]">
         <div class="herosection w-full flex flex-col-reverse justify-center lg:flex-row lg:justify-between items-center mb-3">
@@ -172,5 +173,10 @@ $years = create_project_years_array($conn);
         </div>
     </div>
     <?php require 'assets/_footer.php';?>
+    <script>
+        window.addEventListener("load", function(){
+         $('#preloader').addClass('hidden');
+        });
+    </script>
 </body>
 </html>
\ No newline at end of file
