diff --git a/public/index.html b/public/index.html
index 513c203..771f903 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,135 +1,132 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-  <link rel="stylesheet" href="/public/styles.css" />
-  <link href='https://fonts.googleapis.com/css?family=Kumbh Sans' rel='stylesheet'>
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
-  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
-
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
-    integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
-    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-
-  <script src="https://cdn.jsdelivr.net/npm/polyline-encoded@0.0.9/Polyline.encoded.min.js"></script>
-  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
-  <script src="https://unpkg.com/leaflet-geometryutil@0.10.0/src/leaflet.geometryutil.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/@mapbox/leaflet-pip@1.1.0/leaflet-pip.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/@turf/turf@6.5.0/turf.min.js"></script>
-  <script type="module" src="../src/main.js" defer></script>
-  <script src="/src/components/Search/osmtogeojson.js"></script>
-  <script src="/src/components/DistanceFinder/Polyline.encoded.js" defer></script>
-  <script src="https://unpkg.com/leaflet.vectorgrid@1.3.0/dist/Leaflet.VectorGrid.bundled.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
-  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
-<link rel="icon" href="/favicon.ico" type="image/x-icon">
-  <title>World-Map-Explorer</title>
-</head>
-<header>
-  <div class="header-content">
-    <div class="logo">
-      <img src="/public/map-logo.png" alt="Map Logo" class="map-logo" tabindex="-1" />
-      <p id="map-explorer-text" tabindex="0"><b>World-Map-Explorer</b></p>
-    </div>
-    <div class="header-icons">
-      <button title="Help" id="help-btn" tabindex="0"
-        aria-label="select for read user manual" onclick="window.open('/src/pages/user-guide/index.html', '_blank');"
-        style="cursor: pointer;">
-    Help <i class="fa fa-question-circle" aria-hidden="true"></i>
-</button>
-    </div>
-  </div>
-</header>
-
-<body>
-  <div id="left-container">
-    <div class="box-input" id="search-container" aria-label="search places">
-      <div id="c-search-input"> <input type="text" tabindex="0" id="search-input" placeholder="Search Places" />
-        <button tabindex="0" id="searchbutton" aria-label="click to search"><i class="fa fa-search"></i></button>
+  <head>
+    <link rel="stylesheet" href="/public/styles.css" />
+    <link href="https://fonts.googleapis.com/css?family=Kumbh+Sans" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
+    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
+      integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
+      crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+    <script src="https://cdn.jsdelivr.net/npm/polyline-encoded@0.0.9/Polyline.encoded.min.js"></script>
+    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
+    <script src="https://unpkg.com/leaflet-geometryutil@0.10.0/src/leaflet.geometryutil.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@mapbox/leaflet-pip@1.1.0/leaflet-pip.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@turf/turf@6.5.0/turf.min.js"></script>
+    <script type="module" src="../src/main.js" defer></script>
+    <script src="/src/components/Search/osmtogeojson.js"></script>
+    <script src="/src/components/DistanceFinder/Polyline.encoded.js" defer></script>
+    <script src="https://unpkg.com/leaflet.vectorgrid@1.3.0/dist/Leaflet.VectorGrid.bundled.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
+    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
+    <link rel="icon" href="/favicon.ico" type="image/x-icon">
+    <title>World-Map-Explorer</title>
+  </head>
+  <header>
+    <div class="header-content">
+      <div class="logo">
+        <img src="/public/map-logo.png" alt="Map Logo" class="map-logo" tabindex="-1" />
+        <p id="map-explorer-text" tabindex="0"><b>World-Map-Explorer</b></p>
       </div>
-      <div id="searchdetails" tabindex="0" class="searchdetails" style="display: none" aria-label="Search results">
-        <button class="fas fa-times-circle" id="closeBtnD" aria-label="Close details tab"
-          onclick="notifySreenReader(`details tab closed`)"></button>
-        <span aria-live="polite" aria-atomic="true" id="detalisElement"></span>
+      <div class="header-icons">
+        <button title="Help" id="help-btn" tabindex="0" aria-label="Read user manual" onclick="window.open('/src/pages/user-guide/index.html', '_blank');" style="cursor: pointer;">
+          Help <i class="fa fa-question-circle" aria-hidden="true"></i>
+        </button>
       </div>
-
     </div>
