diff --git a/css/discover.css b/css/discover.css
index 1b3386c..8509f79 100644
--- a/css/discover.css
+++ b/css/discover.css
@@ -12,17 +12,18 @@ html body *{
 body{
   display: block;
   max-width : 100vw;
-  margin: 0;
+  margin: 0px;
   font-size: 16px;
   background-color: white;
-  padding: 0;
+  padding: 0px;
   overflow: hidden;
 }
 nav{
   background-color: white;
 }
+
 #discoveringopp{
-  font-family: 'Spirax', cursive;
+  font-family: 'Raleway', sans-serif;
   padding: 5%;
   height: 50%;
   background: linear-gradient(0deg, rgba(2,0,36,0.99) 50%, rgba(75,0,110,1) 90%);   
@@ -33,7 +34,8 @@ nav{
   width: 100%;
 }
 #title{
-  font-family: 'El Messiri', sans-serif;
+  font-family: 'Raleway', sans-serif;
+
   font-size: 5rem;
   color: white;
   margin-bottom: 30px;
@@ -130,14 +132,14 @@ nav{
   background-color: rgba(2,0,36,0.99);
   display: grid;
   justify-content: center;
-  gap: 10px;
+  gap: 20px;
   grid-template-columns: repeat(auto-fill, minmax(10rem, 20rem));
 
 }
 
 .blocks{
   display: block;
-  margin: 5%;
+  margin: 0%;
   width: 100%;
   padding: 5%;
   border: transparent;
@@ -151,7 +153,8 @@ nav{
 
 .visible > h4{
   text-align: center;
-  font-family: 'El Messiri', sans-serif;
+  font-family: 'Rajdhani', sans-serif;
+  font-weight: 500;
   font-size: 2rem;
   margin:0%;
 }
@@ -207,6 +210,8 @@ nav{
 
 .popupHeader h4{
   font-family: 'El Messiri', sans-serif;
+  font-family: 'Raleway', sans-serif;
+  font-weight: 400;
   font-size: 2.5rem;
   font-weight: bold;
 }
@@ -218,11 +223,11 @@ nav{
   background:none;
   font-size: 2rem;
   font-weight: bold;
-  color: #02ccfecd;
+  color:  rgb(201, 130, 235);
 }
 .popupHeader > button:hover{
   border: transparent;
-  color: #02ccfe4b;
+  color:rgb(154, 16, 219);
 }
 
 
@@ -234,6 +239,8 @@ nav{
 
 .popupBody span{
   font-family: 'El Messiri', sans-serif;
+  font-family: 'Raleway', sans-serif;
+  font-weight: 400;
   color: rgba(255, 255, 255, 0.8);
   font-size: 1.5rem;
   margin-right: 15px;
@@ -318,10 +325,16 @@ z-index: 2;
   background-color: #4B006E;
 }
 
+@media(max-width : 620px){
+  #title{
+      font-size: 4rem;
+  }
+}
+
+
 @media(max-width : 575.98px){
   #title{
-      font-family: 'El Messiri', sans-serif;
-      font-size: 4.2em;
+      font-size: 3.5rem;
       color: white;
       margin-bottom: 30px;
   }
@@ -365,3 +378,41 @@ z-index: 2;
       margin-right: 0px;
   }
 }
+
+@media(max-width : 460px){
+
+  #title{
+
+      font-size: 3rem;
+  }
+  .searchbox{
+    width: 300px;
+  }
+}
+
+@media(max-width : 390px){
+  #discoveringopp{
+    height: 50vh;
+    align-items: center;
+  }
+  #title{
+      margin-top: 20%;
+      text-align: center;
+      font-size: 2.5rem;
+  }
+  .search{
+    margin-top: 20%;
+  }
+  .searchbox{
+    width: 250px;
+  }
+  .popupBody{
+    padding: 5px 10px;
+  }
+}
+
+@media(max-width : 330px){
+  #title{
+      font-size: 2rem;
+  }
+}
diff --git a/html/discover.html b/html/discover.html
index 9e9d31c..6cead02 100644
--- a/html/discover.html
+++ b/html/discover.html
@@ -9,6 +9,9 @@
     <!-- <link rel="preconnect" href="https://fonts.googleapis.com"> -->
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=El+Messiri:wght@600&family=Lobster+Two&family=Montserrat&family=Quicksand&family=Spirax&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Akronim&family=Cormorant+Upright&family=Rajdhani:wght@500&family=Raleway:wght@200;400&display=swap" rel="stylesheet">
+
+    
     <!-- CDN Imports for CSS -->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
@@ -52,7 +55,7 @@
 
 			<!-- Google Analytics-->
 	<!-- Global site tag (gtag.js) - Google Analytics -->
-	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-156009380-1"></script>
+	<!-- <script async src="https://www.googletagmanager.com/gtag/js?id=UA-156009380-1"></script>
 	
     <script>
   	window.dataLayer = window.dataLayer || [];
@@ -60,7 +63,7 @@
   	gtag('js', new Date());
 
   	gtag('config', 'UA-156009380-1');
-	</script>
+	</script> -->
 
 </head>
 
@@ -72,20 +75,20 @@
     </nav>
 
     <!--Main Heading along with the searchbar-->
-
     <div id="discoveringopp">
-        <h1 id="title">Discover Opportunities</h1>
-        <div class="search">
-            <div id="searchtitle">
-                <h3>#beInformed</h3>
-            </div>
-            <div class="searchbox">
-                <input type="search" name="q" id="searchbar" onkeyup="searching()" placeholder="Search">
-                <button class="searchbutton"><a href="#" class="search_icon"><i class="fas fa-search"></i></a></button>
+            <h1 id="title">DISCOVER OPPORTUNITIES</h1>
+            <div class="search">
+                <div id="searchtitle">
+                    <h3>#beInformed</h3>
+                </div>
+                <div class="searchbox">
+                    <input type="search" name="q" id="searchbar" onkeyup="searching()" placeholder="Search">
+                    <button class="searchbutton"><a href="#" class="search_icon"><i class="fas fa-search"></i></a></button>
+                </div>
             </div>
-        </div>
     </div>
 
+
     <!--Code for item showing dropdown-->
     <div id="mainbody">
         <div id="itemperpage">
@@ -111,7 +114,7 @@ <h3>#beInformed</h3>
             <!--Previous and next buttons-->
 
             <div id="prevnext">
-                <button id="prevbtn" hidden >Previous</button>
+                <button id="prevbtn" hidden>Previous</button>
                 <button id="nextbtn">Next</button>
             </div>
         </div>
diff --git a/js/discover.js b/js/discover.js
index 4a4546d..cd877bd 100644
--- a/js/discover.js
+++ b/js/discover.js
@@ -61,7 +61,6 @@ function renderData(){
       const close = item.querySelector('.closePopup'); 
       let isOpen = false;
 
-      console.log(popup, close, overlay);
     
     vis.addEventListener('click',()=>{
           if(!isOpen){
@@ -89,7 +88,8 @@ function renderData(){
 
     })
     const pageContainer = document.getElementById('itemsshowing');
-    pageContainer.innerHTML = `Showing ${startIndex+1} to ${endIndex} of ${dataToDisplay.length} items`;
+    if(endIndex == 0)pageContainer.innerHTML = `No items to be shown`;
+    else pageContainer.innerHTML = `Showing ${startIndex+1} to ${endIndex} of ${dataToDisplay.length} items`;
     
     prevbtn.hidden = currentPage === 1;
     nextbtn.hidden = currentPage === Math.ceil(dataToDisplay.length/itemsPerPage);