diff --git a/about.html b/about.html
index 0652263..c77e79b 100644
--- a/about.html
+++ b/about.html
@@ -13,7 +13,20 @@ <h2>About:</h2>
     This website was developed by Arjun Rajesh Khamkar, as a service to the wonderful city of Kolhapur. 
     <br>
     <br>The webiste serves to index and organize the various 'sites'; which include everything from heritage, social importance, scenic importance and everythingthat needs documentation but isnt readily documented and even if it is, not properly index to enable quick search.
-    
+    <div class="references">
+        <button id="references"> Show References</button>
+    </div>
     
 </body>
-</html>
\ No newline at end of file
+</html>
+<script>
+    const referenceButton = document.querySelector('.references button');
+
+// Function to add click event listeners to buttons
+const addButtonListener = (button, url) => {
+    button.addEventListener('click', () => window.location.href = url);
+};
+
+// Add click event listeners to buttons
+addButtonListener(referenceButton, 'reference.html');
+</script>
\ No newline at end of file
diff --git a/aboutstyle.css b/aboutstyle.css
index 63d7cb6..99058a1 100644
--- a/aboutstyle.css
+++ b/aboutstyle.css
@@ -3,3 +3,34 @@
 
 }
 
+.references {
+    position: absolute;
+    top: 85vh;
+    right: 2vw;
+    width: 20vw;
+    max-height: 80vh;
+    max-width: 100px;
+    overflow-y: auto;
+    padding: 5px;
+    background-color: rgba(255, 255, 255, 0.9);
+    border-radius: 20px;
+    box-shadow: 0 0 1.5vh rgba(0, 0, 0, 0.3);
+    z-index: 1000;
+    
+}
+
+.references button {
+    font-size: medium;
+    padding: 5px 5px; /* Larger padding for a more spacious button */
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 20px; /* Rounded corners for buttons */
+    cursor: pointer;
+    text-align: center; /* Center text inside the button */
+}
+
+.references button:hover {
+    background-color: #0056b3;
+}
+
diff --git a/kolhapurIndex.html b/kolhapurIndex.html
index ccab6f1..5926a74 100644
--- a/kolhapurIndex.html
+++ b/kolhapurIndex.html
@@ -32,9 +32,9 @@ <h2>Sites</h2>
         <h2 id="marker-title"></h2>
         <p id="marker-info"></p>
     </div>
-    <div class="references">
+    <!-- <div class="references">
         <button id="references"> Show References</button>
-    </div>
+    </div> -->
 </body>
 
 </html>
diff --git a/kolhapurScript.js b/kolhapurScript.js
index c223636..291e0cb 100644
--- a/kolhapurScript.js
+++ b/kolhapurScript.js
@@ -1,105 +1,78 @@
-// Map initialization 
+// Initialize the map centered on Kolhapur
 const map = L.map('map').setView([16.686875, 74.2272], 14);
+
+// Add the OpenStreetMap tile layer to the map
 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
 
+// Define time periods for categorization
 var timePeriods = ['Old', 'Recent', 'Ancient', 'Mideaval']
 