-
-    <button class="fas fa-directions" tabindex="0" id="trigger-icon" aria-label="find distance between places"></button>
-  </div>
-
-  <div tabindex="0" id="controls-box">
-
-    <button title="Click to Zoom-In" aria-label="Click to Zoom-In" class="fa fa-plus" title="Zoom In"></button>
-    <button title="Click to Zoom-Out" aria-label="Click to Zoom-Out" class="fa fa-minus" title="Zoom Out"></button>
-    <button title="Click to select Layers" aria-label="Click to select layers" class="fa fa-layer-group" title="Layers"
-      id="layers-btn"></button>
-    <div id="layers-dropdown" class="dropdown-content">
-      <button title="geographical-layer" aria-label="geographical-layer" id="geographical-layer">Geographical</button>
-      <button title="political-layer" aria-label="political-layer" id="political-layer">Political</button>
-    </div>
-    <button class="fa fa-location-arrow" id="locateme" title="Locate me"
-      aria-label="Locate your location on map"></button>
-  </div>
-
-  <div id="infoBox" tabindex="-1">
-    Place: <span id="placeDisplay"></span><br /><br />
-    Angle: <span id="angleDisplay"></span><br />
-    Flat Map Distance: <span id="flatdistance"></span><br />
-    Real Distance: <span id="distanceDisplay"></span><br />
-    Real Angle: <span id="realAngle"></span><br />
-    <h3>coordinates:</h3>
-    <pre></pre>
-    <span id="coordinates">
-      <span id="lat"></span><br />
-      <span id="lng"></span>
-    </span>
-  </div>
-
-  <!-- Box that appears on icon click -->
-  <div class="box" id="box" tabindex="0" aria-label="distance finder opened">
-    <button class="fas fa-times-circle" id="closeBtn" aria-label="close distance finder" tabindex="0"
-      onclick="notifySreenReader(`distance finder closed`)"></button>
-    <h1>Find Distance</h1>
-
-    <div class="box-input">
-      <span><i class="fas fa-circle"></i></span>
-      <div class="dist-input" id="c-beginning"><input type="text" tabindex="0" id="beginning"
-          placeholder="Enter Starting point" aria-label="type place and press enter" />
-        <button tabindex="0" aria-label="click to see suggessions" id="b-searchbutton"><i
-            class="fa fa-search"></i></button>
+  </header>
+  <body>
+    <div id="left-container">
+      <div class="box-input" id="search-container" aria-label="Search places">
+        <!-- Wrapping search input inside a form with role="search" adds semantic meaning -->
+        <form role="search">
+          <!-- Visually hidden label for screen readers -->
+          <label for="search-input" class="visually-hidden">Search Places</label>
+          <div id="c-search-input">
+            <input type="text" tabindex="0" id="search-input" placeholder="Search Places" />
+            <button tabindex="0" id="searchbutton" aria-label="Click to search">
+              <i class="fa fa-search"></i>
+            </button>
+          </div>
+        </form>
+        <div id="searchdetails" tabindex="0" class="searchdetails" style="display: none" aria-label="Search results">
+          <button class="fas fa-times-circle" id="closeBtnD" aria-label="Close details tab" onclick="notifySreenReader('Details tab closed')"></button>
+          <span aria-live="polite" aria-atomic="true" id="detalisElement"></span>
+        </div>
       </div>
+      <button class="fas fa-directions" tabindex="0" id="trigger-icon" aria-label="Find distance between places"></button>
     </div>
 
-
-    <div class="box-input">
-      <span><i class="fas fa-map-marker-alt"></i></span>
-      <div class="dist-input" id="c-destination"><input tabindex="0" type="text" id="destination"
-          placeholder="Enter Destination" aria-label="type place and press enter" />
-        <button id="d-searchbutton" tabindex="0" aria-label="click to see suggessions"><i
-            class="fa fa-search"></i></button>
+    <div tabindex="0" id="controls-box">
+      <button title="Click to Zoom-In" aria-label="Zoom In" class="fa fa-plus" title="Zoom In"></button>
+      <button title="Click to Zoom-Out" aria-label="Zoom Out" class="fa fa-minus" title="Zoom Out"></button>
+      <button title="Click to select Layers" aria-label="Select layers" class="fa fa-layer-group" title="Layers" id="layers-btn"></button>
+      <div id="layers-dropdown" class="dropdown-content">
+        <button title="Geographical Layer" aria-label="Geographical Layer" id="geographical-layer">Geographical</button>
+        <button title="Political Layer" aria-label="Political Layer" id="political-layer">Political</button>
       </div>
