diff --git a/core/code/_deprecated.js b/core/code/_deprecated.js
index 2304ef78e..218e9c196 100644
--- a/core/code/_deprecated.js
+++ b/core/code/_deprecated.js
@@ -1,4 +1,4 @@
-/* global L -- eslint */
+/* global IITC, L -- eslint */
 
 /**
  * @file This file contains functions that are not use by IITC itself
@@ -174,3 +174,16 @@ window.findPortalLatLng = function (guid) {
 window.androidCopy = function () {
   return true; // i.e. execute other actions
 };
+
+/**
+ * Given the entity detail data, returns the team the entity belongs to.
+ * Uses TEAM_* enum values.
+ *
+ * @deprecated
+ * @function getTeam
+ * @param {Object} details - The details hash of an entity.
+ * @returns {number} The team ID the entity belongs to.
+ */
+window.getTeam = function (details) {
+  return IITC.utils.getTeamId(details.team);
+};
diff --git a/core/code/entity_info.js b/core/code/entity_info.js
deleted file mode 100644
index 60023798f..000000000
--- a/core/code/entity_info.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/* exported setup --eslint */
-
-/**
- * Entity Details Tools
- * Functions to extract useful data from entity details, such as portals, links, and fields.
- * @module entity_info
- */
-
-/**
- * Given the entity detail data, returns the team the entity belongs to.
- * Uses TEAM_* enum values.
- *
- * @function getTeam
- * @param {Object} details - The details hash of an entity.
- * @returns {number} The team ID the entity belongs to.
- */
-window.getTeam = function (details) {
-  return window.teamStringToId(details.team);
-};
-
-/**
- * Converts a team string to a team ID.
- *
- * @function teamStringToId
- * @param {string} teamStr - The team string to convert.
- * @returns {number} The team ID corresponding to the team string.
- */
-window.teamStringToId = function (teamStr) {
-  var teamIndex = window.TEAM_CODENAMES.indexOf(teamStr);
-  if (teamIndex >= 0) return teamIndex;
-  teamIndex = window.TEAM_CODES.indexOf(teamStr);
-  if (teamIndex >= 0) return teamIndex;
-  return window.TEAM_NONE;
-};
diff --git a/core/code/map.js b/core/code/map.js
index a18443d76..c79baef8a 100644
--- a/core/code/map.js
+++ b/core/code/map.js
@@ -316,6 +316,32 @@ window.setupMap = function () {
 
   map.attributionControl.setPrefix('');
 
+  /**
+   * Override default Google Maps attribution to use Leaflet's native attribution control
+   * instead of creating separate DOM elements. Extracts text content from Google's
+   * attribution container and adds it to Leaflet's control.
+   */
+  L.GridLayer.GoogleMutant.prototype._setupAttribution = function (ev) {
+    if (!this._map?.attributionControl) {
+      return;
+    }
+    // eslint-disable-next-line
+    const pos = google.maps.ControlPosition;
+    const container = ev.positions.get(pos.BOTTOM_RIGHT);
+    const attribution = container?.querySelector('span')?.textContent;
+    if (attribution) {
+      this._attributionText = attribution; // Сохраняем текст атрибуции
+      this._map.attributionControl.addAttribution(attribution);
+    }
+  };
+  const originalGoogleMutantOnRemove = L.GridLayer.GoogleMutant.prototype.onRemove;
+  L.GridLayer.GoogleMutant.prototype.onRemove = function (map) {
+    originalGoogleMutantOnRemove.call(this, map);
+    if (this._attributionText && map.attributionControl) {
+      map.attributionControl.removeAttribution(this._attributionText);
+    }
+  };
+
   window.map = map;
 
   map.on('moveend', function () {
diff --git a/core/code/map_data_render.js b/core/code/map_data_render.js
index 62a5f79ba..fc1c423d9 100644
--- a/core/code/map_data_render.js
+++ b/core/code/map_data_render.js
@@ -46,7 +46,9 @@ window.Render.prototype.clearPortalsOutsideBounds = function (bounds) {
     var p = window.portals[guid];
     // clear portals outside visible bounds - unless it's the selected portal, or it's relevant to artifacts
     if (!bounds.contains(p.getLatLng()) && guid !== window.selectedPortal && !window.artifact.isInterestingPortal(guid)) {
-      this.deletePortalEntity(guid);
+      // remove the marker as a layer first
+      // deletion will be done at endRenderPass
+      p.remove();
     }
   }
 };
@@ -208,10 +210,7 @@ window.Render.prototype.endRenderPass = function () {
   // reorder portals to be after links/fields
   this.bringPortalsToFront();
 
-  // re-select the selected portal, to re-render the side-bar. ensures that any data calculated from the map data is up to date
-  if (window.selectedPortal) {
-    window.renderPortalDetails(window.selectedPortal);
-  }
+  this.isRendering = false;
 };
 
 /**
@@ -305,6 +304,7 @@ window.Render.prototype.deleteFieldEntity = function (guid) {
  * @param {number} latE6 - The latitude of the portal in E6 format.
  * @param {number} lngE6 - The longitude of the portal in E6 format.
  * @param {string} team - The team faction of the portal.
+ * @param {number} [timestamp=0] - Timestamp of the portal data. Defaults to 0 to allow newer data sources to override
  * @param {number} [timestamp] - The timestamp of the portal data.
  */
 window.Render.prototype.createPlaceholderPortalEntity = function (guid, latE6, lngE6, team, timestamp) {
@@ -319,7 +319,7 @@ window.Render.prototype.createPlaceholderPortalEntity = function (guid, latE6, l
 
   var ent = [
     guid, // ent[0] = guid
-    -1, // ent[1] = timestamp - zero will mean any other source of portal data will have a higher timestamp
+    timestamp, // ent[1] = timestamp
     // ent[2] = an array with the entity data
     [
       'p', // 0 - a portal
@@ -329,22 +329,7 @@ window.Render.prototype.createPlaceholderPortalEntity = function (guid, latE6, l
     ],
   ];
 
-  // placeholder portals don't have a useful timestamp value - so the standard code that checks for updated
-  // portal details doesn't apply
-  // so, check that the basic details are valid and delete the existing portal if out of date
-  var portalMoved = false;
-  if (guid in window.portals) {
-    var p = window.portals[guid];
-    portalMoved = latE6 !== p.options.data.latE6 || lngE6 !== p.options.data.lngE6;
-    if (team !== p.options.data.team && p.options.timestamp < timestamp) {
-      // team - delete existing portal
-      this.deletePortalEntity(guid);
-    }
-  }
-
-  if (!portalMoved) {
-    this.createPortalEntity(ent, 'core'); // placeholder
-  }
+  this.createPortalEntity(ent, 'core'); // placeholder
 };
 
 /**
@@ -362,102 +347,95 @@ window.Render.prototype.createPortalEntity = function (ent, details) {
   var previousData = undefined;
 
   var data = window.decodeArray.portal(ent[2], details);
+  var guid = ent[0];
+
+  // add missing fields
+  data.guid = guid;
+  if (!data.timestamp) {
+    data.timestamp = ent[1];
+  }
+
+  // LEGACY - TO BE REMOVED AT SOME POINT! use .guid, .timestamp and .data instead
+  data.ent = ent;
 
   // check if entity already exists
-  if (ent[0] in window.portals) {
+  const oldPortal = guid in window.portals;
+
+  if (oldPortal) {
     // yes. now check to see if the entity data we have is newer than that in place
-    var p = window.portals[ent[0]];
+    var p = window.portals[guid];
 
-    if (!data.history || p.options.data.history === data.history)
-      if (p.options.timestamp >= ent[1]) {
-        return; // this data is identical or older - abort processing
-      }
+    if (!p.willUpdate(data)) {
+      // this data doesn't bring new detail - abort processing
+      // re-add the portal to the relevant layer (does nothing if already in the correct layer)
+      // useful for portals outside the view
+      this.addPortalToMapLayer(p);
+      return p;
+    }
 
     // the data we have is newer. many data changes require re-rendering of the portal
     // (e.g. level changed, so size is different, or stats changed so highlighter is different)
-    // so to keep things simple we'll always re-create the entity in this case
 
     // remember the old details, for the callback
-
-    previousData = p.options.data;
-
-    // preserve history
-    if (!data.history) {
-      data.history = previousData.history;
-    }
-
-    this.deletePortalEntity(ent[0]);
+    previousData = $.extend(true, {}, p.getDetails());
   }
 
-  var portalLevel = parseInt(data.level) || 0;
-  var team = window.teamStringToId(data.team);
-  // the data returns unclaimed portals as level 1 - but IITC wants them treated as level 0
-  if (team === window.TEAM_NONE) portalLevel = 0;
-
   var latlng = L.latLng(data.latE6 / 1e6, data.lngE6 / 1e6);
 
-  var dataOptions = {
-    level: portalLevel,
-    team: team,
-    ent: ent, // LEGACY - TO BE REMOVED AT SOME POINT! use .guid, .timestamp and .data instead
-    guid: ent[0],
-    timestamp: ent[1],
-    data: data,
-  };
-
-  window.pushPortalGuidPositionCache(ent[0], data.latE6, data.lngE6);
-
-  var marker = window.createMarker(latlng, dataOptions);
-
-  function handler_portal_click(e) {
-    window.renderPortalDetails(e.target.options.guid);
-  }
-  function handler_portal_dblclick(e) {
-    window.renderPortalDetails(e.target.options.guid);
-    window.map.setView(e.target.getLatLng(), window.DEFAULT_ZOOM);
-  }
-  function handler_portal_contextmenu(e) {
-    window.renderPortalDetails(e.target.options.guid);
-    if (window.isSmartphone()) {
-      window.show('info');
-    } else if (!$('#scrollwrapper').is(':visible')) {
-      $('#sidebartoggle').click();
-    }
-  }
-
-  marker.on('click', handler_portal_click);
-  marker.on('dblclick', handler_portal_dblclick);
-  marker.on('contextmenu', handler_portal_contextmenu);
-
-  window.runHooks('portalAdded', { portal: marker, previousData: previousData });
-
-  window.portals[ent[0]] = marker;
+  window.pushPortalGuidPositionCache(data.guid, data.latE6, data.lngE6);
 
   // check for URL links to portal, and select it if this is the one
-  if (window.urlPortalLL && window.urlPortalLL[0] === marker.getLatLng().lat && window.urlPortalLL[1] === marker.getLatLng().lng) {
+  if (window.urlPortalLL && window.urlPortalLL[0] === latlng.lat && window.urlPortalLL[1] === latlng.lng) {
     // URL-passed portal found via pll parameter - set the guid-based parameter
-    log.log('urlPortalLL ' + window.urlPortalLL[0] + ',' + window.urlPortalLL[1] + ' matches portal GUID ' + ent[0]);
+    log.log('urlPortalLL ' + window.urlPortalLL[0] + ',' + window.urlPortalLL[1] + ' matches portal GUID ' + data.guid);
 
-    window.urlPortal = ent[0];
+    window.urlPortal = data.guid;
     window.urlPortalLL = undefined; // clear the URL parameter so it's not matched again
   }
-  if (window.urlPortal === ent[0]) {
+  if (window.urlPortal === data.guid) {
     // URL-passed portal found via guid parameter - set it as the selected portal
     log.log('urlPortal GUID ' + window.urlPortal + ' found - selecting...');
-    window.selectedPortal = ent[0];
+    window.selectedPortal = data.guid;
     window.urlPortal = undefined; // clear the URL parameter so it's not matched again
   }
 
-  // (re-)select the portal, to refresh the sidebar on any changes
-  if (ent[0] === window.selectedPortal) {
-    log.log('portal guid ' + ent[0] + ' is the selected portal - re-rendering portal details');
-    window.renderPortalDetails(window.selectedPortal);
+  let marker = undefined;
+  if (oldPortal) {
+    // update marker style/highlight and layer
+    marker = window.portals[data.guid];
+
+    marker.updateDetails(data);
+
+    window.runHooks('portalAdded', { portal: marker, previousData: previousData });
+  } else {
+    marker = window.createMarker(latlng, data);
+
+    // in case of incomplete data while having fresh details in cache, update the portal with those details
+    if (window.portalDetail.isFresh(guid)) {
+      var oldDetails = window.portalDetail.get(guid);
+      if (data.timestamp > oldDetails.timestamp) {
+        // data is more recent than the cached details so we remove them from the cache
+        window.portalDetail.remove(guid);
+      } else if (marker.willUpdate(oldDetails)) {
+        marker.updateDetails(oldDetails);
+      }
+    }
+
+    window.runHooks('portalAdded', { portal: marker });
+
+    window.portals[data.guid] = marker;
+
+    if (window.selectedPortal === data.guid) {
+      marker.renderDetails();
+    }
   }
 
   window.ornaments.addPortal(marker);
 
   // TODO? postpone adding to the map layer
   this.addPortalToMapLayer(marker);
+
+  return marker;
 };
 
 /**
@@ -482,7 +460,7 @@ window.Render.prototype.createFieldEntity = function (ent) {
   // create placeholder portals for field corners. we already do links, but there are the odd case where this is useful
   for (var i = 0; i < 3; i++) {
     var p = data.points[i];
-    this.createPlaceholderPortalEntity(p.guid, p.latE6, p.lngE6, data.team, data.timestamp);
+    this.createPlaceholderPortalEntity(p.guid, p.latE6, p.lngE6, data.team, 0);
   }
 
   // check if entity already exists
diff --git a/core/code/map_data_request.js b/core/code/map_data_request.js
index 1402c4235..91a1073c1 100644
--- a/core/code/map_data_request.js
+++ b/core/code/map_data_request.js
@@ -65,14 +65,6 @@ window.MapDataRequest = function () {
 
   // ensure we have some initial map status
   this.setStatus('startup', undefined, -1);
-
-  // add a portalDetailLoaded hook, so we can use the extended details to update portals on the map
-  var _this = this;
-  window.addHook('portalDetailLoaded', function (data) {
-    if (data.success) {
-      _this.render.createPortalEntity(data.ent, 'detailed');
-    }
-  });
 };
 
 /**
diff --git a/core/code/portal_detail.js b/core/code/portal_detail.js
index 39f25db6e..aa38386ef 100644
--- a/core/code/portal_detail.js
+++ b/core/code/portal_detail.js
@@ -54,27 +54,24 @@ window.portalDetail.isFresh = function (guid) {
   return cache.isFresh(guid);
 };
 
+window.portalDetail.remove = function (guid) {
+  return cache.remove(guid);
+};
+
 var handleResponse = function (deferred, guid, data, success) {
   if (!data || data.error || !data.result) {
     success = false;
   }
 
   if (success) {
-    var dict = window.decodeArray.portal(data.result, 'detailed');
-
     // entity format, as used in map data
-    var ent = [guid, dict.timestamp, data.result];
+    var ent = [guid, data.result[13], data.result];
+    var portal = window.mapDataRequest.render.createPortalEntity(ent, 'detailed');
 
-    cache.store(guid, dict);
-
-    // FIXME..? better way of handling sidebar refreshing...
-
-    if (guid === window.selectedPortal) {
-      window.renderPortalDetails(guid);
-    }
+    cache.store(guid, portal.options.data);
 
-    deferred.resolve(dict);
-    window.runHooks('portalDetailLoaded', { guid: guid, success: success, details: dict, ent: ent });
+    deferred.resolve(portal.options.data);
+    window.runHooks('portalDetailLoaded', { guid: guid, success: success, details: portal.options.data, ent: ent });
   } else {
     if (data && data.error === 'RETRY') {
       // server asked us to try again
diff --git a/core/code/portal_detail_display.js b/core/code/portal_detail_display.js
index 7aa44fb6c..ab6231f3c 100644
--- a/core/code/portal_detail_display.js
+++ b/core/code/portal_detail_display.js
@@ -69,9 +69,12 @@ window.renderPortalUrl = function (lat, lng, title, guid) {
  *
  * @function renderPortalDetails
  * @param {string|null} guid - The globally unique identifier of the portal to display details for.
+ * @param {boolean} [forceSelect=false] - If true, forces the portal to be selected even if it's already the current portal.
  */
-window.renderPortalDetails = function (guid) {
-  window.selectPortal(window.portals[guid] ? guid : null);
+window.renderPortalDetails = function (guid, forceSelect) {
+  if (forceSelect || window.selectedPortal !== guid) {
+    window.selectPortal(window.portals[guid] ? guid : null, 'renderPortalDetails');
+  }
   if ($('#sidebar').is(':visible')) {
     window.resetScrollOnNewPortal();
     window.renderPortalDetails.lastVisible = guid;
@@ -95,34 +98,29 @@ window.renderPortalDetails = function (guid) {
   }
 
   var portal = window.portals[guid];
-  var data = portal.options.data;
-  var details = window.portalDetail.get(guid);
-  var historyDetails = window.getPortalHistoryDetails(data);
-
-  // details and data can get out of sync. if we have details, construct a matching 'data'
-  if (details) {
-    data = window.getPortalSummaryData(details);
-  }
+  var details = portal.getDetails();
+  var hasFullDetails = portal.hasFullDetails();
+  var historyDetails = window.getPortalHistoryDetails(details);
 
-  var modDetails = details ? '<div class="mods">' + window.getModDetails(details) + '</div>' : '';
-  var miscDetails = details ? window.getPortalMiscDetails(guid, details) : '';
-  var resoDetails = details ? window.getResonatorDetails(details) : '';
+  var modDetails = hasFullDetails ? '<div class="mods">' + window.getModDetails(details) + '</div>' : '';
+  var miscDetails = hasFullDetails ? window.getPortalMiscDetails(guid, details) : '';
+  var resoDetails = hasFullDetails ? window.getResonatorDetails(details) : '';
 
   // TODO? other status details...
-  var statusDetails = details ? '' : '<div id="portalStatus">Loading details...</div>';
+  var statusDetails = hasFullDetails ? '' : '<div id="portalStatus">Loading details...</div>';
 
-  var img = window.fixPortalImageUrl(details ? details.image : data.image);
-  var title = (details && details.title) || (data && data.title) || 'null';
+  var img = window.fixPortalImageUrl(details.image);
+  var title = details.title || 'null';
 
-  var lat = data.latE6 / 1e6;
-  var lng = data.lngE6 / 1e6;
+  var lat = details.latE6 / 1e6;
+  var lng = details.lngE6 / 1e6;
 
   var imgTitle = title + '\n\nClick to show full image.';
 
   // portal level. start with basic data - then extend with fractional info in tooltip if available
-  var levelInt = window.teamStringToId(data.team) === window.TEAM_NONE ? 0 : data.level;
+  var levelInt = portal.options.level;
   var levelDetails = levelInt;
-  if (details) {
+  if (hasFullDetails) {
     levelDetails = window.getPortalLevel(details);
     if (levelDetails !== 8) {
       if (levelDetails === Math.ceil(levelDetails)) levelDetails += '\n8';
@@ -136,7 +134,7 @@ window.renderPortalDetails = function (guid) {
 
   $('#portaldetails')
     .html('') // to ensure it's clear
-    .attr('class', window.TEAM_TO_CSS[window.teamStringToId(data.team)])
+    .attr('class', window.TEAM_TO_CSS[window.teamStringToId(details.team)])
     .append(
       $('<h3>', { class: 'title' })
         .text(title)
@@ -147,7 +145,7 @@ window.renderPortalDetails = function (guid) {
               style: 'float: left',
             })
             .click(function () {
-              window.zoomToAndShowPortal(guid, [data.latE6 / 1e6, data.lngE6 / 1e6]);
+              window.zoomToAndShowPortal(guid, [details.latE6 / 1e6, details.lngE6 / 1e6]);
               if (window.isSmartphone()) {
                 window.show('map');
               }
@@ -163,9 +161,6 @@ window.renderPortalDetails = function (guid) {
         .text('X')
         .click(function () {
           window.renderPortalDetails(null);
-          if (window.isSmartphone()) {
-            window.show('map');
-          }
         }),
 
       // help cursor via ".imgpreview img"
@@ -187,9 +182,12 @@ window.renderPortalDetails = function (guid) {
 
   window.renderPortalUrl(lat, lng, title, guid);
 
+  // compatibility
+  var data = hasFullDetails ? window.getPortalSummaryData(details) : details;
+
   // only run the hooks when we have a portalDetails object - most plugins rely on the extended data
   // TODO? another hook to call always, for any plugins that can work with less data?
-  if (details) {
+  if (hasFullDetails) {
     window.runHooks('portalDetailsUpdated', { guid: guid, portal: portal, portalDetails: details, portalData: data });
   }
 };
@@ -337,7 +335,7 @@ window.setPortalIndicators = function (p) {
  * @param {string} guid - The GUID of the portal to select.
  * @returns {boolean} True if the same portal is re-selected (just an update), false if a different portal is selected.
  */
-window.selectPortal = function (guid) {
+window.selectPortal = function (guid, event) {
   var update = window.selectedPortal === guid;
   var oldPortalGuid = window.selectedPortal;
   window.selectedPortal = guid;
@@ -346,20 +344,18 @@ window.selectPortal = function (guid) {
   var newPortal = window.portals[guid];
 
   // Restore style of unselected portal
-  if (!update && oldPortal) window.setMarkerStyle(oldPortal, false);
+  if (!update && oldPortal) oldPortal.setSelected(false);
 
   // Change style of selected portal
-  if (newPortal) {
-    window.setMarkerStyle(newPortal, true);
-
-    if (window.map.hasLayer(newPortal)) {
-      newPortal.bringToFront();
-    }
-  }
+  if (newPortal) newPortal.setSelected(true);
 
   window.setPortalIndicators(newPortal);
 
-  window.runHooks('portalSelected', { selectedPortalGuid: guid, unselectedPortalGuid: oldPortalGuid });
+  window.runHooks('portalSelected', {
+    selectedPortalGuid: guid,
+    unselectedPortalGuid: oldPortalGuid,
+    event: event,
+  });
   return update;
 };
 
diff --git a/core/code/portal_highlighter.js b/core/code/portal_highlighter.js
index a55b1b138..0156d2454 100644
--- a/core/code/portal_highlighter.js
+++ b/core/code/portal_highlighter.js
@@ -61,12 +61,10 @@ window.updatePortalHighlighterControl = function () {
 
   if (window._highlighters !== null) {
     if ($('#portal_highlight_select').length === 0) {
-      $('body').append("<select id='portal_highlight_select'></select>");
+      $('.leaflet-top.leaflet-left').first().append("<select id='portal_highlight_select' class='leaflet-control'></select>");
       $('#portal_highlight_select').change(function () {
         window.changePortalHighlights($(this).val());
       });
-      $('.leaflet-top.leaflet-left').css('padding-top', '20px');
-      $('.leaflet-control-scale-line').css('margin-top', '25px');
     }
     $('#portal_highlight_select').html('');
     $('#portal_highlight_select').append($('<option>').attr('value', window._no_highlighter).text(window._no_highlighter));
@@ -113,7 +111,7 @@ window.changePortalHighlights = function (name) {
  */
 window.highlightPortal = function (p) {
   if (window._highlighters !== null && window._highlighters[window._current_highlighter] !== undefined) {
-    window._highlighters[window._current_highlighter].highlight({ portal: p });
+    return window._highlighters[window._current_highlighter].highlight({ portal: p });
   }
 };
 
diff --git a/core/code/portal_info.js b/core/code/portal_info.js
index 6cd62b16b..9a210901f 100644
--- a/core/code/portal_info.js
+++ b/core/code/portal_info.js
@@ -59,6 +59,21 @@ window.getCurrentPortalEnergy = function (d) {
   return nrg;
 };
 
+/**
+ * Calculates the health percentage of a portal based on its current and total energy.
+ *
+ * @function getPortalHealth
+ * @param {Object} d - The portal detail object containing resonator information.
+ * @returns {number} The portal health as a percentage (0-100).
+ *                   Returns 0 if the portal has no total energy.
+ */
+window.getPortalHealth = function (d) {
+  var max = window.getTotalPortalEnergy(d);
+  var cur = window.getCurrentPortalEnergy(d);
+
+  return max > 0 ? Math.floor((cur / max) * 100) : 0;
+};
+
 /**
  * Calculates the range of a portal for creating links. The range depends on portal level and any installed Link Amps.
  *
diff --git a/core/code/portal_marker.js b/core/code/portal_marker.js
index 0ad3f5192..4a2abf4d9 100644
--- a/core/code/portal_marker.js
+++ b/core/code/portal_marker.js
@@ -1,10 +1,282 @@
-/* global L -- eslint */
+/* global IITC, L, log -- eslint */
 
 /**
  * @file This file contains the code related to creating and updating portal markers on the map.
  * @module portal_marker
  */
 
+// portal hooks
+function handler_portal_click(e) {
+  window.selectPortal(e.target.options.guid, e.type);
+  window.renderPortalDetails(e.target.options.guid);
+}
+
+function handler_portal_dblclick(e) {
+  window.selectPortal(e.target.options.guid, e.type);
+  window.renderPortalDetails(e.target.options.guid);
+  window.map.setView(e.target.getLatLng(), window.DEFAULT_ZOOM);
+}
+
+function handler_portal_contextmenu(e) {
+  window.selectPortal(e.target.options.guid, e.type);
+  window.renderPortalDetails(e.target.options.guid);
+  if (window.isSmartphone()) {
+    window.show('info');
+  } else if (!$('#scrollwrapper').is(':visible')) {
+    $('#sidebartoggle').click();
+  }
+}
+
+L.PortalMarker = L.CircleMarker.extend({
+  options: {},
+
+  statics: {
+    // base style
+    portalBaseStyle: {
+      stroke: true,
+      opacity: 1,
+      fill: true,
+      fillOpacity: 0.5,
+      interactive: true,
+    },
+    // placeholder style
+    placeholderStyle: {
+      dashArray: '1,2',
+      weight: 1,
+    },
+    // portal level   0  1  2  3  4  5  6  7  8
+    LEVEL_TO_WEIGHT: [2, 2, 2, 2, 2, 3, 3, 4, 4],
+    LEVEL_TO_RADIUS: [7, 7, 7, 7, 8, 8, 9, 10, 11],
+  },
+
+  initialize: function (latlng, data) {
+    L.CircleMarker.prototype.initialize.call(this, latlng);
+    this._selected = data.guid === window.selectedPortal;
+    this.updateDetails(data);
+
+    this.on('click', handler_portal_click);
+    this.on('dblclick', handler_portal_dblclick);
+    this.on('contextmenu', handler_portal_contextmenu);
+  },
+
+  willUpdate: function (details) {
+    // details are from a placeholder
+    if (details.level === undefined) {
+      // if team differs and corresponding link is more recent (ignore field)
+      return this._details.timestamp < details.timestamp && this._details.team !== details.team;
+    }
+    // more recent timestamp, this occurs when the data has changed because of:
+    //  - resonator deploy/upgrade
+    //  - mod deploy
+    //  - recharge/damage/decay
+    //  - portal edit (title, location, portal main picture)
+    if (this._details.timestamp < details.timestamp) {
+      return true;
+    }
+    // current marker is a placeholder, and details is real data
+    if (this.isPlaceholder() && this._details.team === details.team) {
+      return true;
+    }
+    // even if we get history that was missing ? is it even possible ?
+    if (this._details.timestamp > details.timestamp) {
+      return false;
+    }
+
+    // this._details.timestamp === details.timestamp
+
+    // get new history
+    if (details.history) {
+      if (!this._details.history) {
+        return true;
+      }
+      if (this._details.history._raw !== details.history._raw) {
+        return true;
+      }
+    }
+
+    // get details portal data
+    if (!this._details.mods && details.mods) {
+      return true;
+    }
+
+    return false;
+  },
+
+  updateDetails: function (details) {
+    if (this._details) {
+      // portal has been moved
+      if (this._details.latE6 !== details.latE6 || this._details.lngE6 !== details.lngE6) {
+        this.setLatLng(L.latLng(details.latE6 / 1e6, details.lngE6 / 1e6));
+      }
+
+      // core data from a placeholder
+      if (details.level === undefined) {
+        // if team has changed
+        if (this._details.timestamp < details.timestamp && this._details.team !== details.team) {
+          // keep history, title, image
+          details.title = this._details.title;
+          details.image = this._details.image;
+          details.history = this._details.history;
+          this._details = details;
+        }
+      } else if (this._details.timestamp === details.timestamp) {
+        // we got more details (core/summary -> summary/detailed/extended)
+        var localThis = this;
+        [
+          'level',
+          'health',
+          'resCount',
+          'image',
+          'title',
+          'ornaments',
+          'mission',
+          'mission50plus',
+          'artifactBrief',
+          'mods',
+          'resonators',
+          'owner',
+          'artifactDetail',
+        ].forEach(function (prop) {
+          if (details[prop]) localThis._details[prop] = details[prop];
+        });
+        // smarter update for history (cause it's missing sometimes)
+        if (details.history) {
+          if (!this._details.history) {
+            this._details.history = details.history;
+          } else {
+            if (this._details.history._raw && details.history._raw !== this._details.history._raw) {
+              log.warn('new portal data has lost some history');
+            }
+            this._details.history._raw |= details.history._raw;
+            ['visited', 'captured', 'scoutControlled'].forEach(function (prop) {
+              localThis._details.history[prop] ||= details.history[prop];
+            });
+          }
+        }
+        // LEGACY - TO BE REMOVED AT SOME POINT! use .guid, .timestamp and .data instead
+        this._details.ent = details.ent;
+      } else {
+        // permanent data (history only)
+        if (!details.history) {
+          details.history = this._details.history;
+        }
+
+        this._details = details;
+      }
+    } else {
+      this._details = details;
+    }
+
+    this._level = parseInt(this._details.level) || 0;
+    this._team = IITC.utils.getTeamId(this._details.team);
+
+    // the data returns unclaimed portals as level 1 - but IITC wants them treated as level 0
+    if (this._team === window.TEAM_NONE) {
+      this._level = 0;
+    }
+
+    // compatibility
+    var dataOptions = {
+      guid: this._details.guid,
+      level: this._level,
+      team: this._team,
+      ent: this._details.ent, // LEGACY - TO BE REMOVED AT SOME POINT! use .guid, .timestamp and .data instead
+      timestamp: this._details.timestamp,
+      data: this._details,
+    };
+    L.setOptions(this, dataOptions);
+
+    if (this._selected) {
+      this.renderDetails();
+    }
+
+    this.setSelected();
+  },
+
+  renderDetails() {
+    if (!this._rendering) {
+      this._rendering = true;
+      window.renderPortalDetails(this._details.guid);
+      this._rendering = false;
+    }
+  },
+
+  getDetails: function () {
+    return this._details;
+  },
+
+  isPlaceholder: function () {
+    return this._details.level === undefined;
+  },
+
+  hasFullDetails: function () {
+    return !!this._details.mods;
+  },
+
+  setStyle: function (style) {
+    // stub for highlighters
+    L.Util.setOptions(this, style);
+    return this;
+  },
+
+  setMarkerStyle: function (style) {
+    var styleOptions = L.Util.extend(this._style(), style);
+    L.Util.setOptions(this, styleOptions);
+
+    L.Util.setOptions(this, window.highlightPortal(this));
+
+    var selected = L.extend({ radius: this.options.radius }, this._selected && { color: window.COLOR_SELECTED_PORTAL });
+    return L.CircleMarker.prototype.setStyle.call(this, selected);
+  },
+
+  setSelected: function (selected) {
+    if (selected === false) {
+      this._selected = false;
+    } else {
+      this._selected = this._selected || selected;
+    }
+
+    this.setMarkerStyle();
+
+    if (this._selected && window.map.hasLayer(this)) {
+      this.bringToFront();
+    }
+  },
+
+  _style: function () {
+    var dashArray = null;
+    // dashed outline for placeholder portals
+    if (this.isPlaceholder()) {
+      dashArray = L.PortalMarker.placeholderStyle.dashArray;
+    }
+
+    return L.extend(this._scale(), L.PortalMarker.portalBaseStyle, {
+      color: window.COLORS[this._team],
+      fillColor: window.COLORS[this._team],
+      dashArray: dashArray,
+    });
+  },
+
+  _scale: function () {
+    var scale = window.portalMarkerScale();
+
+    var level = Math.floor(this._level || 0);
+
+    var lvlWeight = L.PortalMarker.LEVEL_TO_WEIGHT[level] * Math.sqrt(scale);
+    var lvlRadius = L.PortalMarker.LEVEL_TO_RADIUS[level] * scale;
+
+    // thinner outline for placeholder portals
+    if (this.isPlaceholder()) {
+      lvlWeight = L.PortalMarker.placeholderStyle.weight;
+    }
+
+    return {
+      radius: lvlRadius,
+      weight: lvlWeight,
+    };
+  },
+});
+
 /**
  * Calculates the scale of portal markers based on the current zoom level of the map.
  *
@@ -23,39 +295,21 @@ window.portalMarkerScale = function () {
  * @function createMarker
  * @param {L.LatLng} latlng - The latitude and longitude where the marker will be placed.
  * @param {Object} data - The IITC-specific entity data to be stored in the marker options.
- * @returns {L.circleMarker} A Leaflet circle marker representing the portal.
+ * @returns {L.PortalMarker} A Leaflet circle marker representing the portal.
  */
 window.createMarker = function (latlng, data) {
-  var styleOptions = window.getMarkerStyleOptions(data);
-
-  var options = L.extend({}, data, styleOptions, { interactive: true });
-
-  var marker = L.circleMarker(latlng, options);
-
-  window.highlightPortal(marker);
-
-  return marker;
+  return new L.PortalMarker(latlng, data);
 };
 
 /**
  * Sets the style of a portal marker, including options for when the portal is selected.
  *
  * @function setMarkerStyle
- * @param {L.circleMarker} marker - The portal marker whose style will be set.
+ * @param {L.PortalMarker} marker - The portal marker whose style will be set.
  * @param {boolean} selected - Indicates if the portal is selected.
  */
 window.setMarkerStyle = function (marker, selected) {
-  var styleOptions = window.getMarkerStyleOptions(marker.options);
-
-  marker.setStyle(styleOptions);
-
-  // FIXME? it's inefficient to set the marker style (above), then do it again inside the highlighter
-  // the highlighter API would need to be changed for this to be improved though. will it be too slow?
-  window.highlightPortal(marker);
-
-  if (selected) {
-    marker.setStyle({ color: window.COLOR_SELECTED_PORTAL });
-  }
+  marker.setSelected(selected);
 };
 
 /**
@@ -68,33 +322,30 @@ window.setMarkerStyle = function (marker, selected) {
 window.getMarkerStyleOptions = function (details) {
   var scale = window.portalMarkerScale();
 
-  //   portal level      0  1  2  3  4  5  6  7  8
-  var LEVEL_TO_WEIGHT = [2, 2, 2, 2, 2, 3, 3, 4, 4];
-  var LEVEL_TO_RADIUS = [7, 7, 7, 7, 8, 8, 9, 10, 11];
-
   var level = Math.floor(details.level || 0);
 
-  var lvlWeight = LEVEL_TO_WEIGHT[level] * Math.sqrt(scale);
-  var lvlRadius = LEVEL_TO_RADIUS[level] * scale;
+  var lvlWeight = L.PortalMarker.LEVEL_TO_WEIGHT[level] * Math.sqrt(scale);
+  var lvlRadius = L.PortalMarker.LEVEL_TO_RADIUS[level] * scale;
 
   var dashArray = null;
   // thinner and dashed outline for placeholder portals
   if (details.team !== window.TEAM_NONE && level === 0) {
-    lvlWeight = 1;
-    dashArray = '1,2';
+    lvlWeight = L.PortalMarker.placeholderStyle.weight;
+    dashArray = L.PortalMarker.placeholderStyle.dashArray;
   }
 
-  var options = {
-    radius: lvlRadius,
-    stroke: true,
-    color: window.COLORS[details.team],
-    weight: lvlWeight,
-    opacity: 1,
-    fill: true,
-    fillColor: window.COLORS[details.team],
-    fillOpacity: 0.5,
-    dashArray: dashArray,
-  };
+  var options = L.extend(
+    {
+      radius: lvlRadius,
+      weight: lvlWeight,
+    },
+    L.PortalMarker.portalBaseStyle,
+    {
+      color: window.COLORS[details.team],
+      fillColor: window.COLORS[details.team],
+      dashArray: dashArray,
+    }
+  );
 
   return options;
 };
diff --git a/core/code/search.js b/core/code/search.js
index 275351531..a75769e7c 100644
--- a/core/code/search.js
+++ b/core/code/search.js
@@ -1,4 +1,4 @@
-/* global L -- eslint */
+/* global IITC -- eslint */
 
 /**
  * Provides functionality for the search system within the application.
@@ -6,516 +6,138 @@
  * You can implement your own result provider by listening to the search hook:
  * ```window.addHook('search', function(query) {});```.
  *
- * The `query` object has the following members:
- * - `term`: The term for which the user has searched.
- * - `confirmed`: A boolean indicating if the user has pressed enter after searching.
- *   You should not search online or do heavy processing unless the user has confirmed the search term.
- * - `addResult(result)`: A method to add a result to the query.
- *
- * The `result` object can have the following members (`title` is required, as well as one of `position` and `bounds`):
- * - `title`: The label for this result. Will be interpreted as HTML, so make sure to escape properly.
- * - `description`: Secondary information for this result. Will be interpreted as HTML, so make sure to escape properly.
- * - `position`: A L.LatLng object describing the position of this result.
- * - `bounds`: A L.LatLngBounds object describing the bounds of this result.
- * - `layer`: An ILayer to be added to the map when the user selects this search result.
- *   Will be generated if not set. Set to `null` to prevent the result from being added to the map.
- * - `icon`: A URL to an icon to display in the result list. Should be 12x12 pixels.
- * - `onSelected(result, event)`: A handler to be called when the result is selected.
- *   May return `true` to prevent the map from being repositioned. You may reposition the map yourself or do other work.
- * - `onRemove(result)`: A handler to be called when the result is removed from the map
- *   (because another result has been selected or the search was cancelled by the user).
- *  @namespace window.search
- */
-window.search = {
-  lastSearch: null,
-};
-
-/**
- * Represents a search query.
- *
- * @memberof window.search
- * @class
- * @name window.search.Query
- * @param {string} term - The search term.
- * @param {boolean} confirmed - Indicates if the search is confirmed (e.g., by pressing Enter).
+ * @example
+ * // Adding a search result
+ * window.addHook('search', function(query) {
+ *   query.addResult({
+ *     title: 'My Result',
+ *     position: L.latLng(0, 0)
+ *   });
+ * });
+ *
+ *  @namespace IITC.search
+ *  @memberof IITC
  */
-window.search.Query = function (term, confirmed) {
-  this.term = term;
-  this.confirmed = confirmed;
-  this.init();
-};
 
 /**
- * Initializes the search query, setting up the DOM elements and triggering the 'search' hook.
- *
- * @function
+ * @memberOf IITC.search
+ * @typedef {Object} SearchQuery
+ * @property {string} term - The term for which the user has searched.
+ * @property {boolean} confirmed - Indicates if the user has pressed enter after searching.
+ *           You should not search online or do heavy processing unless the user has confirmed the search term.
+ * @property {IITC.search.Query.addResult} addResult - Method to add a result to the query.
+ * @property {IITC.search.Query.addPortalResult} addPortalResult - Method to add a portal to the query.
  */
-window.search.Query.prototype.init = function () {
-  this.results = [];
-
-  this.container = $('<div>').addClass('searchquery');
-
-  this.header = $('<h3>')
-    .text(
-      this.confirmed
-        ? this.term
-        : (this.term.length > 16 ? this.term.substr(0, 8) + '…' + this.term.substr(this.term.length - 8, 8) : this.term) + ' (Return to load more)'
-    )
-    .appendTo(this.container);
-
-  this.list = $('<ul>')
-    .appendTo(this.container)
-    .append($('<li>').text(this.confirmed ? 'No local results, searching online...' : 'No local results.'));
-
-  this.container.accordion({
-    collapsible: true,
-    heightStyle: 'content',
-  });
-
-  window.runHooks('search', this);
-};
-
-/**
- * Displays the search query results in the search wrapper.
- *
- * @function
- */
-window.search.Query.prototype.show = function () {
-  this.container.appendTo('#searchwrapper');
-};
-
-/**
- * Hides the search query results and cleans up.
- *
- * @function
- */
-window.search.Query.prototype.hide = function () {
-  this.container.remove();
-  this.removeSelectedResult();
-  this.removeHoverResult();
-};
-
-/**
- * Adds a search result to this query.
- *
- * @function
- * @param {Object} result - The search result object to add.
- */
-window.search.Query.prototype.addResult = function (result) {
-  if (this.results.length === 0) {
-    // remove 'No results'
-    this.list.empty();
-  }
-
-  this.results.push(result);
-  var item = $('<li>')
-    .appendTo(this.list)
-    .attr('tabindex', '0')
-    .on(
-      'click dblclick',
-      function (ev) {
-        this.onResultSelected(result, ev);
-      }.bind(this)
-    )
-    .on(
-      'mouseover',
-      function (ev) {
-        this.onResultHoverStart(result, ev);
-      }.bind(this)
-    )
-    .on(
-      'mouseout',
-      function (ev) {
-        this.onResultHoverEnd(result, ev);
-      }.bind(this)
-    )
-    .keypress(function (ev) {
-      if ((ev.keyCode || ev.charCode || ev.which) === 32) {
-        ev.preventDefault();
-        ev.type = 'click';
-        $(this).trigger(ev);
-        return;
-      }
-      if ((ev.keyCode || ev.charCode || ev.which) === 13) {
-        ev.preventDefault();
-        ev.type = 'dblclick';
-        $(this).trigger(ev);
-        return;
-      }
-    });
-
-  var link = $('<a>').append(result.title).appendTo(item);
-
-  if (result.icon) {
-    link.css('background-image', 'url("' + result.icon + '")');
-    item.css('list-style', 'none');
-  }
-
-  if (result.description) {
-    item.append($('<br>')).append($('<em>').append(result.description));
-  }
-};
-
-/**
- * Creates and returns a layer for the given search result, which could be markers or shapes on the map.
- *
- * @function
- * @param {Object} result - The search result object.
- * @returns {L.Layer} The layer created for this result.
- */
-window.search.Query.prototype.resultLayer = function (result) {
-  if (result.layer !== null && !result.layer) {
-    result.layer = L.layerGroup();
-
-    if (result.position) {
-      L.marker(result.position, {
-        icon: L.divIcon.coloredSvg('red'),
-        title: result.title,
-      }).addTo(result.layer);
-    }
-
-    if (result.bounds) {
-      L.rectangle(result.bounds, {
-        title: result.title,
-        interactive: false,
-        color: 'red',
-        fill: false,
-      }).addTo(result.layer);
-    }
-  }
-  return result.layer;
-};
-
-/**
- * Handles the selection of a search result, including map view adjustments and layer management.
- *
- * @function
- * @param {Object} result - The selected search result object.
- * @param {Event} ev - The event associated with the selection.
- */
-window.search.Query.prototype.onResultSelected = function (result, ev) {
-  this.removeHoverResult();
-  this.removeSelectedResult();
-  this.selectedResult = result;
-
-  if (result.onSelected) {
-    if (result.onSelected(result, ev)) return;
-  }
-
-  if (ev.type === 'dblclick') {
-    if (result.position) {
-      window.map.setView(result.position, window.DEFAULT_ZOOM);
-    } else if (result.bounds) {
-      window.map.fitBounds(result.bounds, { maxZoom: window.DEFAULT_ZOOM });
-    }
-  } else {
-    // ev.type != 'dblclick'
-    if (result.bounds) {
-      window.map.fitBounds(result.bounds, { maxZoom: window.DEFAULT_ZOOM });
-    } else if (result.position) {
-      window.map.setView(result.position);
-    }
-  }
-
-  result.layer = this.resultLayer(result);
-
-  if (result.layer) window.map.addLayer(result.layer);
-
-  if (window.isSmartphone()) window.show('map');
-};
 
-/**
- * Removes the currently selected search result from the map and performs cleanup.
- *
- * @function
- */
-window.search.Query.prototype.removeSelectedResult = function () {
-  if (this.selectedResult) {
-    if (this.selectedResult.layer) window.map.removeLayer(this.selectedResult.layer);
-    if (this.selectedResult.onRemove) this.selectedResult.onRemove(this.selectedResult);
-  }
-};
-
-/**
- * Handles the start of a hover over a search result. Adds the layer for the result to the map if not already selected.
- *
- * @function
- * @param {Object} result - The search result object being hovered over.
- */
-window.search.Query.prototype.onResultHoverStart = function (result) {
-  this.removeHoverResult();
-  this.hoverResult = result;
-
-  if (result === this.selectedResult) return;
-
-  result.layer = this.resultLayer(result);
-
-  if (result.layer) window.map.addLayer(result.layer);
-};
-
-/**
- * Removes the hover result layer from the map unless it's the selected result.
- *
- * @function
- */
-window.search.Query.prototype.removeHoverResult = function () {
-  if (this.hoverResult !== this.selectedResult) {
-    if (this.hoverResult) {
-      if (this.hoverResult.layer) {
-        window.map.removeLayer(this.hoverResult.layer);
-      }
-    }
-  }
-  this.hoverResult = null;
-};
-
-/**
- * Handles the end of a hover over a search result. Removes the hover result layer from the map.
- */
-window.search.Query.prototype.onResultHoverEnd = function () {
-  this.removeHoverResult();
+IITC.search = {
+  lastSearch: null,
 };
 
 /**
  * Initiates a search with the specified term and confirmation status.
  *
- * @function window.search.doSearch
+ * @function IITC.search.doSearch
  * @param {string} term - The search term.
  * @param {boolean} confirmed - Indicates if the search term is confirmed.
  */
-window.search.doSearch = function (term, confirmed) {
-  term = term.trim();
+IITC.search.doSearch = function (term, confirmed) {
+  const searchTerm = term.trim();
+  const searchCancelButton = document.querySelector('#searchcancel');
+
+  if (searchCancelButton) {
+    searchCancelButton.classList.toggle('visible', searchTerm.length > 0);
+  }
 
-  // minimum 3 characters for automatic search
-  if (term.length < 3 && !confirmed) return;
+  // Minimum 3 characters for automatic search
+  if (searchTerm.length < 3 && !confirmed) return;
 
-  // don't clear last confirmed search
-  if (window.search.lastSearch && window.search.lastSearch.confirmed && !confirmed) return;
+  // Avoid clearing last confirmed search
+  const lastSearch = IITC.search.lastSearch;
+  if (lastSearch?.confirmed && !confirmed) return;
 
-  // don't make the same query again
-  if (window.search.lastSearch && window.search.lastSearch.confirmed === confirmed && window.search.lastSearch.term === term) return;
+  // Prevent repeat of identical query
+  if (lastSearch?.confirmed === confirmed && lastSearch.term === searchTerm) return;
 
-  if (window.search.lastSearch) window.search.lastSearch.hide();
-  window.search.lastSearch = null;
+  if (lastSearch) lastSearch.hide();
+  IITC.search.lastSearch = null;
 
-  // clear results
-  if (term === '') return;
+  if (searchTerm === '') return;
 
   if (window.useAppPanes()) window.show('info');
 
-  $('.ui-tooltip').remove();
+  document.querySelectorAll('.ui-tooltip').forEach((tooltip) => tooltip.remove());
 
-  window.search.lastSearch = new window.search.Query(term, confirmed);
-  window.search.lastSearch.show();
+  IITC.search.lastSearch = new IITC.search.Query(searchTerm, confirmed);
+  IITC.search.lastSearch.show();
 };
 
 /**
  * Sets up the search input field and button functionality.
  *
- * @function window.search.setup
+ * @function IITC.search.setup
  */
-window.search.setup = function () {
-  $('#search')
-    .keypress(function (e) {
-      if ((e.keyCode ? e.keyCode : e.which) !== 13) return;
+IITC.search.setup = function () {
+  const searchInput = document.querySelector('#search');
+  const searchCancelButton = document.querySelector('#searchcancel');
+  const geoLocationButton = document.querySelector('#buttongeolocation');
+  let searchTimer;
+
+  if (searchInput) {
+    searchInput.addEventListener('keydown', (e) => {
+      if (e.key !== 'Enter') return;
       e.preventDefault();
 
-      var term = $(this).val();
-
-      clearTimeout(window.search.timer);
-      window.search.doSearch(term, true);
-    })
-    .on('keyup keypress change paste', function () {
-      clearTimeout(window.search.timer);
-      window.search.timer = setTimeout(
-        function () {
-          var term = $(this).val();
-          window.search.doSearch(term, false);
-        }.bind(this),
-        500
-      );
-    });
-  $('#buttongeolocation').click(function () {
-    window.map.locate({ setView: true, maxZoom: 13 });
-  });
-};
-
-/**
- * Adds a search result for a portal to the search query results.
- *
- * @function window.search.addSearchResult
- * @param {Object} query - The search query object to which the result will be added.
- * @param {Object} data - The data for the search result. This includes information such as title, team, level, health, etc.
- * @param {string} guid - GUID if the portal.
- */
-window.search.addSearchResult = function (query, data, guid) {
-  var team = window.teamStringToId(data.team);
-  var color = team === window.TEAM_NONE ? '#CCC' : window.COLORS[team];
-  var latLng = L.latLng(data.latE6 / 1e6, data.lngE6 / 1e6);
-  query.addResult({
-    title: data.title,
-    description: window.TEAM_SHORTNAMES[team] + ', L' + data.level + ', ' + data.health + '%, ' + data.resCount + ' Resonators',
-    position: latLng,
-    icon: 'data:image/svg+xml;base64,' + btoa('@include_string:images/icon-portal.svg@'.replace(/%COLOR%/g, color)),
-    onSelected: function (result, event) {
-      if (event.type === 'dblclick') {
-        window.zoomToAndShowPortal(guid, latLng);
-      } else if (window.portals[guid]) {
-        if (!window.map.getBounds().contains(result.position)) {
-          window.map.setView(result.position);
-        }
-        window.renderPortalDetails(guid);
-      } else {
-        window.selectPortalByLatLng(latLng);
-      }
-      return true; // prevent default behavior
-    },
-  });
-};
-
-// search for portals
-window.addHook('search', function (query) {
-  var term = query.term.toLowerCase();
-
-  $.each(window.portals, function (guid, portal) {
-    var data = portal.options.data;
-    if (!data.title) return;
-
-    if (data.title.toLowerCase().indexOf(term) !== -1) {
-      window.search.addSearchResult(query, data, guid);
-    }
-  });
-});
-
-// search for locations
-// TODO: recognize 50°31'03.8"N 7°59'05.3"E and similar formats
-window.addHook('search', function (query) {
-  var locations = query.term.replaceAll(/%2C/gi, ',').match(/[+-]?\d+\.\d+, ?[+-]?\d+\.\d+/g);
-  var added = {};
-  if (!locations) return;
-  locations.forEach(function (location) {
-    var pair = location.split(',').map(function (s) {
-      return parseFloat(s.trim()).toFixed(6);
+      const term = searchInput.value.trim();
+      clearTimeout(searchTimer);
+      IITC.search.doSearch(term, true);
     });
-    var ll = pair.join(',');
-    var latlng = L.latLng(
-      pair.map(function (s) {
-        return parseFloat(s);
-      })
-    );
-    if (added[ll]) return;
-    added[ll] = true;
-
-    query.addResult({
-      title: ll,
-      description: 'geo coordinates',
-      position: latlng,
-      onSelected: function (result) {
-        for (var guid in window.portals) {
-          var p = window.portals[guid].getLatLng();
-          if (p.lat.toFixed(6) + ',' + p.lng.toFixed(6) === ll) {
-            window.renderPortalDetails(guid);
-            return;
-          }
-        }
 
-        window.urlPortalLL = [result.position.lat, result.position.lng];
-      },
+    searchInput.addEventListener('input', () => {
+      clearTimeout(searchTimer);
+      searchTimer = setTimeout(() => {
+        const term = searchInput.value.trim();
+        IITC.search.doSearch(term, false);
+      }, 100);
     });
-  });
-});
-
-// search on OpenStreetMap
-window.addHook('search', function (query) {
-  if (!query.confirmed) return;
-
-  // Viewbox search orders results so they're closer to the viewbox
-  var mapBounds = window.map.getBounds();
-  var viewbox =
-    '&viewbox=' + mapBounds.getSouthWest().lng + ',' + mapBounds.getSouthWest().lat + ',' + mapBounds.getNorthEast().lng + ',' + mapBounds.getNorthEast().lat;
-
-  var resultCount = 0;
-  var resultMap = {};
-  function onQueryResult(isViewboxResult, data) {
-    resultCount += data.length;
-    if (isViewboxResult) {
-      // Search for things outside the viewbox
-      $.getJSON(window.NOMINATIM + encodeURIComponent(query.term) + viewbox, onQueryResult.bind(null, false));
-      if (resultCount === 0) {
-        return;
-      }
-    } else {
-      if (resultCount === 0) {
-        query.addResult({
-          title: 'No results on OpenStreetMap',
-          icon: '//www.openstreetmap.org/favicon.ico',
-          onSelected: function () {
-            return true;
-          },
-        });
-        return;
-      }
-    }
-
-    data.forEach(function (item) {
-      if (resultMap[item.place_id]) {
-        return;
-      } // duplicate
-      resultMap[item.place_id] = true;
+  }
 
-      var result = {
-        title: item.display_name,
-        description: 'Type: ' + item.type,
-        position: L.latLng(parseFloat(item.lat), parseFloat(item.lon)),
-        icon: item.icon,
-      };
+  if (searchCancelButton) {
+    searchCancelButton.classList.remove('visible');
 
-      if (item.geojson) {
-        result.layer = L.geoJson(item.geojson, {
-          interactive: false,
-          color: 'red',
-          opacity: 0.7,
-          weight: 2,
-          fill: false,
-          pointToLayer: function (featureData, latLng) {
-            return L.marker(latLng, {
-              icon: L.divIcon.coloredSvg('red'),
-              title: item.display_name,
-            });
-          },
-        });
-      }
+    searchCancelButton.addEventListener('click', () => {
+      if (searchInput) {
+        searchInput.value = '';
+        searchInput.focus();
+        searchCancelButton.classList.remove('visible');
 
-      var b = item.boundingbox;
-      if (b) {
-        var southWest = new L.LatLng(b[0], b[2]),
-          northEast = new L.LatLng(b[1], b[3]);
-        result.bounds = new L.LatLngBounds(southWest, northEast);
+        // Clear the current search
+        clearTimeout(searchTimer);
+        IITC.search.doSearch('', true);
       }
-
-      query.addResult(result);
     });
   }
 
-  // Bounded search allows amenity-only searches (e.g. "amenity=toilet") via special phrases
-  // http://wiki.openstreetmap.org/wiki/Nominatim/Special_Phrases/EN
-  var bounded = '&bounded=1';
+  if (geoLocationButton) {
+    geoLocationButton.addEventListener('click', () => {
+      window.map.locate({ setView: true, maxZoom: 13 });
+    });
+  }
+};
 
-  $.getJSON(window.NOMINATIM + encodeURIComponent(query.term) + viewbox + bounded, onQueryResult.bind(null, true));
+// Redirect all window.search access to IITC.search
+Object.defineProperty(window, 'search', {
+  get() {
+    return IITC.search;
+  },
+  set(value) {
+    IITC.search = value;
+  },
+  configurable: true,
 });
 
-// search on guid
-window.addHook('search', function (query) {
-  const guid_re = /[0-9a-f]{32}\.[0-9a-f]{2}/;
-  const res = query.term.match(guid_re);
-  if (res) {
-    const guid = res[0];
-    const data = window.portalDetail.get(guid);
-    if (data) window.search.addSearchResult(query, data, guid);
-    else {
-      window.portalDetail.request(guid).then(function (data) {
-        window.search.addSearchResult(query, data, guid);
-      });
-    }
-  }
-});
+/*
+ * @deprecated - use query.addPortalResult
+ */
+window.search.addSearchResult = function (query, data, guid) {
+  query.addPortalResult(data, guid);
+};
diff --git a/core/code/search_hooks.js b/core/code/search_hooks.js
new file mode 100644
index 000000000..4bd97342b
--- /dev/null
+++ b/core/code/search_hooks.js
@@ -0,0 +1,200 @@
+/* global L -- eslint */
+
+/**
+ * Handles search-related hooks for the IITC.search module, adding various search result types.
+ *
+ * These functions supply default search results to the IITC search system by responding to `search` hooks with
+ * data for portals, geographic coordinates, OpenStreetMap locations, and portal GUIDs.
+ *
+ * @namespace hooks
+ * @memberof IITC.search
+ */
+
+/**
+ * Searches for portals by matching the query term against portal titles and adds matched results.
+ *
+ * @param {Object} query - The search query object.
+ * @fires hook#search
+ */
+window.addHook('search', (query) => {
+  const term = query.term.toLowerCase();
+
+  for (const [guid, portal] of Object.entries(window.portals)) {
+    const data = portal.options.data;
+    if (!data.title) continue;
+
+    if (data.title.toLowerCase().includes(term)) {
+      window.search.addSearchResult(query, data, guid);
+    }
+  }
+});
+
+/**
+ * Searches for geographical coordinates formatted as latitude, longitude and adds the results.
+ * Supports both decimal format (e.g., 51.5074, -0.1278) and DMS format (e.g., 50°31'03.8"N 7°59'05.3"E).
+ *
+ * @param {Object} query - The search query object.
+ * @fires hook#search
+ */
+window.addHook('search', (query) => {
+  const added = new Set();
+
+  // Regular expression for decimal coordinates
+  const decimalRegex = /[+-]?\d+\.\d+, ?[+-]?\d+\.\d+/g;
+  // Regular expression for DMS coordinates
+  const dmsRegex = /(\d{1,3})°(\d{1,2})'(\d{1,2}(?:\.\d+)?)?"\s*([NS]),?\s*(\d{1,3})°(\d{1,2})'(\d{1,2}(?:\.\d+)?)?"\s*([EW])/g;
+
+  // Convert DMS to decimal format
+  const parseDMS = (deg, min, sec, dir) => {
+    const decimal = parseFloat(deg) + parseFloat(min) / 60 + parseFloat(sec) / 3600;
+    return dir === 'S' || dir === 'W' ? -decimal : decimal;
+  };
+
+  // Universal function for adding search result
+  const addResult = (lat, lng) => {
+    const latLngString = `${lat.toFixed(6)},${lng.toFixed(6)}`;
+    if (added.has(latLngString)) return;
+    added.add(latLngString);
+
+    query.addResult({
+      title: latLngString,
+      description: 'geo coordinates',
+      position: L.latLng(lat, lng),
+      onSelected: (result) => {
+        for (const [guid, portal] of Object.entries(window.portals)) {
+          const { lat: pLat, lng: pLng } = portal.getLatLng();
+          if (`${pLat.toFixed(6)},${pLng.toFixed(6)}` === latLngString) {
+            window.renderPortalDetails(guid);
+            return;
+          }
+        }
+        window.urlPortalLL = [result.position.lat, result.position.lng];
+      },
+    });
+  };
+
+  // Search and process decimal coordinates
+  const decimalMatches = query.term.replace(/%2C/gi, ',').match(decimalRegex);
+  if (decimalMatches) {
+    decimalMatches.forEach((location) => {
+      const [lat, lng] = location.split(',').map(Number);
+      addResult(lat, lng);
+    });
+  }
+
+  // Search and process DMS coordinates
+  const dmsMatches = Array.from(query.term.matchAll(dmsRegex));
+  dmsMatches.forEach((match) => {
+    const lat = parseDMS(match[1], match[2], match[3], match[4]);
+    const lng = parseDMS(match[5], match[6], match[7], match[8]);
+    addResult(lat, lng);
+  });
+});
+
+/**
+ * Searches for results on OpenStreetMap based on the query term, considering map view boundaries.
+ *
+ * @param {Object} query - The search query object.
+ * @fires hook#search
+ */
+window.addHook('search', async (query) => {
+  if (!query.confirmed) return;
+
+  const mapBounds = window.map.getBounds();
+  const viewbox = `&viewbox=${mapBounds.getSouthWest().lng},${mapBounds.getSouthWest().lat},${mapBounds.getNorthEast().lng},${mapBounds.getNorthEast().lat}`;
+  // Bounded search allows amenity-only searches (e.g. "amenity=toilet") via special phrases
+  // https://wiki.openstreetmap.org/wiki/Nominatim/Special_Phrases/EN
+  const bounded = '&bounded=1';
+
+  const resultMap = new Set();
+  let resultCount = 0;
+
+  async function fetchResults(isViewboxResult) {
+    try {
+      const response = await fetch(`${window.NOMINATIM}${encodeURIComponent(query.term)}${isViewboxResult ? viewbox + bounded : viewbox}`);
+      const data = await response.json();
+
+      if (isViewboxResult && data.length === 0) {
+        // If no results found within the viewbox, try a broader search
+        await fetchResults(false);
+        return;
+      } else if (!isViewboxResult && resultCount === 0 && data.length === 0) {
+        // If no results at all
+        query.addResult({
+          title: 'No results on OpenStreetMap',
+          icon: '//www.openstreetmap.org/favicon.ico',
+          onSelected: () => true,
+        });
+        return;
+      }
+
+      resultCount += data.length;
+
+      data.forEach((item) => {
+        if (resultMap.has(item.place_id)) return; // duplicate
+        resultMap.add(item.place_id);
+
+        const result = {
+          title: item.display_name,
+          description: `Type: ${item.type}`,
+          position: L.latLng(parseFloat(item.lat), parseFloat(item.lon)),
+          icon: item.icon,
+        };
+
+        if (item.geojson) {
+          result.layer = L.geoJson(item.geojson, {
+            interactive: false,
+            color: 'red',
+            opacity: 0.7,
+            weight: 2,
+            fill: false,
+            pointToLayer: (featureData, latLng) =>
+              L.marker(latLng, {
+                icon: L.divIcon.coloredSvg('red'),
+                title: item.display_name,
+              }),
+          });
+        }
+
+        if (item.boundingbox) {
+          const [south, north, west, east] = item.boundingbox;
+          result.bounds = new L.LatLngBounds(L.latLng(parseFloat(south), parseFloat(west)), L.latLng(parseFloat(north), parseFloat(east)));
+        }
+
+        query.addResult(result);
+      });
+    } catch (error) {
+      console.error('Error fetching OSM data:', error);
+    }
+  }
+
+  // Start with viewbox-bounded search
+  await fetchResults(true);
+});
+
+/**
+ * Searches by GUID in the query term.
+ *
+ * @param {Object} query - The search query object.
+ * @fires hook#search
+ */
+window.addHook('search', async (query) => {
+  const guidRegex = /[0-9a-f]{32}\.[0-9a-f]{2}/;
+  const match = query.term.match(guidRegex);
+
+  if (match) {
+    const guid = match[0];
+    const data = window.portalDetail.get(guid);
+
+    if (data) {
+      window.search.addSearchResult(query, data, guid);
+    } else {
+      try {
+        const fetchedData = await window.portalDetail.request(guid);
+        window.search.addSearchResult(query, fetchedData, guid);
+      } catch (error) {
+        console.error('Error fetching portal details:', error);
+      }
+    }
+  }
+});
diff --git a/core/code/search_query.js b/core/code/search_query.js
new file mode 100644
index 000000000..d68a7bfd9
--- /dev/null
+++ b/core/code/search_query.js
@@ -0,0 +1,317 @@
+/* global IITC, L -- eslint */
+
+/**
+ * @memberOf IITC.search.Query
+ * @typedef {Object} SearchResult
+ * @property {string} title - The label for this result (HTML-formatted).
+ * @property {string} [description] - Secondary information for this result (HTML-formatted).
+ * @property {L.LatLng} [position] - Position of this result.
+ * @property {L.LatLngBounds} [bounds] - Bounds of this result.
+ * @property {L.Layer|null} [layer] - Layer to be added to the map on result selection.
+ * @property {string} [icon] - URL to a 12x12px icon for the result list.
+ * @property {IITC.search.Query.onSelectedCallback} [onSelected] - Handler called when result is selected.
+ *           May return `true` to prevent the map from being repositioned.
+ *           You may reposition the map yourself or do other work.
+ * @property {IITC.search.Query.onRemoveCallback} [onRemove] - Handler called when result is removed from map.
+ *           (because another result has been selected or the search was cancelled by the user).
+ */
+
+/**
+ * @memberOf IITC.search.Query
+ * @callback onSelectedCallback
+ * @param {IITC.search.Query.SearchResult} result - The selected search result.
+ * @param {Event} event - The event that triggered the selection.
+ * @returns {boolean} - Returns true to prevent map repositioning.
+ */
+
+/**
+ * @memberOf IITC.search.Query
+ * @callback onRemoveCallback
+ * @param {IITC.search.Query.SearchResult} result - The search result that is being removed.
+ * @returns {void} - No return value.
+ */
+
+/**
+ * Represents a search query within the IITC search module, managing query state, results, and UI rendering.
+ *
+ * This class provides functionality to handle search operations such as displaying and interacting with results,
+ * including selection, hover actions, and map adjustments. Hooks for custom search actions are triggered when
+ * a new search query is initialized.
+ *
+ * @memberof IITC.search
+ * @class
+ */
+class Query {
+  /**
+   * Initializes the search query, setting up UI elements and triggering the 'search' hook.
+   *
+   * @constructor
+   * @param {string} term - The search term.
+   * @param {boolean} confirmed - Indicates if the search is confirmed (e.g., by pressing Enter).
+   */
+  constructor(term, confirmed) {
+    this.term = term;
+    this.confirmed = confirmed;
+    this.results = [];
+    this.resultsView = new IITC.search.QueryResultsView(term, confirmed);
+
+    window.runHooks('search', this);
+  }
+
+  /**
+   * Displays the search query results in the specified resultsView container.
+   *
+   * @memberof IITC.search.Query
+   * @function show
+   * @private
+   */
+  show() {
+    this.resultsView.renderIn('#searchwrapper');
+  }
+
+  /**
+   * Hides and removes the current search results, clearing selection and hover states.
+   *
+   * @memberof IITC.search.Query
+   * @function show
+   * @private
+   */
+  hide() {
+    this.resultsView.remove();
+    this.removeSelectedResult();
+    this.removeHoverResult();
+  }
+
+  /**
+   * Adds a search result to the query and triggers re-rendering of the results list.
+   *
+   * @memberof IITC.search.Query
+   * @function addResult
+   * @param {IITC.search.Query.SearchResult} result - The search result to add, including title, position, and interactions.
+   */
+  addResult(result) {
+    this.results.push(result);
+    this.renderResults();
+  }
+
+  /**
+   * Adds a search result for a portal to the search query results.
+   *
+   * @memberof IITC.search.Query
+   * @function addPortalResult
+   * @param {Object} data - The portal data for the search result. This includes information such as title, team, level, health, etc.
+   * @param {string} guid - GUID if the portal.
+   */
+  addPortalResult(data, guid) {
+    const team = window.teamStringToId(data.team);
+    const color = team === window.TEAM_NONE ? '#CCC' : window.COLORS[team];
+    const latLng = L.latLng(data.latE6 / 1e6, data.lngE6 / 1e6);
+
+    this.addResult({
+      title: data.title,
+      description: `${window.TEAM_SHORTNAMES[team]}, L${data.level}, ${data.health}%, ${data.resCount} Resonators`,
+      position: latLng,
+      icon: `data:image/svg+xml;base64,${btoa('@include_string:images/icon-portal.svg@'.replace(/%COLOR%/g, color))}`,
+
+      onSelected(result, event) {
+        const { position } = result;
+
+        if (event.type === 'dblclick') {
+          window.zoomToAndShowPortal(guid, latLng);
+        } else if (window.portals[guid]) {
+          if (!window.map.getBounds().contains(position)) {
+            window.map.setView(position);
+          }
+          window.renderPortalDetails(guid);
+        } else {
+          window.selectPortalByLatLng(latLng);
+        }
+        return true;
+      },
+    });
+  }
+
+  /**
+   * Handles keyboard interactions for selecting a result with Enter or Space keys.
+   *
+   * @memberof IITC.search.Query
+   * @function handleKeyPress
+   * @param {Event} ev - The keyboard event.
+   * @param {Object} result - The result being interacted with.
+   * @private
+   */
+  handleKeyPress(ev, result) {
+    if (ev.key === ' ' || ev.key === 'Enter') {
+      ev.preventDefault();
+      const type = ev.key === ' ' ? 'click' : 'dblclick';
+      this.onResultSelected(result, { ...ev, type });
+    }
+  }
+
+  /**
+   * Renders all search results through the resultsView class and sets up event handling for each result.
+   *
+   * @memberof IITC.search.Query
+   * @function renderResults
+   * @private
+   */
+  renderResults() {
+    this.resultsView.renderResults(this.results, (result, event) => this.handleResultInteraction(result, event));
+  }
+
+  /**
+   * Manages interactions with search results, such as clicks, hovers, and keyboard events.
+   *
+   * @memberof IITC.search.Query
+   * @function handleResultInteraction
+   * @param {Object} result - The result being interacted with.
+   * @param {Event} event - The event associated with the interaction.
+   * @private
+   */
+  handleResultInteraction(result, event) {
+    switch (event.type) {
+      case 'click':
+      case 'dblclick':
+        this.onResultSelected(result, event);
+        break;
+      case 'mouseover':
+        this.onResultHoverStart(result);
+        break;
+      case 'mouseout':
+        this.onResultHoverEnd();
+        break;
+      case 'keydown':
+        this.handleKeyPress(event, result);
+        break;
+    }
+  }
+
+  /**
+   * Creates and returns a map layer for the given search result, which could include markers or shapes.
+   *
+   * @memberof IITC.search.Query
+   * @function resultLayer
+   * @param {Object} result - The search result object.
+   * @returns {L.Layer} - The generated layer for the result.
+   * @private
+   */
+  resultLayer(result) {
+    if (!result.layer) {
+      result.layer = L.layerGroup();
+
+      if (result.position) {
+        L.marker(result.position, {
+          icon: L.divIcon.coloredSvg('red'),
+          title: result.title,
+        }).addTo(result.layer);
+      }
+
+      if (result.bounds) {
+        L.rectangle(result.bounds, {
+          title: result.title,
+          interactive: false,
+          color: 'red',
+          fill: false,
+        }).addTo(result.layer);
+      }
+    }
+    return result.layer;
+  }
+
+  /**
+   * Handles the selection of a search result, adjusting the map view and adding its layer to the map.
+   *
+   * @memberof IITC.search.Query
+   * @function onResultSelected
+   * @param {Object} result - The selected search result object.
+   * @param {Event} event - The event associated with the selection.
+   * @private
+   */
+  onResultSelected(result, event) {
+    this.removeHoverResult();
+    this.removeSelectedResult();
+    this.selectedResult = result;
+
+    if (result.onSelected && result.onSelected(result, event)) return;
+
+    const { position, bounds } = result;
+    if (event.type === 'dblclick') {
+      if (position) {
+        window.map.setView(position, window.DEFAULT_ZOOM);
+      } else if (bounds) {
+        window.map.fitBounds(bounds, { maxZoom: window.DEFAULT_ZOOM });
+      }
+    } else {
+      if (bounds) {
+        window.map.fitBounds(bounds, { maxZoom: window.DEFAULT_ZOOM });
+      } else if (position) {
+        window.map.setView(position);
+      }
+    }
+
+    result.layer = this.resultLayer(result);
+
+    if (result.layer) window.map.addLayer(result.layer);
+    if (window.isSmartphone()) window.show('map');
+  }
+
+  /**
+   * Removes the currently selected search result from the map and performs necessary cleanup.
+   *
+   * @memberof IITC.search.Query
+   * @function removeSelectedResult
+   * @private
+   */
+  removeSelectedResult() {
+    if (this.selectedResult) {
+      if (this.selectedResult.layer) window.map.removeLayer(this.selectedResult.layer);
+      if (this.selectedResult.onRemove) this.selectedResult.onRemove(this.selectedResult);
+    }
+  }
+
+  /**
+   * Starts a hover interaction on a search result, displaying its layer on the map.
+   *
+   * @memberof IITC.search.Query
+   * @function onResultHoverStart
+   * @param {Object} result - The result being hovered over.
+   * @private
+   */
+  onResultHoverStart(result) {
+    this.removeHoverResult();
+    this.hoverResult = result;
+
+    if (result === this.selectedResult) return;
+
+    result.layer = this.resultLayer(result);
+
+    if (result.layer) window.map.addLayer(result.layer);
+  }
+
+  /**
+   * Ends a hover interaction by removing the hover layer from the map if it is not selected.
+   *
+   * @memberof IITC.search.Query
+   * @function removeHoverResult
+   * @private
+   */
+  removeHoverResult() {
+    if (this.hoverResult && this.hoverResult.layer && this.hoverResult !== this.selectedResult) {
+      window.map.removeLayer(this.hoverResult.layer);
+    }
+    this.hoverResult = null;
+  }
+
+  /**
+   * Handles the end of a hover event, removing the hover layer from the map.
+   *
+   * @memberof IITC.search.Query
+   * @function onResultHoverEnd
+   * @private
+   */
+  onResultHoverEnd() {
+    this.removeHoverResult();
+  }
+}
+
+IITC.search.Query = Query;
diff --git a/core/code/search_query_results_view.js b/core/code/search_query_results_view.js
new file mode 100644
index 000000000..0b06351d7
--- /dev/null
+++ b/core/code/search_query_results_view.js
@@ -0,0 +1,197 @@
+/* global IITC -- eslint */
+
+/**
+ * Represents the view for displaying search query results in the IITC search module.
+ *
+ * @memberof IITC.search
+ * @class
+ */
+class QueryResultsView {
+  /**
+   * Initializes the query results view, setting up the display elements for the search term.
+   *
+   * @constructor
+   * @param {string} term - The search term.
+   * @param {boolean} confirmed - Indicates if the search is confirmed (e.g., by pressing Enter).
+   */
+  constructor(term, confirmed) {
+    this.term = term;
+    this.confirmed = confirmed;
+    this.container = this.createContainer();
+    this.header = this.createHeader();
+    this.list = this.createList();
+    this.setupAccordion();
+  }
+
+  /**
+   * Creates and returns the main container element for the query results.
+   *
+   * @memberof IITC.search.QueryResultsView
+   * @function createContainer
+   * @returns {HTMLElement} - The container element for the results.
+   * @private
+   */
+  createContainer() {
+    const container = document.createElement('div');
+    container.classList.add('searchquery');
+    return container;
+  }
+
+  /**
+   * Creates and appends a header to the container based on the search term.
+   *
+   * @memberof IITC.search.QueryResultsView
+   * @function createHeader
+   * @returns {HTMLElement} - The header element displaying the search term or a loading message.
+   * @private
+   */
+  createHeader() {
+    const header = document.createElement('h3');
+    let headerText;
+
+    if (this.confirmed) {
+      headerText = this.term;
+    } else {
+      if (this.term.length > 16) {
+        const start = this.term.slice(0, 8);
+        const end = this.term.slice(-8);
+        headerText = `${start}…${end} (Return to load more)`;
+      } else {
+        headerText = `${this.term} (Return to load more)`;
+      }
+    }
+
+    header.textContent = headerText;
+    this.container.appendChild(header);
+    return header;
+  }
+
+  /**
+   * Creates and appends an initial list element to display the search results.
+   *
+   * @memberof IITC.search.QueryResultsView
+   * @function createList
+   * @returns {HTMLElement} - The list element for displaying the results.
+   * @private
+   */
+  createList() {
+    const list = document.createElement('ul');
+    const initialItem = document.createElement('li');
+    initialItem.textContent = this.confirmed ? 'No local results, searching online...' : 'No local results.';
+    list.appendChild(initialItem);
+    this.container.appendChild(list);
+    return list;
+  }
+
+  /**
+   * Sets up the accordion functionality for expanding and collapsing results.
+   *
+   * @memberof IITC.search.QueryResultsView
+   * @function setupAccordion
+   * @private
+   */
+  setupAccordion() {
+    this.header.addEventListener('click', () => {
+      this.container.classList.toggle('collapsed');
+    });
+  }
+
+  /**
+   * Renders the search results within the list container and sets up event interactions.
+   *
+   * @memberof IITC.search.QueryResultsView
+   * @function renderResults
+   * @param {Array<Object>} results - An array of search result objects to display.
+   * @param {Function} onResultInteraction - A callback function for handling interaction events on results.
+   */
+  renderResults(results, onResultInteraction) {
+    this.clearList();
+
+    if (results.length === 0) {
+      const noResultsItem = document.createElement('li');
+      noResultsItem.textContent = 'No results found.';
+      this.list.appendChild(noResultsItem);
+    } else {
+      results.forEach((result) => {
+        const item = this.createListItem(result);
+        item.addEventListener('click', (ev) => onResultInteraction(result, ev));
+        item.addEventListener('dblclick', (ev) => onResultInteraction(result, ev));
+        item.addEventListener('mouseover', (ev) => onResultInteraction(result, ev));
+        item.addEventListener('mouseout', (ev) => onResultInteraction(result, ev));
+        item.addEventListener('keydown', (ev) => onResultInteraction(result, ev));
+        this.list.appendChild(item);
+      });
+    }
+  }
+
+  /**
+   * Creates and returns a list item for an individual search result.
+   *
+   * @memberof IITC.search.QueryResultsView
+   * @function createListItem
+   * @param {Object} result - The search result object with properties such as title, description, and icon.
+   * @returns {HTMLElement} - The list item element representing the search result.
+   * @private
+   */
+  createListItem(result) {
+    const item = document.createElement('li');
+    item.tabIndex = 0;
+
+    const link = document.createElement('a');
+    link.innerHTML = result.title;
+
+    if (result.icon) {
+      link.style.backgroundImage = `url("${result.icon}")`;
+      item.style.listStyle = 'none';
+    }
+
+    item.appendChild(link);
+
+    if (result.description) {
+      const description = document.createElement('em');
+      description.innerHTML = result.description;
+      item.appendChild(document.createElement('br'));
+      item.appendChild(description);
+    }
+
+    return item;
+  }
+
+  /**
+   * Appends the results container to a specified selector on the page.
+   *
+   * @memberof IITC.search.QueryResultsView
+   * @function renderIn
+   * @param {string} selector - The selector string for the target container.
+   */
+  renderIn(selector) {
+    const target = document.querySelector(selector);
+    if (target) target.appendChild(this.container);
+  }
+
+  /**
+   * Removes the results container from the page.
+   *
+   * @memberof IITC.search.QueryResultsView
+   * @function remove
+   * @private
+   */
+  remove() {
+    if (this.container.parentNode) {
+      this.container.parentNode.removeChild(this.container);
+    }
+  }
+
+  /**
+   * Clears all items from the results list.
+   *
+   * @memberof IITC.search.QueryResultsView
+   * @function clearList
+   * @private
+   */
+  clearList() {
+    this.list.innerHTML = '';
+  }
+}
+
+IITC.search.QueryResultsView = QueryResultsView;
diff --git a/core/code/utils.js b/core/code/utils.js
index 311a065a3..4e61d76dc 100644
--- a/core/code/utils.js
+++ b/core/code/utils.js
@@ -472,6 +472,28 @@ const isPointInPolygon = (polygon, point) => {
   return !!inside;
 };
 
+/**
+ * Converts a team string or object to a team ID.
+ * Accepts either team string directly (e.g. "RESISTANCE", "R") or an object with team property.
+ * Returns TEAM_NONE if no match found.
+ *
+ * @memberof IITC.utils
+ * @function getTeamId
+ * @param {(Object|string)} input - Input to convert to team ID
+ * @param {string} [input.team] - Team string when input is an object
+ * @returns {number} The team ID corresponding to the team string.
+ */
+const getTeamId = (input) => {
+  const teamStr = typeof input === 'string' ? input : input?.team;
+  if (window.TEAM_CODENAMES.includes(teamStr)) {
+    return window.TEAM_CODENAMES.indexOf(teamStr);
+  }
+  if (window.TEAM_CODES.includes(teamStr)) {
+    return window.TEAM_CODES.indexOf(teamStr);
+  }
+  return window.TEAM_NONE;
+};
+
 IITC.utils = {
   getURLParam,
   getCookie,
@@ -497,6 +519,7 @@ IITC.utils = {
   clampLatLng,
   clampLatLngBounds,
   isPointInPolygon,
+  getTeamId,
 };
 
 // Map of legacy function names to their new names (or the same name if not renamed)
@@ -524,6 +547,7 @@ const legacyFunctionMappings = {
   clampLatLng: 'clampLatLng',
   clampLatLngBounds: 'clampLatLngBounds',
   pnpoly: 'isPointInPolygon',
+  teamStringToId: 'getTeamId',
 };
 
 // Set up synchronization between `window` and `IITC.utils` with new names
diff --git a/core/external/Leaflet.GoogleMutant.js b/core/external/Leaflet.GoogleMutant.js
index a6c86a20f..ac2acec77 100644
--- a/core/external/Leaflet.GoogleMutant.js
+++ b/core/external/Leaflet.GoogleMutant.js
@@ -376,17 +376,9 @@
 	// 🍂extends GridLayer
 	L.GridLayer.GoogleMutant = L.GridLayer.extend({
 		options: {
-			minZoom: 0,
 			maxZoom: 21, // can be 23, but ugly if more than maxNativeZoom
-			tileSize: 256,
-			subdomains: "abc",
-			errorTileUrl: "",
-			attribution: "", // The mutant container will add its own attribution anyways.
-			opacity: 1,
-			continuousWorld: false,
-			noWrap: false,
 			// 🍂option type: String = 'roadmap'
-			// Google's map type. Valid values are 'roadmap', 'satellite' or 'terrain'. 'hybrid' is not really supported.
+			// Google's map type. Valid values are 'roadmap', 'satellite', 'terrain' or 'hybrid'.
 			type: "roadmap",
 			maxNativeZoom: 21,
 		},
@@ -404,7 +396,7 @@
 		},
 
 		onAdd: function (map) {
-			var this$1 = this;
+			var this$1$1 = this;
 
 			L.GridLayer.prototype.onAdd.call(this, map);
 			this._initMutantContainer();
@@ -420,18 +412,18 @@
 			}
 
 			waitForAPI(function () {
-				if (!this$1._map) {
+				if (!this$1$1._map) {
 					return;
 				}
-				this$1._initMutant();
+				this$1$1._initMutant();
 
 				//handle layer being added to a map for which there are no Google tiles at the given zoom
-				google.maps.event.addListenerOnce(this$1._mutant, "idle", function () {
-					if (!this$1._map) {
+				google.maps.event.addListenerOnce(this$1$1._mutant, "idle", function () {
+					if (!this$1$1._map) {
 						return;
 					}
-					this$1._checkZoomLevels();
-					this$1._mutantIsReady = true;
+					this$1$1._checkZoomLevels();
+					this$1$1._mutantIsReady = true;
 				});
 			});
 		},
@@ -457,14 +449,14 @@
 		// currently following values supported: 'TrafficLayer', 'TransitLayer', 'BicyclingLayer'.
 		// `options`: see https://developers.google.com/maps/documentation/javascript/reference/map
 		addGoogleLayer: function (googleLayerName, options) {
-			var this$1 = this;
+			var this$1$1 = this;
 
 			if (!this._subLayers) { this._subLayers = {}; }
 			this.whenReady(function () {
 				var Constructor = google.maps[googleLayerName];
 				var googleLayer = new Constructor(options);
-				googleLayer.setMap(this$1._mutant);
-				this$1._subLayers[googleLayerName] = googleLayer;
+				googleLayer.setMap(this$1$1._mutant);
+				this$1$1._subLayers[googleLayerName] = googleLayer;
 			});
 			return this;
 		},
@@ -472,13 +464,13 @@
 		// 🍂method removeGoogleLayer(name: String): this
 		// Removes layer with the given name from the google Map instance.
 		removeGoogleLayer: function (googleLayerName) {
-			var this$1 = this;
+			var this$1$1 = this;
 
 			this.whenReady(function () {
-				var googleLayer = this$1._subLayers && this$1._subLayers[googleLayerName];
+				var googleLayer = this$1$1._subLayers && this$1$1._subLayers[googleLayerName];
 				if (googleLayer) {
 					googleLayer.setMap(null);
-					delete this$1._subLayers[googleLayerName];
+					delete this$1$1._subLayers[googleLayerName];
 				}
 			});
 			return this;
@@ -491,8 +483,8 @@
 					"leaflet-google-mutant leaflet-top leaflet-left"
 				);
 				this._mutantContainer.id = "_MutantContainer_" + L.Util.stamp(this._mutantContainer);
-				this._mutantContainer.style.zIndex = 800; //leaflet map pane at 400, controls at 1000
 				this._mutantContainer.style.pointerEvents = "none";
+				this._mutantContainer.style.visibility = "hidden";
 
 				L.DomEvent.off(this._mutantContainer);
 			}
@@ -514,13 +506,11 @@
 		},
 
 		_initMutant: function () {
-			var this$1 = this;
-
 			if (this._mutant) {
 				return;
 			}
 
-			var map = new google.maps.Map(this._mutantContainer, {
+			var options = {
 				center: { lat: 0, lng: 0 },
 				zoom: 0,
 				tilt: 0,
@@ -530,25 +520,24 @@
 				draggable: false,
 				disableDoubleClickZoom: true,
 				scrollwheel: false,
-				streetViewControl: false,
-				styles: this.options.styles || {},
+				styles: this.options.styles || [],
 				backgroundColor: "transparent",
-			});
+			};
+			if (this.options.mapId != null) {
+				options.mapId = this.options.mapId;
+			}
+			var map = new google.maps.Map(this._mutantContainer, options);
 
 			this._mutant = map;
 
-			google.maps.event.addListenerOnce(map, "idle", function () {
-				var nodes = this$1._mutantContainer.querySelectorAll("a");
-				for (var i = 0; i < nodes.length; ++i) {
-					nodes[i].style.pointerEvents = "auto";
-				}
-			});
-
 			this._update();
 
 			// 🍂event spawned
 			// Fired when the mutant has been created.
 			this.fire("spawned", { mapObject: map });
+
+			this._waitControls();
+			this.once('controls_ready', this._setupAttribution);
 		},
 
 		_attachObserver: function _attachObserver(node) {
@@ -562,6 +551,46 @@
 			Array.prototype.forEach.call(node.querySelectorAll("img"), this._boundOnMutatedImage);
 		},
 
+		_waitControls: function () {
+			var this$1$1 = this;
+
+			var id = setInterval(function () {
+				var layoutManager = this$1$1._mutant.__gm.layoutManager;
+				if (!layoutManager) { return; }
+				clearInterval(id);
+				var positions;
+				// iterate through obfuscated key names to find positions set (atm: layoutManager.o)
+				Object.keys(layoutManager).forEach(function(key) {
+					var el = layoutManager[key];
+					if (el.get) {
+						if (el.get(1) instanceof Node) {
+							positions = el;
+						}
+					}
+				});
+				// 🍂event controls_ready
+				// Fired when controls positions get available (passed in `positions` property).
+				this$1$1.fire("controls_ready", { positions: positions });
+			}, 50);
+		},
+
+		_setupAttribution: function (ev) {
+			if (!this._map) {
+				return;
+			}
+			// https://developers.google.com/maps/documentation/javascript/reference/control#ControlPosition
+			var pos = google.maps.ControlPosition;
+			var ctr = this._attributionContainer = ev.positions.get(pos.BOTTOM_RIGHT);
+			L.DomUtil.addClass(ctr, "leaflet-control leaflet-control-attribution");
+			L.DomEvent.disableClickPropagation(ctr);
+			ctr.style.height = "14px";
+			this._map._controlCorners.bottomright.appendChild(ctr);
+
+			this._logoContainer = ev.positions.get(pos.BOTTOM_LEFT);
+			this._logoContainer.style.pointerEvents = "auto";
+			this._map._controlCorners.bottomleft.appendChild(this._logoContainer);
+		},
+
 		_onMutations: function _onMutations(mutations) {
 			for (var i = 0; i < mutations.length; ++i) {
 				var mutation = mutations[i];
@@ -575,51 +604,6 @@
 							node.querySelectorAll("img"),
 							this._boundOnMutatedImage
 						);
-
-						// Check for, and remove, the "Google Maps can't load correctly" div.
-						// You *are* loading correctly, you dumbwit.
-						if (node.style.backgroundColor === "white") {
-							L.DomUtil.remove(node);
-						}
-
-						// Check for, and remove, the "For development purposes only" divs on the aerial/hybrid tiles.
-						if (node.textContent.indexOf("For development purposes only") === 0) {
-							L.DomUtil.remove(node);
-						}
-
-						// Check for, and remove, the "Sorry, we have no imagery here"
-						// empty <div>s. The [style*="text-align: center"] selector
-						// avoids matching the attribution notice.
-						// This empty div doesn't have a reference to the tile
-						// coordinates, so it's not possible to mark the tile as
-						// failed.
-						Array.prototype.forEach.call(
-							node.querySelectorAll('div[draggable=false][style*="text-align: center"]'),
-							L.DomUtil.remove
-						);
-
-						// Move Google attributions to leaflet's bottom-right control container
-						if (
-							node.querySelectorAll(".gmnoprint").length > 0 ||
-							node.querySelectorAll('a[title="Click to see this area on Google Maps"]')
-								.length > 0
-						) {
-							var ctr = (this._attributionContainer = L.DomUtil.create(
-								"div",
-								"leaflet-control leaflet-control-attribution"
-							));
-							L.DomEvent.disableClickPropagation(ctr);
-							ctr.style.height = "14px";
-							ctr.style.background = "none";
-							this._map._controlCorners.bottomright.appendChild(ctr);
-							ctr.appendChild(node);
-						}
-
-						// Move Google logo to leaflet's bottom-left control container
-						if (node.style.zIndex == 1000000) {
-							this._map._controlCorners.bottomleft.appendChild(node);
-							this._logoContainer = node;
-						}
 					}
 				}
 			}
@@ -628,14 +612,10 @@
 		// Only images which 'src' attrib match this will be considered for moving around.
 		// Looks like some kind of string-based protobuf, maybe??
 		// Only the roads (and terrain, and vector-based stuff) match this pattern
-		_roadRegexp: /!1i(\d+)!2i(\d+)!3i(\d+)!/,
+		_roadRegexp: /!1i(\d+)!2i(\d+)!3i(\d+|VinaFnapurmBegrtn)!/,
 
 		// On the other hand, raster imagery matches this other pattern
-		_satRegexp: /x=(\d+)&y=(\d+)&z=(\d+)/,
-
-		// On small viewports, when zooming in/out, a static image is requested
-		// This will not be moved around, just removed from the DOM.
-		_staticRegExp: /StaticMapService\.GetMapImage/,
+		_satRegexp: /x=(\d+)&y=(\d+)&z=(\d+|VinaFnapurmBegrtn)/,
 
 		_onMutatedImage: function _onMutatedImage(imgNode) {
 			var coords;
@@ -668,7 +648,6 @@
 			if (coords) {
 				var tileKey = this._tileCoordsToKey(coords);
 				imgNode.style.position = "absolute";
-				imgNode.style.visibility = "hidden";
 
 				var key = tileKey + "/" + sublayer;
 				// Cache img so it can also be used in subsequent tile requests
@@ -679,8 +658,6 @@
 					this._tileCallbacks[key].forEach(function (callback) { return callback(imgNode); });
 					delete this._tileCallbacks[key];
 				}
-			} else if (imgNode.src.match(this._staticRegExp)) {
-				imgNode.style.visibility = "hidden";
 			}
 		},
 
@@ -793,5 +770,5 @@
 		return new L.GridLayer.GoogleMutant(options);
 	};
 
-}());
+})();
 //# sourceMappingURL=Leaflet.GoogleMutant.js.map
diff --git a/core/images/current-location.png b/core/images/current-location.png
deleted file mode 100644
index 9a3215d81..000000000
Binary files a/core/images/current-location.png and /dev/null differ
diff --git a/core/images/icon-close-small.svg b/core/images/icon-close-small.svg
new file mode 100644
index 000000000..20c1239e5
--- /dev/null
+++ b/core/images/icon-close-small.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#BBBBBB"><path d="m336-280-56-56 144-144-144-143 56-56 144 144 143-144 56 56-144 143 144 144-56 56-143-144-144 144Z"/></svg>
\ No newline at end of file
diff --git a/core/images/icon-my-location.svg b/core/images/icon-my-location.svg
new file mode 100644
index 000000000..7b4569514
--- /dev/null
+++ b/core/images/icon-my-location.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#BBBBBB"><path d="M440-42v-80q-125-14-214.5-103.5T122-440H42v-80h80q14-125 103.5-214.5T440-838v-80h80v80q125 14 214.5 103.5T838-520h80v80h-80q-14 125-103.5 214.5T520-122v80h-80Zm40-158q116 0 198-82t82-198q0-116-82-198t-198-82q-116 0-198 82t-82 198q0 116 82 198t198 82Zm0-120q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47Zm0-80q33 0 56.5-23.5T560-480q0-33-23.5-56.5T480-560q-33 0-56.5 23.5T400-480q0 33 23.5 56.5T480-400Zm0-80Z"/></svg>
\ No newline at end of file
diff --git a/core/images/icon-search.svg b/core/images/icon-search.svg
new file mode 100644
index 000000000..0eebe5d59
--- /dev/null
+++ b/core/images/icon-search.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#BBBBBB"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>
\ No newline at end of file
diff --git a/core/smartphone.css b/core/smartphone.css
index 3092b9ea4..7de1583a5 100644
--- a/core/smartphone.css
+++ b/core/smartphone.css
@@ -125,11 +125,6 @@ body {
   margin-left: 4px;
 }
 
-.leaflet-top .leaflet-control {
-  margin-top: 5px !important;
-  margin-left: 5px !important;
-}
-
 #searchwrapper .ui-accordion-header {
   padding: 0.3em 0;
 }
diff --git a/core/style.css b/core/style.css
index cc0199265..082774488 100644
--- a/core/style.css
+++ b/core/style.css
@@ -161,6 +161,35 @@ a:hover {
   margin-left: 720px;
 }
 
+/* leaflet controls */
+.leaflet-left, .leaflet-right {
+  display: grid;
+  grid-gap: 10px;
+  justify-items: baseline;
+}
+
+.leaflet-right {
+  justify-items: end;
+}
+
+.leaflet-left .leaflet-control,
+.leaflet-right .leaflet-control {
+  margin: 0;
+}
+
+.leaflet-top {
+  top: 10px;
+}
+.leaflet-right {
+  right: 10px;
+}
+.leaflet-bottom {
+  bottom: 10px;
+}
+.leaflet-left {
+  left: 10px;
+}
+
 .help {
   cursor: help;
 }
@@ -564,53 +593,80 @@ input[type="search"], input[type="url"] {
 }
 #search {
   width: 100%;
-  padding-right: 24px;
+  padding-left: 24px;
+  padding-right: 36px;
 }
-#buttongeolocation {
+#search::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+}
+#searchicon, #searchcancel, #buttongeolocation {
+  display: flex;
+  align-items: center;
   position: absolute;
-  right: 0;
-  bottom: 0;
   margin: 0;
   border: 0 none transparent;
-  padding: 0 2px 0 0;
-  height: 100%;
+  padding: 0 2px;
+  height: 24px;
   background-color: transparent;
 }
+#searchicon img, #searchcancel img, #buttongeolocation img {
+  height: 20px;
+}
+#searchicon {
+  left: 0;
+}
+#searchcancel {
+  right: 24px;
+  cursor: pointer;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s ease;
+}
+#searchcancel.visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+#buttongeolocation {
+  right: 0;
+  cursor: pointer;
+}
 #buttongeolocation:focus {
   outline: 1px dotted #ffce00;
 }
-#buttongeolocation img {
-  vertical-align: middle;
+.searchquery {
+  max-height: 25em;
+  overflow-y: auto;
 }
 #searchwrapper h3 {
+  padding: 0 0 0 25px;
+  position: relative;
   font-size: 1em;
   height: auto;
   cursor: pointer;
 }
-.searchquery {
-  max-height: 25em;
-  overflow-y: auto;
-}
-#searchwrapper .ui-accordion-header::before {
-  font-size: 18px;
+#searchwrapper h3::before {
+  position: absolute;
+  left: 5px;
+  font-size: 14px;
   margin-right: 2px;
   font-weight: normal;
-  line-height: 1em;
-  content: "⊞";
+  content: "▲";
+  transition: transform 0.3s ease;
 }
-#searchwrapper .ui-accordion-header-active::before {
-  content: "⊟";
-}
-#searchwrapper .ui-accordion-content {
-  margin: 0;
-  overflow: hidden;
+#searchwrapper .searchquery.collapsed h3::before {
+  transform: rotate(180deg);
 }
 #searchwrapper ul {
-  padding-left: 14px;
+  max-height: 100%;
+  padding-left: 16px;
+  overflow: hidden;
 }
 #searchwrapper li {
   cursor: pointer;
 }
+#searchwrapper .searchquery.collapsed ul {
+  max-height: 0;
+}
 #searchwrapper li a {
   margin-left: -14px;
   padding-left: 14px;
@@ -1194,16 +1250,21 @@ td + td {
 }
 
 #portal_highlight_select {
-  position: absolute;
-  top:5px;
-  left:10px;
   z-index: 2500;
   font-size:11px;
   background-color:#0E3C46;
   color:#ffce00;
+  order: -100;
+}
 
+.leaflet-control-scale {
+  order: -90;
 }
 
+.leaflet-bar {
+  border: 2px solid rgba(0, 0, 0, 0.2);
+  box-shadow: none;
+}
 
 
 .portal_details th, .portal_details td {
diff --git a/core/total-conversion-build.js b/core/total-conversion-build.js
index 2138b4971..21276538c 100644
--- a/core/total-conversion-build.js
+++ b/core/total-conversion-build.js
@@ -6,6 +6,10 @@
 
 /* global plugin_info, PLAYER -- eslint */
 
+/**
+ * @namespace IITC
+ */
+
 // create IITC scope
 const IITC = {};
 window.IITC = IITC;
@@ -139,13 +143,13 @@ document.head.innerHTML =
   '<title>Ingress Intel Map</title>' +
   '<link rel="shortcut icon" href="/img/favicon.ico" />' +
   '<style>' +
-  '@include_string:style.css@' +
+  '@include_css:external/jquery-ui-1.12.1-resizable.css@' +
   '</style>' +
   '<style>' +
   '@include_css:external/leaflet.css@' +
   '</style>' +
   '<style>' +
-  '@include_css:external/jquery-ui-1.12.1-resizable.css@' +
+  '@include_string:style.css@' +
   '</style>' +
   // note: smartphone.css injection moved into code/smartphone.js
   '<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:100,100italic,300,300italic,400,400italic,500,500italic,700,700italic&subset=latin,cyrillic-ext,greek-ext,greek,vietnamese,latin-ext,cyrillic"/>';
@@ -169,10 +173,18 @@ document.body.innerHTML =
   '    <div id="playerstat">t</div>' +
   '    <div id="gamestat">&nbsp;loading global control stats</div>' +
   '    <div id="searchwrapper">' +
-  '      <button title="Current location" id="buttongeolocation"><img src="' +
-  '@include_img:images/current-location.png@' +
+  '      <div id="searchbox">' +
+  '        <div id="searchicon"><img src="' +
+  '@include_img:images/icon-search.svg@' +
+  '" alt="Search"/></div>' +
+  '        <div id="searchcancel"><img src="' +
+  '@include_img:images/icon-close-small.svg@' +
+  '" alt="Cancel search"/></div>' +
+  '        <button title="Current location" id="buttongeolocation"><img src="' +
+  '@include_img:images/icon-my-location.svg@' +
   '" alt="Current location"/></button>' +
-  '      <input id="search" placeholder="Search location…" type="search" accesskey="f" title="Search for a place [f]"/>' +
+  '        <input id="search" placeholder="Search location…" type="search" accesskey="f" title="Search for a place [f]"/>' +
+  '      </div>' +
   '    </div>' +
   '    <div id="portaldetails"></div>' +
   '    <input id="redeem" placeholder="Redeem code…" type="text"/>' +
diff --git a/plugins/pan-control.css b/plugins/pan-control.css
new file mode 100644
index 000000000..702cddeac
--- /dev/null
+++ b/plugins/pan-control.css
@@ -0,0 +1,17 @@
+.leaflet-left.has-leaflet-pan-control .leaflet-bar {
+	left: 24.5px;
+}
+
+.leaflet-touch .leaflet-left.has-leaflet-pan-control .leaflet-bar {
+  left: 34px
+}
+
+.leaflet-control-pan {
+    order: -50;
+}
+
+.leaflet-control-pan div {
+  border: 2px solid rgba(0, 0, 0, 0.2);
+  box-shadow: none;
+  border-radius: 4px;
+}
diff --git a/plugins/pan-control.js b/plugins/pan-control.js
index 2ffb0681e..55b770f78 100644
--- a/plugins/pan-control.js
+++ b/plugins/pan-control.js
@@ -40,28 +40,8 @@ function setup() {
   if (!panControl.options.position) {
     // default: 'topleft'
     // to be above all controls
-    $('.leaflet-top.leaflet-left .leaflet-control').first().before(panControl.control.getContainer());
+    $('.leaflet-top.leaflet-left').first().append(panControl.control.getContainer());
   }
-
-  // L.Control.Pan.css tries to align zoom control with the pan control, but the result sucks
-  // so here is our attempt to make it better
-  // (adapted from https://github.com/kartena/Leaflet.Pancontrol/pull/20)
-  $('<style>')
-    .html(
-      '\
-    .leaflet-left.has-leaflet-pan-control .leaflet-control-zoom,\
-    .leaflet-left.has-leaflet-pan-control .leaflet-control-zoomslider { left: unset; }\
-    .leaflet-left.has-leaflet-pan-control .leaflet-control-scale { left: -24.5px; }\
-    .leaflet-left.has-leaflet-pan-control { left: 24.5px; }\
-    .leaflet-left .leaflet-control-pan { left: -24.5px; }\
-    .leaflet-control-pan { width: 75px; height: 75px; }\
-    .leaflet-touch .leaflet-left.has-leaflet-pan-control { left: 26px; }\
-    .leaflet-touch .leaflet-left .leaflet-control-pan { left: -26px; }\
-    .leaflet-touch .leaflet-control-pan { width: 86px; height: 114px; }\
-    .leaflet-touch .leaflet-left .leaflet-control-pan { margin-left: 10px; }\
-  '
-    )
-    .appendTo('head');
 }
 setup.priority = 'low';
 
@@ -71,6 +51,7 @@ function loadLeafletPancontrol() {
     // eslint-disable-next-line
     '@include_raw:external/L.Control.Pan.js@';
     $('<style>').html('@include_css:external/L.Control.Pan.css@').appendTo('head');
+    $('<style>').html('@include_css:pan-control.css@').appendTo('head');
   } catch (e) {
     console.error('L.Control.Pan.js loading failed');
     throw e;
diff --git a/plugins/scale-bar.js b/plugins/scale-bar.js
index 269adb470..e67f5c51d 100644
--- a/plugins/scale-bar.js
+++ b/plugins/scale-bar.js
@@ -29,30 +29,20 @@ window.plugin.scaleBar = scaleBar;
 // Before you ask: yes, I explicitely turned off imperial units. Imperial units
 // are worse than Internet Explorer 6 whirring fans combined. Upgrade to the metric
 // system already.
-scaleBar.options = { imperial: false };
-
-scaleBar.mobileOptions = { position: 'bottomright', maxWidth: 100 };
-
-scaleBar.desktopOptions = { position: 'topleft', maxWidth: 200 };
-
-function moveToEdge(ctrl) {
-  var $el = $(ctrl.getContainer());
-  var $corner = $el.parent();
-  var pos = ctrl.getPosition();
-  if (pos.indexOf('top') !== -1) {
-    $corner.prepend($el);
-  } else if (pos.indexOf('bottom') !== -1) {
-    $corner.append($el);
-    $corner.find('.leaflet-control-attribution').appendTo($corner); // make sure that attribution control is on very bottom
-  }
-}
+scaleBar.options = {
+  imperial: false,
+  position: 'bottomright',
+};
 
 function setup() {
-  var options = L.extend({}, window.isSmartphone() ? scaleBar.mobileOptions : scaleBar.desktopOptions, scaleBar.options);
+  var options = L.extend(
+    {},
+    {
+      maxWidth: window.isSmartphone() ? 100 : 200,
+    },
+    scaleBar.options
+  );
+
   scaleBar.control = L.control.scale(options).addTo(window.map);
-  // wait other controls to initialize (should be initialized last)
-  setTimeout(function () {
-    moveToEdge(scaleBar.control);
-  });
 }
 setup.priority = 'low';
diff --git a/plugins/wayfarer-range.js b/plugins/wayfarer-range.js
new file mode 100644
index 000000000..2c6c1fa0a
--- /dev/null
+++ b/plugins/wayfarer-range.js
@@ -0,0 +1,88 @@
+// @author         morph
+// @name           Wayfarer portal submission range
+// @category       Layer
+// @version        0.1.0
+// @description    Add a 20m range around portals, to aid Wayfarer portals submissions
+
+/* exported setup, changelog --eslint */
+/* global L -- eslint */
+
+var changelog = [
+  {
+    version: '0.1.0',
+    changes: ['Initial release (code heavily based on zaprange)'],
+  },
+];
+
+// use own namespace for plugin
+window.plugin.wayfarerrange = function () {};
+window.plugin.wayfarerrange.wayfarerLayers = {};
+window.plugin.wayfarerrange.MIN_MAP_ZOOM = 16;
+
+window.plugin.wayfarerrange.portalAdded = function (data) {
+  data.portal.on('add', function () {
+    window.plugin.wayfarerrange.draw(this.options.guid, this.options.team);
+  });
+
+  data.portal.on('remove', function () {
+    window.plugin.wayfarerrange.remove(this.options.guid, this.options.team);
+  });
+};
+
+window.plugin.wayfarerrange.remove = function (guid) {
+  var previousLayer = window.plugin.wayfarerrange.wayfarerLayers[guid];
+  if (previousLayer) {
+    window.plugin.wayfarerrange.wayfarerCircleHolderGroup.removeLayer(previousLayer);
+    delete window.plugin.wayfarerrange.wayfarerLayers[guid];
+  }
+};
+
+window.plugin.wayfarerrange.draw = function (guid) {
+  var d = window.portals[guid];
+
+  var coo = d._latlng;
+  var latlng = new L.LatLng(coo.lat, coo.lng);
+  // https://leafletjs.com/reference.html#circle
+  var optCircle = { color: 'orange', opacity: 0.7, fillColor: 'orange', fillOpacity: 0.4, weight: 1, interactive: false, dashArray: [10, 6] };
+  // submitting a portal closer than 20m to another one, wont make it appear on the map
+  var range = 20;
+
+  var circle = new L.Circle(latlng, range, optCircle);
+
+  circle.addTo(window.plugin.wayfarerrange.wayfarerCircleHolderGroup);
+  window.plugin.wayfarerrange.wayfarerLayers[guid] = circle;
+};
+
+window.plugin.wayfarerrange.showOrHide = function () {
+  if (window.map.getZoom() >= window.plugin.wayfarerrange.MIN_MAP_ZOOM) {
+    // show the layer
+    if (!window.plugin.wayfarerrange.wayfarerLayerHolderGroup.hasLayer(window.plugin.wayfarerrange.wayfarerCircleHolderGroup)) {
+      window.plugin.wayfarerrange.wayfarerLayerHolderGroup.addLayer(window.plugin.wayfarerrange.wayfarerCircleHolderGroup);
+      $('.leaflet-control-layers-list span:contains("Wayfarer Range")').parent('label').removeClass('disabled').attr('title', '');
+    }
+  } else {
+    // hide the layer
+    if (window.plugin.wayfarerrange.wayfarerLayerHolderGroup.hasLayer(window.plugin.wayfarerrange.wayfarerCircleHolderGroup)) {
+      window.plugin.wayfarerrange.wayfarerLayerHolderGroup.removeLayer(window.plugin.wayfarerrange.wayfarerCircleHolderGroup);
+      $('.leaflet-control-layers-list span:contains("Wayfarer Range")').parent('label').addClass('disabled').attr('title', 'Zoom in to show those.');
+    }
+  }
+};
+
+var setup = function () {
+  // this layer is added to the layer chooser, to be toggled on/off
+  window.plugin.wayfarerrange.wayfarerLayerHolderGroup = new L.LayerGroup();
+
+  // this layer is added into the above layer, and removed from it when we zoom out too far
+  window.plugin.wayfarerrange.wayfarerCircleHolderGroup = new L.LayerGroup();
+
+  window.plugin.wayfarerrange.wayfarerLayerHolderGroup.addLayer(window.plugin.wayfarerrange.wayfarerCircleHolderGroup);
+
+  window.layerChooser.addOverlay(window.plugin.wayfarerrange.wayfarerLayerHolderGroup, 'Wayfarer range');
+
+  window.addHook('portalAdded', window.plugin.wayfarerrange.portalAdded);
+
+  window.map.on('zoomend', window.plugin.wayfarerrange.showOrHide);
+
+  window.plugin.wayfarerrange.showOrHide();
+};
diff --git a/plugins/zoom-slider.css b/plugins/zoom-slider.css
new file mode 100644
index 000000000..08f367372
--- /dev/null
+++ b/plugins/zoom-slider.css
@@ -0,0 +1,5 @@
+.leaflet-container .leaflet-control-zoomslider {
+    margin-left: 0;
+    margin-top: 0;
+    order: -40;
+}
diff --git a/plugins/zoom-slider.js b/plugins/zoom-slider.js
index a1572e51b..7a79846d3 100644
--- a/plugins/zoom-slider.js
+++ b/plugins/zoom-slider.js
@@ -42,12 +42,6 @@ function setup() {
     map.zoomControl.remove();
   }
   zoomSlider.control = L.control.zoomslider(zoomSlider.options).addTo(map);
-
-  // L.Control.Zoomslider.css defines non-standard border for `.leaflet-control-zoomslider`
-  // which makes zoomslider not aligning with other leaflet controls
-  // Here we are trying to unset it (make the same as general `.leaflet-control`)
-  // (adapted from https://github.com/kartena/Leaflet.zoomslider/pull/74)
-  $('<style>').html('.leaflet-touch .leaflet-control-zoomslider { border: 2px solid rgba(0,0,0,0.2) }').appendTo('head');
 }
 
 function loadLeafletZoomslider() {
@@ -56,6 +50,7 @@ function loadLeafletZoomslider() {
     // eslint-disable-next-line
     '@include_raw:external/L.Control.Zoomslider.js@';
     $('<style>').html('@include_string:external/L.Control.Zoomslider.css@').appendTo('head');
+    $('<style>').html('@include_string:zoom-slider.css@').appendTo('head');
   } catch (e) {
     console.error('L.Control.Zoomslider.js loading failed');
     throw e;
diff --git a/test/search_query.spec.js b/test/search_query.spec.js
new file mode 100644
index 000000000..a7305283a
--- /dev/null
+++ b/test/search_query.spec.js
@@ -0,0 +1,176 @@
+import { describe, it, beforeEach } from 'mocha';
+import { expect } from 'chai';
+
+/* global IITC, L */
+/* eslint-disable no-unused-expressions */
+
+if (!globalThis.window) globalThis.window = {};
+if (!globalThis.L) globalThis.L = {};
+if (!globalThis.IITC) globalThis.IITC = {};
+if (!globalThis.IITC.search) globalThis.IITC.search = {};
+globalThis.IITC.search.Query = {};
+import('../core/code/search_query.js');
+
+describe('IITC.search.Query', () => {
+  let query;
+  let fakeMap;
+
+  beforeEach(() => {
+    // Mock objects and methods
+    fakeMap = {
+      addTo: () => {},
+      addLayer: () => {},
+    };
+
+    globalThis.window = {
+      ...globalThis.window,
+      ...{
+        map: fakeMap,
+        runHooks: () => {},
+        isSmartphone: () => false,
+        TEAM_SHORTNAMES: { NEUTRAL: 'NEU', ENLIGHTENED: 'ENL' },
+        COLORS: { NEUTRAL: '#CCC', ENLIGHTENED: '#008000' },
+        teamStringToId: (team) => (team === 'ENLIGHTENED' ? 'ENLIGHTENED' : 'NEUTRAL'),
+      },
+    };
+
+    globalThis.L = {
+      ...globalThis.L,
+      ...{
+        LatLng: class {},
+        latLng: (lat, lng) => new L.LatLng(lat, lng),
+        layerGroup: () => fakeMap,
+        marker: () => fakeMap,
+        divIcon: {
+          coloredSvg: () => {},
+        },
+      },
+    };
+
+    globalThis.IITC.search.QueryResultsView = class {
+      constructor(term, confirmed) {
+        this.term = term;
+        this.confirmed = confirmed;
+      }
+      renderResults() {}
+    };
+
+    query = new IITC.search.Query('test', true);
+  });
+
+  // Test for initialization
+  it('should initialize with an empty results array', () => {
+    expect(query.results).to.be.an('array').that.is.empty;
+  });
+
+  // Test for the addResult method
+  it('should add a result to the results array with addResult', () => {
+    const mockResult = { title: 'Test Result', position: new L.LatLng(0, 0) };
+
+    query.addResult(mockResult);
+
+    expect(query.results).to.have.lengthOf(1);
+    expect(query.results[0]).to.deep.equal(mockResult);
+
+    let renderCalled = false;
+    query.renderResults = () => {
+      renderCalled = true;
+    };
+    query.addResult(mockResult);
+    expect(renderCalled).to.be.true;
+  });
+
+  // Test for the addPortalResult method
+  it('should add a portal result to the results array with addPortalResult', () => {
+    const portalData = {
+      title: 'Test Portal',
+      team: 'ENLIGHTENED',
+      level: 8,
+      health: 100,
+      resCount: 8,
+      latE6: 50000000,
+      lngE6: 100000000,
+    };
+
+    query.addPortalResult(portalData, 'abc123');
+
+    expect(query.results).to.have.lengthOf(1);
+    const addedResult = query.results[0];
+
+    expect(addedResult.title).to.equal('Test Portal');
+    expect(addedResult.description).to.contain('ENL');
+    expect(addedResult.description).to.contain('L8');
+    expect(addedResult.description).to.contain('100%');
+    expect(addedResult.description).to.contain('8 Resonators');
+    expect(addedResult.icon).to.be.a('string').that.contains('data:image/svg+xml;base64');
+  });
+
+  // Test for hover interaction handling
+  it('should start hover interaction and add layer to map', () => {
+    const mockResult = { title: 'Hover Result', layer: null, position: new L.LatLng(0, 0) };
+    let layerAdded = false;
+
+    fakeMap.addLayer = () => {
+      layerAdded = true;
+    };
+    query.onResultHoverStart(mockResult);
+
+    expect(layerAdded).to.be.true;
+  });
+
+  it('should handle Space key press for selecting a result', () => {
+    let eventHandled = false;
+    const mockEvent = { key: ' ', preventDefault: () => {} };
+    const result = { title: 'Test Result' };
+
+    query.onResultSelected = () => {
+      eventHandled = true;
+    };
+
+    query.handleKeyPress(mockEvent, result);
+    expect(eventHandled).to.be.true;
+  });
+
+  it('should remove hover interaction layer from map', () => {
+    const mockResult = { layer: fakeMap };
+    let layerRemoved = false;
+
+    query.hoverResult = mockResult;
+    fakeMap.removeLayer = () => {
+      layerRemoved = true;
+    };
+
+    query.removeHoverResult();
+    expect(layerRemoved).to.be.true;
+  });
+
+  // Test for selecting a result
+  it('should select a result and adjust the map view', () => {
+    const mockResult = {
+      title: 'Selected Result',
+      position: new L.LatLng(0, 0),
+      onSelected: () => false,
+    };
+    let viewSet = false;
+
+    fakeMap.setView = () => {
+      viewSet = true;
+    };
+    query.onResultSelected(mockResult, { type: 'click' });
+
+    expect(viewSet).to.be.true;
+    expect(query.selectedResult).to.equal(mockResult);
+  });
+
+  it('should prevent map repositioning if onSelected returns true', () => {
+    const mockResult = { title: 'Selected Result', onSelected: () => true };
+    let viewSet = false;
+
+    fakeMap.setView = () => {
+      viewSet = true;
+    };
+    query.onResultSelected(mockResult, { type: 'click' });
+
+    expect(viewSet).to.be.false;
+  });
+});
diff --git a/test/utils.spec.js b/test/utils.spec.js
index 278462ec0..f42962169 100644
--- a/test/utils.spec.js
+++ b/test/utils.spec.js
@@ -1,4 +1,4 @@
-import { describe, it, beforeEach } from 'mocha';
+import { describe, it, before, beforeEach } from 'mocha';
 import { expect } from 'chai';
 
 /* global IITC */
@@ -667,3 +667,84 @@ describe('IITC.utils.clamp', () => {
     expect(result).to.equal(-5);
   });
 });
+
+describe('IITC.utils.getTeamId', () => {
+  before(() => {
+    window.TEAM_CODENAMES = ['NEUTRAL', 'RESISTANCE', 'ENLIGHTENED', 'MACHINA'];
+    window.TEAM_CODES = ['N', 'R', 'E', 'M'];
+    window.TEAM_NONE = 0;
+  });
+
+  describe('string input', () => {
+    it('should return correct ID for valid team names from TEAM_CODENAMES', () => {
+      expect(IITC.utils.getTeamId('NEUTRAL')).to.equal(0);
+      expect(IITC.utils.getTeamId('RESISTANCE')).to.equal(1);
+      expect(IITC.utils.getTeamId('ENLIGHTENED')).to.equal(2);
+      expect(IITC.utils.getTeamId('MACHINA')).to.equal(3);
+    });
+
+    it('should return correct ID for valid team codes from TEAM_CODES', () => {
+      expect(IITC.utils.getTeamId('N')).to.equal(0);
+      expect(IITC.utils.getTeamId('R')).to.equal(1);
+      expect(IITC.utils.getTeamId('E')).to.equal(2);
+      expect(IITC.utils.getTeamId('M')).to.equal(3);
+    });
+
+    it('should be case sensitive', () => {
+      expect(IITC.utils.getTeamId('resistance')).to.equal(window.TEAM_NONE);
+      expect(IITC.utils.getTeamId('Resistance')).to.equal(window.TEAM_NONE);
+      expect(IITC.utils.getTeamId('r')).to.equal(window.TEAM_NONE);
+    });
+
+    it('should return TEAM_NONE for invalid team names or codes', () => {
+      expect(IITC.utils.getTeamId('ALIENS')).to.equal(window.TEAM_NONE);
+      expect(IITC.utils.getTeamId('X')).to.equal(window.TEAM_NONE);
+      expect(IITC.utils.getTeamId('')).to.equal(window.TEAM_NONE);
+    });
+  });
+
+  describe('object input', () => {
+    it('should return correct ID for objects with valid team names', () => {
+      expect(IITC.utils.getTeamId({ team: 'NEUTRAL' })).to.equal(0);
+      expect(IITC.utils.getTeamId({ team: 'RESISTANCE' })).to.equal(1);
+      expect(IITC.utils.getTeamId({ team: 'ENLIGHTENED' })).to.equal(2);
+      expect(IITC.utils.getTeamId({ team: 'MACHINA' })).to.equal(3);
+    });
+
+    it('should return correct ID for objects with valid team codes', () => {
+      expect(IITC.utils.getTeamId({ team: 'N' })).to.equal(0);
+      expect(IITC.utils.getTeamId({ team: 'R' })).to.equal(1);
+      expect(IITC.utils.getTeamId({ team: 'E' })).to.equal(2);
+      expect(IITC.utils.getTeamId({ team: 'M' })).to.equal(3);
+    });
+
+    it('should return TEAM_NONE for objects with invalid team property values', () => {
+      expect(IITC.utils.getTeamId({ team: 'ALIENS' })).to.equal(window.TEAM_NONE);
+      expect(IITC.utils.getTeamId({ team: 'X' })).to.equal(window.TEAM_NONE);
+      expect(IITC.utils.getTeamId({ team: '' })).to.equal(window.TEAM_NONE);
+    });
+  });
+
+  describe('error handling', () => {
+    it('should return TEAM_NONE for null/undefined input', () => {
+      expect(IITC.utils.getTeamId(null)).to.equal(window.TEAM_NONE);
+      expect(IITC.utils.getTeamId(undefined)).to.equal(window.TEAM_NONE);
+    });
+
+    it('should return TEAM_NONE for objects without team property', () => {
+      expect(IITC.utils.getTeamId({})).to.equal(window.TEAM_NONE);
+      expect(IITC.utils.getTeamId({ notTeam: 'RESISTANCE' })).to.equal(window.TEAM_NONE);
+    });
+
+    it('should return TEAM_NONE for objects with null/undefined team property', () => {
+      expect(IITC.utils.getTeamId({ team: null })).to.equal(window.TEAM_NONE);
+      expect(IITC.utils.getTeamId({ team: undefined })).to.equal(window.TEAM_NONE);
+    });
+
+    it('should return TEAM_NONE for non-string/non-object inputs', () => {
+      expect(IITC.utils.getTeamId(123)).to.equal(window.TEAM_NONE);
+      expect(IITC.utils.getTeamId(true)).to.equal(window.TEAM_NONE);
+      expect(IITC.utils.getTeamId([])).to.equal(window.TEAM_NONE);
+    });
+  });
+});