-// Add your markers
+// Define an array of markers with their coordinates, names, descriptions, and categories
 var markersData = [
     {
-        coords: [16.6868981, 74.2245119], name: "ShivaMandir 1",
-        data: "This temple is placed in the corner of a already isolated and 'sketchy' place. This temple is mostly closed and only open on core festive days for the local shiva bhakts. With average aesthic value this place does not call for a detour just to visit it. "
-        , categories: ['Temple', 'Recent', 'Architecture']
+        coords: [16.6868981, 74.2245119], 
+        name: "ShivaMandir 1",
+        data: "This temple is placed in the corner of a already isolated and 'sketchy' place. This temple is mostly closed and only open on core festive days for the local shiva bhakts. With average aesthic value this place does not call for a detour just to visit it. ",
+        categories: ['Temple', 'Recent', 'Architecture']
     },
-
     {
-        coords: [16.6878053, 74.2268129], name: "RadhaKrishna Mandir Old Maratha Architecture",
-        data: "This temple ", categories: ['Temple', 'Mideaval', 'Architecture', 'Religious']
+        coords: [16.6878053, 74.2268129], 
+        name: "RadhaKrishna Mandir Old Maratha Architecture",
+        data: "This temple ", 
+        categories: ['Temple', 'Mideaval', 'Architecture', 'Religious']
     },
-
     { coords: [16.6876496, 74.2272880], name: "Padmavati Mandir", categories: ['Temple', 'Mideaval', 'Religious'] },
-
     { coords: [16.6880179, 74.2272511], name: "GajaGanesh",categories:['Temple', 'Recent'] },
-
     { coords: [16.6875259, 74.2285171], name: "Jayprabha Studio", categories:['Heritage', 'Old'] },
-
     { coords: [16.6840401, 74.2319141], name: "Renuka Mandir s.1840" },
-
     { coords: [16.692538, 74.224976], name: "Mirajkar Tikti" },
-
     { coords: [16.692193, 74.224434], name: "Nurshimha Mandir 1" },
-
     { coords: [16.6918619, 74.2243293], name: "Onkareshwar Mandir Southern Script(raja Bhoj?)", data: "this is data" },
-
     { coords: [16.6916495, 74.2307380], name: "Sathmari" },
-
     { coords: [16.690646, 74.229167], name: "Belbag Chowk" },
-
     { coords: [16.6923981, 74.2202060], name: "ardha shivaji putala" },
-
     { coords: [16.6929595, 74.2198519], name: "Brahmeshwar Park" },
-
     { coords: [16.6929733, 74.2182406], name: "Mahakali mandir 1" },
-
     { coords: [16.6944673, 74.2143604], name: "rankala tower" },
-
     { coords: [16.6994986, 74.2117278], name: "anugamini mandir" },
-
     { coords: [16.6966896, 74.2139182], name: "Old Washing Place (dhobi)" },
-
     { coords: [16.6999160, 74.1945288], name: "Laksheswar Mandir(waterfront)" },
-
     { coords: [16.7037394, 74.2177601], name: "sangramsinha gaikwad statue" },
-
     { coords: [16.7032927, 74.2177269], name: "gaikwad samadhi" },
-
     { coords: [16.7036107, 74.2182610], name: "maratha architecture (wooden work) temple?" },
-
     { coords: [16.717409, 74.1837], name: "Shingnapur Bridge" },
-
     { coords: [16.707178, 74.217496], name: "Shivaji Pul" },
-
     { coords: [16.69181, 74.214733], name: "Sandhya Math" },
-
     { coords: [16.691476, 74.214250], name: "Ancient Grinding Wheel (Chuna/Lime)" },
-
     { coords: [16.690777, 74.242741], name: "Shahunagar Shahu Maharaj" },
-
     { coords: [16.686661, 74.242467], name: "Pansare Statue" },
-
     { coords: [16.685677063690296, 74.24476721211819], name: "Jain Peace Fountain(not functional)" },
-
     { coords: [16.678112528032145, 74.25650613438248], name: "University Shivaji Maharaj Statue" },
-
     { coords: [16.68045203668232, 74.25650030391819], name: "Bhaurao Patil Statue" },
-
     { coords: [16.683335386532963, 74.25358169487988], name: "University Lake Point" },
-
     { coords: [16.695784408048777, 74.25683864460689], name: "Maratha Light Infantry, Kolhapur Command Entry" },
-
     { coords: [16.6993747349747, 74.25449822924905], name: "Tank, Fighter Jet, WarShip scale models" },
-
     { coords: [16.691389103423028, 74.24460943217142], name: "Bai Cha Putala, Mauli Putala" },
-
     { coords: [16.69368046074615, 74.236330895537], name: "Koteshwar Mandir, LakeView" },
-
     { coords: [16.68687874452764, 74.22941512409949], name: "Arya Samaj School, 1928" },
-
     { coords: [16.791012471115316, 74.19121417050346], name: "Pohale Caves" },
-
 ];
 
+// Get references to navbar buttons
 const [homeButton, aboutButton, mapButton] = document.querySelectorAll('.navbar button');
-const referenceButton = document.querySelector('.references button');
+//const referenceButton = document.querySelector('.references button');
 
+// Function to add click event listeners to buttons
 const addButtonListener = (button, url) => {
     button.addEventListener('click', () => window.location.href = url);
 };
 
-addButtonListener(referenceButton, 'reference.html');
+// Add click event listeners to buttons
+//addButtonListener(referenceButton, 'reference.html');
 addButtonListener(aboutButton, 'about.html');
 addButtonListener(homeButton, 'index.html');
 
+// Create a tile layer for satellite view
 const tileLayer = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}');
 
 // Function to toggle map view and update localStorage