+      <button class="fa fa-location-arrow" id="locateme" title="Locate me" aria-label="Locate your position on map"></button>
     </div>
 
-    <button class="fas fa-map-marked-alt" aria-hidden="true" title="Choose from map" id="fromMap"
-      tabindex="-1"></button>
-    <button class="fas fa-arrow-circle-right" tabindex="0" id="find" title="Find Distance"
-      aria-label=" click to Find distance"></button>
-    <div tabindex="0" id="distanceResult" aria-live="polite">
-      Distance : <span id="dist"></span><br />
-      Time : <span id="time"></span>
+    <div id="infoBox" tabindex="-1">
+      Place: <span id="placeDisplay"></span><br /><br />
+      Angle: <span id="angleDisplay"></span><br />
+      Flat Map Distance: <span id="flatdistance"></span><br />
+      Real Distance: <span id="distanceDisplay"></span><br />
+      Real Angle: <span id="realAngle"></span><br />
+      <h3>Coordinates:</h3>
+      <pre></pre>
+      <span id="coordinates">
+        <span id="lat"></span><br />
+        <span id="lng"></span>
+      </span>
     </div>
-    <p style="font-size: 10px;" class="text-center"><br>Directions courtesy of <a
-        href="https://gis-ops.com/global-open-valhalla-server-online/" target="_blank">Valhalla (FOSSGIS)</a></p>
-  </div>
 
-  <div tabindex="0" aria-label="focused on map. use arrow keys to navigate" id="map"></div>
+    <!-- Distance Finder Box (Find Distance Tab) -->
+    <div class="box" id="box" tabindex="0" aria-label="Distance finder opened">
+      <button class="fas fa-times-circle" id="closeBtn" aria-label="Close distance finder" tabindex="0" onclick="notifySreenReader('Distance finder closed')"></button>
+      <h1 id="distanceHeader">Find Distance</h1>
+      <div class="box-input">
+        <span><i class="fas fa-circle"></i></span>
+        <!-- Visually hidden label for Starting Point -->
+        <label for="beginning" class="visually-hidden">Enter Starting Point</label>
+        <div class="dist-input" id="c-beginning">
+          <input type="text" tabindex="0" id="beginning" placeholder="Enter Starting point" aria-label="Type place and press Enter" />
+          <button tabindex="0" aria-label="Click to see suggestions" id="b-searchbutton">
+            <i class="fa fa-search"></i>
+          </button>
+        </div>
+      </div>
+      <div class="box-input">
+        <span><i class="fas fa-map-marker-alt"></i></span>
+        <!-- Visually hidden label for Destination -->
+        <label for="destination" class="visually-hidden">Enter Destination</label>
+        <div class="dist-input" id="c-destination">
+          <input type="text" tabindex="0" id="destination" placeholder="Enter Destination" aria-label="Type place and press Enter" />
+          <button tabindex="0" aria-label="Click to see suggestions" id="d-searchbutton">
+            <i class="fa fa-search"></i>
+          </button>
+        </div>
+      </div>
+      <button class="fas fa-map-marked-alt" aria-hidden="true" title="Choose from map" id="fromMap" tabindex="-1"></button>
+      <button class="fas fa-arrow-circle-right" tabindex="0" id="find" title="Find Distance" aria-label="Click to find distance"></button>
+      <div tabindex="0" id="distanceResult" aria-live="polite">
+        Distance: <span id="dist"></span><br />
+        Time: <span id="time"></span>
+      </div>
+      <p style="font-size: 10px;" class="text-center">
+        <br>Directions courtesy of <a href="https://gis-ops.com/global-open-valhalla-server-online/" target="_blank">Valhalla (FOSSGIS)</a>
+      </p>
+    </div>
 
-</body>
-<footer>
-  <span id="status-bar"></span>
-  <span id="camera-height"></span>
-  <span id="elevation"></span>
-</footer>
+    <div tabindex="0" aria-label="Focused on map. Use arrow keys to navigate" id="map"></div>
+  </body>
 
-</html>
\ No newline at end of file
+  <footer>
+    <span id="status-bar"></span>
+    <span id="camera-height"></span>
+    <span id="elevation"></span>
+  </footer>
+</html>
