diff --git a/index.html b/index.html
index 838dce2..fcbb522 100644
--- a/index.html
+++ b/index.html
@@ -90,12 +90,15 @@ <h4 id="counter"></>
           
       </div>
     <div class="loading show">
+    <!-- <div class="ball"></div>
     <div class="ball"></div>
-    <div class="ball"></div>
-    <div class="ball"></div>
+    <div class="ball"></div> -->
   </div>
     </div>
     
+    <div class="Show-more">
+        <button id="Show-more_button" onclick="showLoading()">Load more</button>
+    </div>
 
     <!-- CARD SECTION ENDED -->
   
diff --git a/script.js b/script.js
index 48f712d..5f55e61 100644
--- a/script.js
+++ b/script.js
@@ -39,7 +39,7 @@ const ProjectCounter = document.getElementById('counter')
 
 // Infinite scrolling
 var doLoadingOnScroll = true
-var noOfCardsToLoad = 12
+var noOfCardsToLoad = 5
 var cardLoadedYet = 0
 var loadingBalls = false
 const loading = document.querySelector('.loading')
@@ -59,7 +59,7 @@ window.addEventListener('scroll', () => {
   ) {
     // show the loading animation
     // setTimeout(showLoading,1000);
-    showLoading()
+    // showLoading()
   }
 })
 
@@ -69,7 +69,7 @@ function showLoading() {
   // showNextItems();
   if (loadingBalls == false) {
     loadingBalls = true
-    setTimeout(showNextItems, 1000)
+    setTimeout(showNextItems, 500)
   }
 }
 
@@ -128,7 +128,7 @@ const getProject = fetch('style_links.json')
     //extra arr bna aur km store kr vohi display kra aur append krtey jaa
     //search real waley se krna
     // displayProjects(projects)
-    showLoading()
+    showNextItems()
     console.log(projects)
   })
 
diff --git a/style.css b/style.css
index 5c66687..755b0b6 100644
--- a/style.css
+++ b/style.css
@@ -211,6 +211,19 @@ a {
    transform: translate(50%, -200%);
  }
 
+ .Show-more{
+    display: flex;
+    width: 50%;
+    margin: 0 auto;
+ }
+ .Show-more button{
+  border-color: none;
+   font-size: 20px;
+   width: 15vw;
+   height: 7vh;
+   margin: 10px auto;
+   border-radius: 30px;
+ }
 
 
 .nav-link{