@@ -127,6 +100,7 @@ if (savedMapView === 'satellite') {
 // Add click event listener to toggle map view
 mapButton.addEventListener('click', toggleMapView);
 
+// Get references to DOM elements
 const markerNamesList = document.getElementById('markerNames');
 const infoOverlay = document.getElementById('info-overlay');
 const markerTitle = document.getElementById('marker-title');
@@ -134,10 +108,18 @@ const markerInfo = document.getElementById('marker-info');
 const backButton = document.getElementById('back-button');
 const closeButton = document.getElementById('close-button');
 
+// Variable to store the currently selected marker
 let currentMarker = null;
 
+// Function to zoom to a marker and show its information overlay
 function zoomToMarkerAndShowOverlay(markerData, marker) {
-    const zoomLevel = Math.max(map.getZoom(), 16);
+
+    toggleMobileOverlay();
+    
+
+    //if (window.innerWidth > 767 || window.orientation !== 0) {
+    //setTimeout(() => {
+    const zoomLevel = Math.max(map.getZoom(), 18);
     map.setView(markerData.coords, zoomLevel, { animate: true, duration: 1 });
 
     currentMarker = markerData.name;
@@ -146,6 +128,7 @@ function zoomToMarkerAndShowOverlay(markerData, marker) {
     markerInfo.textContent = markerData.data || "No additional information available.";
     infoOverlay.style.display = 'block';
 
+    // Create an enlarged icon for the selected marker
     const enlargedIcon = L.icon({
         iconUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png',
         iconSize: [35, 55],
@@ -158,6 +141,7 @@ function zoomToMarkerAndShowOverlay(markerData, marker) {
 
     marker.setIcon(enlargedIcon);
 
+    // Reset the marker icon to its original size after a short delay
     setTimeout(() => {
         marker.setIcon(L.icon({
             iconUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png',
@@ -168,12 +152,15 @@ function zoomToMarkerAndShowOverlay(markerData, marker) {
             shadowSize: [41, 41],
             shadowAnchor: [12, 41]
         }));
-    }, 500);
+    }, 700);   
+ //}, 1000);
 }
 
+// Add markers to the map and create list items for each marker
 markersData.forEach(markerData => {
     const marker = L.marker(markerData.coords).addTo(map);
     marker.on('click', () => {
+        toggleMobileOverlay();
         zoomToMarkerAndShowOverlay(markerData, marker);
         if (window.innerWidth <= 767 && window.orientation === 0) {
             markerList.classList.remove('show');
@@ -188,9 +175,11 @@ markersData.forEach(markerData => {
     listItem.addEventListener('click', () => zoomToMarkerAndShowOverlay(markerData, marker));
 });
 
+// Add event listeners to close and back buttons
 closeButton.addEventListener('click', () => infoOverlay.style.display = 'none');
 backButton.addEventListener('click', () => infoOverlay.style.display = 'none');
 
+// Add event listener for search input
 document.getElementById('searchInput').addEventListener('input', e => {
     const searchQuery = e.target.value.toLowerCase();
     markerNamesList.innerHTML = '';
@@ -205,6 +194,7 @@ document.getElementById('searchInput').addEventListener('input', e => {
     });
 });
 
+// Create a custom icon for the user's position
 const posMarker = L.icon({
     iconUrl: 'https://toppng.com/uploads/preview/button-icon-bluesky-google-current-location-ico-11562972550n6hrlknyqo.png',
     iconSize: [15, 15],
@@ -212,22 +202,31 @@ const posMarker = L.icon({
     popupAnchor: [-3, -76]
 });
 
+// Add a marker for the user's position (currently hardcoded)
 L.marker([16.69, 74.23], { icon: posMarker }).addTo(map);
 
-// Add this at the beginning of your script
+// Get references to mobile toggle button and marker list
 const mobileToggle = document.getElementById('mobile-toggle');
 const markerList = document.getElementById('marker-list');
 
+// Function to toggle mobile overlay
 function toggleMobileOverlay() {
     markerList.classList.toggle('show');
     mobileToggle.textContent = markerList.classList.contains('show') ? 'Hide Sites' : 'Show Sites';
 }
 
+
+
+// Add click event listener to mobile toggle button
+// This allows users to show/hide the list of sites on mobile devices
 mobileToggle.addEventListener('click', toggleMobileOverlay);
 
 // Add a resize event listener to handle orientation changes
+// This ensures proper display when switching between portrait and landscape modes
 window.addEventListener('resize', () => {
+    // Check if the screen width is greater than 767px (tablet/desktop) or if the device is in landscape mode
     if (window.innerWidth > 767 || window.orientation !== 0) {
+        // Hide the mobile overlay and reset the button text
         markerList.classList.remove('show');
         mobileToggle.textContent = 'Show Sites';
     }
diff --git a/kolhapurStyle.css b/kolhapurStyle.css
index acc6d0c..4d094da 100644
--- a/kolhapurStyle.css
+++ b/kolhapurStyle.css
@@ -18,6 +18,7 @@ body, html {
     position: absolute; /* Position navbar over the map */
     top: 2vh; /* Distance from the top of the viewport */
     right: 2vw;  /*Distance from the left of the viewport */
+    bottom: 90vh;
     padding: 5px; /* Add padding inside the navbar for a spacious look */
     border-radius: 20px; /* High border radius for rounded corners */
     background-color: rgba(255, 255, 255, 0.9); /* Optional: Add a semi-transparent background */
@@ -91,11 +92,11 @@ body, html {
 
 .info-overlay {
     position: absolute;
-    top: 10vh;
+    top: 11vh;
     right: 2vw;
     width: auto;
     height: auto;
-    max-width: 20vw;
+    max-width: 30vw;
     max-height: 80vh;
     overflow-y: auto;
     padding: 2vh;