diff --git a/public/index.html b/public/index.html
index a7d0767..b33178e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -12,6 +12,7 @@
     <link rel="stylesheet" href="https://unpkg.com/sheryjs/dist/Shery.css" />
     <link rel="stylesheet" href="index.css">
     <link rel="stylesheet" href="testimonial.css">
+    <link rel="stylesheet" href="preloader.css">
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
     <style>
@@ -72,6 +73,13 @@
 </head>
 
 <body class="container-fluid">
+    
+    <!-- preloader -->
+    <div class="preloader">
+        <div class="book"></div>
+        <div class="text">Loading...</div>
+    </div>
+
     <div id="main">
         <div id="home">
             <div id="nav">
@@ -350,6 +358,15 @@ <h2>Get in Touch</h2>
             </div>
         </div>
 
+        <script>
+            window.addEventListener("load", function () {
+                setTimeout(function () {
+                    document.querySelector(".preloader").style.display = "none";
+                    document.getElementById("main-content").style.display = "block";
+                }, 3000);
+            });
+        </script>
+
         <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
         <script src="https://cdn.jsdelivr.net/gh/automat/controlkit.js@master/bin/controlKit.min.js"></script>
diff --git a/public/preloader.css b/public/preloader.css
new file mode 100644
index 0000000..d5bd584
--- /dev/null
+++ b/public/preloader.css
@@ -0,0 +1,55 @@
+.preloader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #f7f7b2;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+}
+
+.book {
+    width: 50px;
+    height: 50px;
+    position: relative;
+    animation: flip 1.5s infinite linear;
+}
+.book::before, .book::after {
+    content: '';
+    position: absolute;
+    width: 50px;
+    height: 50px;
+    background: #3498db;
+    border-radius: 5px;
+}
+.book::before {
+    transform-origin: left;
+    animation: pageFlip 1.5s infinite linear;
+}
+.book::after {
+    transform-origin: right;
+    animation: pageFlip 1.5s infinite linear reverse;
+}
+
+@keyframes flip {
+    0%, 100% { transform: rotateY(0); }
+    50% { transform: rotateY(180deg); }
+}
+
+@keyframes pageFlip {
+    0% { transform: rotateY(0); }
+    50% { transform: rotateY(-180deg); }
+    100% { transform: rotateY(0); }
+}
+
+.text {
+    margin-top: 15px;
+    font-size: 18px;
+    color: #333;
+    font-weight: bold;
+    font-family: Arial, sans-serif;
+}
\ No newline at end of file
