diff --git a/src/layouts/index.html b/src/layouts/index.html
index 606d028..77e54ce 100644
--- a/src/layouts/index.html
+++ b/src/layouts/index.html
@@ -944,6 +944,17 @@
   </div>
 </section>
 
+<hr>
+  <div class="row button-container flex">
+    <a href="https://github.com/teaxyz/cli/graphs/contributors" class="ps-0 pe-0 btn-div" id="btn-div-top" >
+      <button class="sbtn sb-fill-top">VIEW ALL CONTRIBUTORS</button>
+    </a>
+    <a href="https://github.com/teaxyz/cli#contributing" class="ps-0 pe-0 btn-div" id="btn-div" >
+      <button class="sbtn sb-fill-top">LEARN HOW TO CONTRIBUTE</button>
+    </a>
+  </div>
+<hr>
+
 <script>
 
   $.getJSON("https://api.github.com/repos/teaxyz/cli/contributors", function(contributors) {
diff --git a/src/layouts/partials/package-grid.html b/src/layouts/partials/package-grid.html
index 078cacd..ccec8b1 100644
--- a/src/layouts/partials/package-grid.html
+++ b/src/layouts/partials/package-grid.html
@@ -18,7 +18,7 @@
       {{- partial "no-results-found.html" }}
     </div>
   </div>
-  <hr>
+
   <div id="loadMoreSection" class="container small">
     <div id="loadMorePackagesBtn"><i class="icon-enter-arrow"></i> SHOW MORE</div>
   </div>
@@ -33,25 +33,91 @@
     display: grid;
     grid-template-columns: auto;
   }
-  #loadMorePackagesBtn {
-    cursor: pointer;
-    font-size: 2rem;
-    font-family: "pp-neue-machina", sans-serif;
-    background-color: #1a1a1a;
-    color: #fff;
-    padding-top: 0.279vw;
-    text-decoration: none;
-    text-transform: uppercase;
-    transition: 0.1s linear;
+
+  @media only screen and (min-width: 1200px) {
+    #loadMorePackagesBtn {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      cursor: pointer;
+      font-size: 2rem;
+      height:  4.185vw !important;
+      font-family: "pp-neue-machina", sans-serif;
+      background-color: #1a1a1a;
+      color: #fff;
+      padding-top: 0.279vw;
+      text-decoration: none;
+      text-transform: uppercase;
+      transition: 0.1s linear;
+    }
+  }
+
+  @media only screen and (min-width: 992px) and (max-width: 1200px) {
+    #loadMorePackagesBtn {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      cursor: pointer;
+      font-size: 2rem;
+      height:  5vw !important;
+      font-family: "pp-neue-machina", sans-serif;
+      background-color: #1a1a1a;
+      color: #fff;
+      padding-top: 0.279vw;
+      text-decoration: none;
+      text-transform: uppercase;
+      transition: 0.1s linear;
+    }
+  }
+
+  @media only screen and (min-width: 768px) and (max-width: 992px) {
+    #loadMorePackagesBtn {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      cursor: pointer;
+      font-size: 2rem;
+      height:  5.141vw !important;
+      font-family: "pp-neue-machina", sans-serif;
+      background-color: #1a1a1a;
+      color: #fff;
+      padding-top: 0.279vw;
+      text-decoration: none;
+      text-transform: uppercase;
+      transition: 0.1s linear;
+    }
+  }
+
+  @media only screen and (min-width: 576px) and (max-width: 768px) {
+    #loadMorePackagesBtn {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      cursor: pointer;
+      font-size: 2rem;
+      height:  6.771vw!important;
+      font-family: "pp-neue-machina", sans-serif;
+      background-color: #1a1a1a;
+      color: #fff;
+      padding-top: 0.279vw;
+      text-decoration: none;
+      text-transform: uppercase;
+      transition: 0.1s linear;
+    }
+  }
+
+  @media only screen and (max-width: 576px) {
+
   }
   #loadMorePackagesBtn .icon-enter-arrow {
     display: inline-block;
     position: relaitve;
     transition: all 0.2s ease-in-out;
+    margin-right:20px;
   }
   #loadMorePackagesBtn:hover .icon-enter-arrow{
     display: inline-block;
-    transform: rotate(-45deg) !important;
+    transform: rotate(90deg) !important;
   }
   #loadMoreSection.hidden {
     display: none;