diff --git a/packages/catalog-realm/Spec/48b5382b-1f1e-4fdc-9711-98a1809b07fc.json b/packages/catalog-realm/Spec/48b5382b-1f1e-4fdc-9711-98a1809b07fc.json
deleted file mode 100644
index 46f6ea1efef..00000000000
--- a/packages/catalog-realm/Spec/48b5382b-1f1e-4fdc-9711-98a1809b07fc.json
+++ /dev/null
@@ -1,35 +0,0 @@
-{
-  "data": {
-    "type": "card",
-    "attributes": {
-      "readMe": null,
-      "ref": {
-        "module": "../fields/geo-search-point",
-        "name": "default"
-      },
-      "specType": "card",
-      "containedExamples": [],
-      "cardTitle": "GeoSearchPointField",
-      "cardDescription": null,
-      "cardInfo": {
-        "name": null,
-        "summary": null,
-        "cardThumbnailURL": null,
-        "notes": null
-      }
-    },
-    "relationships": {
-      "linkedExamples": {
-        "links": {
-          "self": null
-        }
-      }
-    },
-    "meta": {
-      "adoptsFrom": {
-        "module": "https://cardstack.com/base/spec",
-        "name": "Spec"
-      }
-    }
-  }
-}
diff --git a/packages/catalog-realm/Spec/5153f123-f7a9-4c1d-8979-615191127e09.json b/packages/catalog-realm/Spec/5153f123-f7a9-4c1d-8979-615191127e09.json
deleted file mode 100644
index 7cbb47a11f1..00000000000
--- a/packages/catalog-realm/Spec/5153f123-f7a9-4c1d-8979-615191127e09.json
+++ /dev/null
@@ -1,56 +0,0 @@
-{
-  "data": {
-    "meta": {
-      "fields": {
-        "containedExamples": [
-          {
-            "adoptsFrom": {
-              "module": "../fields/geo-search-point",
-              "name": "default"
-            }
-          }
-        ]
-      },
-      "adoptsFrom": {
-        "name": "Spec",
-        "module": "https://cardstack.com/base/spec"
-      }
-    },
-    "type": "card",
-    "attributes": {
-      "ref": {
-        "name": "default",
-        "module": "../fields/geo-search-point"
-      },
-      "cardTitle": "GeoSearchPointField",
-      "readMe": "# GeoSearchPointField\n\nA field type that extends GeoPointField to include address search functionality with geocoding. This field allows users to search for locations by address and automatically converts them to geographic coordinate.\n\n## Usage\n\n### Basic Implementation\n\n```gts\nimport GeoSearchPointField from '../fields/geo-search-point';\nimport { CardDef, field, contains } from 'https://cardstack.com/base/card-api';\n\nexport class MyCard extends CardDef {\n  @field location = contains(GeoSearchPointField);\n}\n```\n\n### Field Properties\n\nInherits all properties from GeoPointField:\n- **lat**: Latitude coordinate (number)\n- **lon**: Longitude coordinate (number) \n\nAdds:\n- **searchKey**: The address or location name used for searching (string)\n\n### Display Formats\n\n- **Atom**: Compact view with map icon and address name\n- **Embedded**: Full view with address, coordinate, and interactive map\n- **Edit**: Address search input with live geocoding and marker color picker\n\n### Example Data\n\n```json\n{\n  \"searchKey\": \"Glo Damansara\",\n  \"lat\": 3.1336268,\n  \"lon\": 101.6299203\n}\n```",
-      "cardInfo": {
-        "notes": null,
-        "name": null,
-        "summary": null,
-        "cardThumbnailURL": null
-      },
-      "specType": "field",
-      "cardDescription": "Spec of GeoSearchPointField",
-      "containedExamples": [
-        {
-          "searchKey": "Glo Damansara",
-          "lat": 3.1336268,
-          "lon": 101.6299203
-        }
-      ]
-    },
-    "relationships": {
-      "cardInfo.theme": {
-        "links": {
-          "self": null
-        }
-      },
-      "linkedExamples": {
-        "links": {
-          "self": null
-        }
-      }
-    }
-  }
-}
diff --git a/packages/catalog-realm/Spec/9e538a36-264e-4b5d-b031-6b2c5298af95.json b/packages/catalog-realm/Spec/9e538a36-264e-4b5d-b031-6b2c5298af95.json
deleted file mode 100644
index 21ef67737f5..00000000000
--- a/packages/catalog-realm/Spec/9e538a36-264e-4b5d-b031-6b2c5298af95.json
+++ /dev/null
@@ -1,55 +0,0 @@
-{
-  "data": {
-    "meta": {
-      "fields": {
-        "containedExamples": [
-          {
-            "adoptsFrom": {
-              "module": "../fields/geo-point",
-              "name": "default"
-            }
-          }
-        ]
-      },
-      "adoptsFrom": {
-        "name": "Spec",
-        "module": "https://cardstack.com/base/spec"
-      }
-    },
-    "type": "card",
-    "attributes": {
-      "ref": {
-        "name": "default",
-        "module": "../fields/geo-point"
-      },
-      "cardTitle": "GeoPointField",
-      "readMe": "# GeoPointField\n\nA field type for storing and displaying geographic coordinates (latitude and longitude).\n\n## Usage\n\n### Basic Implementation\n\n```gts\nimport GeoPointField from '../fields/geo-point';\nimport { CardDef, field, contains } from 'https://cardstack.com/base/card-api';\n\nexport class MyCard extends CardDef {\n  @field location = contains(GeoPointField);\n}\n```\n\n### Field Properties\n\n- **lat**: Latitude coordinate (number)\n- **lon**: Longitude coordinate (number)\n\n### Display Formats\n\n- **Atom**: Compact view with map icon and coordinates\n- **Embedded**: Full view with interactive map and coordinate editing\n- **Edit**: Form fields for latitude and longitude input\n\n### Example Data\n\n```json\n{\n  \"lat\": 37.7746,\n  \"lon\": -122.4068\n}\n```",
-      "cardInfo": {
-        "notes": null,
-        "name": null,
-        "summary": null,
-        "cardThumbnailURL": null
-      },
-      "specType": "field",
-      "cardDescription": "Spec of GeoPointField",
-      "containedExamples": [
-        {
-          "lat": 3.1336268,
-          "lon": 101.6299203
-        }
-      ]
-    },
-    "relationships": {
-      "cardInfo.theme": {
-        "links": {
-          "self": null
-        }
-      },
-      "linkedExamples": {
-        "links": {
-          "self": null
-        }
-      }
-    }
-  }
-}
diff --git a/packages/catalog-realm/Spec/geo-point.json b/packages/catalog-realm/Spec/geo-point.json
deleted file mode 100644
index a106898d995..00000000000
--- a/packages/catalog-realm/Spec/geo-point.json
+++ /dev/null
@@ -1,35 +0,0 @@
-{
-  "data": {
-    "type": "card",
-    "attributes": {
-      "readMe": null,
-      "ref": {
-        "module": "../fields/geo-point",
-        "name": "default"
-      },
-      "specType": "field",
-      "containedExamples": [],
-      "cardTitle": "GeoPointField",
-      "cardDescription": null,
-      "cardInfo": {
-        "name": null,
-        "summary": null,
-        "cardThumbnailURL": null,
-        "notes": null
-      }
-    },
-    "relationships": {
-      "linkedExamples": {
-        "links": {
-          "self": null
-        }
-      }
-    },
-    "meta": {
-      "adoptsFrom": {
-        "module": "https://cardstack.com/base/spec",
-        "name": "Spec"
-      }
-    }
-  }
-}
diff --git a/packages/catalog-realm/components/map-render.gts b/packages/catalog-realm/components/map-render.gts
index 803ea84e50c..8536ede4cac 100644
--- a/packages/catalog-realm/components/map-render.gts
+++ b/packages/catalog-realm/components/map-render.gts
@@ -88,7 +88,6 @@ export class MapRender extends GlimmerComponent<MapRenderSignature> {
         margin: 0;
         width: 100%;
         height: 100%;
-        min-height: 300px;
         position: relative;
         display: flex;
         align-items: center;
@@ -198,7 +197,10 @@ class LeafletLayerState implements LeafletLayerStateInterface {
       const color =
         i === 0 ? '#22c55e' : i === coords.length - 1 ? '#ef4444' : '#3b82f6';
       const marker = createMarker(c, color);
-      if (c.address) marker.bindPopup(c.address);
+      const trimmedAddress = c.address?.trim() || undefined;
+      const popupContent =
+        trimmedAddress ?? `${c.lat.toFixed(6)}, ${c.lng.toFixed(6)}`;
+      marker.bindPopup(popupContent);
       return marker;
     });
   }
@@ -247,7 +249,7 @@ class LeafletLayerState implements LeafletLayerStateInterface {
 
     if (coords.length === 1) {
       // single point → just flyTo
-      this.map.flyTo([coords[0].lat, coords[0].lng], 15, {
+      this.map.flyTo([coords[0].lat, coords[0].lng], 13, {
         animate: true,
         duration: 1.2,
       });
@@ -348,7 +350,9 @@ export default class LeafletModifier extends Modifier<LeafletModifierSignature>
   ) {
     if (!this.element) return;
 
-    this.map = L.map(this.element).setView([0, 0], 13);
+    const center = [20, 0];
+    const zoom = 2;
+    this.map = L.map(this.element).setView(center, zoom);
 
     L.tileLayer(
       mapConfig?.tileserverUrl ||
diff --git a/packages/catalog-realm/field-spec/GeoPointFieldSpec/d1f2c3b4-a5e6-4f7a-8b9c-0d1e2f3a4b5c.json b/packages/catalog-realm/field-spec/GeoPointFieldSpec/d1f2c3b4-a5e6-4f7a-8b9c-0d1e2f3a4b5c.json
new file mode 100644
index 00000000000..3b13775ca6a
--- /dev/null
+++ b/packages/catalog-realm/field-spec/GeoPointFieldSpec/d1f2c3b4-a5e6-4f7a-8b9c-0d1e2f3a4b5c.json
@@ -0,0 +1,72 @@
+{
+  "data": {
+    "meta": {
+      "adoptsFrom": {
+        "name": "GeoPointFieldSpec",
+        "module": "../geo-point-spec"
+      }
+    },
+    "type": "card",
+    "attributes": {
+      "ref": {
+        "name": "default",
+        "module": "../../fields/geo-point"
+      },
+      "basic": {
+        "lat": 40.7127281,
+        "lon": -74.0060152
+      },
+      "readMe": null,
+      "cardInfo": {
+        "name": null,
+        "notes": null,
+        "summary": null,
+        "cardThumbnailURL": null
+      },
+      "combined": {
+        "lat": 51.5074456,
+        "lon": -0.1277653
+      },
+      "specType": "field",
+      "cardTitle": "Geo Point Field",
+      "mapPicker": {
+        "lat": 54.51384095408507,
+        "lon": 30.44159057801324
+      },
+      "cardDescription": "Spec card that renders GeoPointField examples.",
+      "containedExamples": [],
+      "withQuickLocations": {
+        "lat": 40.7127281,
+        "lon": -74.0060152
+      },
+      "mapPickerWithAddons": {
+        "lat": 44.83685807826857,
+        "lon": 11.61730322820671
+      },
+      "withCurrentLocation": {
+        "lat": 3.1685246346835263,
+        "lon": 101.53336335143155
+      },
+      "mapPickerWithQuickLocations": {
+        "lat": 51.5074456,
+        "lon": -0.1277653
+      },
+      "mapPickerWithCurrentLocation": {
+        "lat": 3.1685528122228006,
+        "lon": 101.53336585084402
+      }
+    },
+    "relationships": {
+      "cardInfo.theme": {
+        "links": {
+          "self": null
+        }
+      },
+      "linkedExamples": {
+        "links": {
+          "self": null
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/catalog-realm/field-spec/GeoSearchPointFieldSpec/3e4f5a6b-7c8d-9e0f-1a2b-3c4d5e6f7a8b.json b/packages/catalog-realm/field-spec/GeoSearchPointFieldSpec/3e4f5a6b-7c8d-9e0f-1a2b-3c4d5e6f7a8b.json
new file mode 100644
index 00000000000..2db9ba2f8e8
--- /dev/null
+++ b/packages/catalog-realm/field-spec/GeoSearchPointFieldSpec/3e4f5a6b-7c8d-9e0f-1a2b-3c4d5e6f7a8b.json
@@ -0,0 +1,60 @@
+{
+  "data": {
+    "meta": {
+      "adoptsFrom": {
+        "name": "GeoSearchPointFieldSpec",
+        "module": "../geo-search-point-spec"
+      }
+    },
+    "type": "card",
+    "attributes": {
+      "ref": {
+        "name": "default",
+        "module": "../../fields/geo-search-point"
+      },
+      "basic": {
+        "lat": 3.1336269,
+        "lon": 101.6299203,
+        "searchKey": "Glo damansara"
+      },
+      "readMe": null,
+      "cardInfo": {
+        "name": null,
+        "notes": null,
+        "summary": null,
+        "cardThumbnailURL": null
+      },
+      "combined": {
+        "lat": 3.1516964,
+        "lon": 101.6942371,
+        "searchKey": "Kuala Lumpur, 50100, Malaysia"
+      },
+      "specType": "field",
+      "cardTitle": "Geo Search Point Field",
+      "withTopResults": {
+        "lat": 3.1414907,
+        "lon": 101.7182597,
+        "searchKey": "Tun Razak Exchange (TRX), Pudu, Kuala Lumpur, 55188, Malaysia"
+      },
+      "cardDescription": "Spec card that renders GeoSearchPointField examples.",
+      "containedExamples": [],
+      "withoutRecentSearches": {
+        "lat": 48.8534951,
+        "lon": 2.3483915,
+        "searchKey": "Paris, Ile-de-France, Metropolitan France, France"
+      }
+    },
+    "relationships": {
+      "cardInfo.theme": {
+        "links": {
+          "self": null
+        }
+      },
+      "linkedExamples": {
+        "links": {
+          "self": null
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/catalog-realm/field-spec/geo-point-spec.gts b/packages/catalog-realm/field-spec/geo-point-spec.gts
new file mode 100644
index 00000000000..c1e2060fb4c
--- /dev/null
+++ b/packages/catalog-realm/field-spec/geo-point-spec.gts
@@ -0,0 +1,335 @@
+import {
+  Spec,
+  SpecHeader,
+  SpecReadmeSection,
+  ExamplesWithInteractive,
+  SpecModuleSection,
+} from 'https://cardstack.com/base/spec';
+import {
+  field,
+  contains,
+  Component,
+} from 'https://cardstack.com/base/card-api';
+import GeoPointField from '../fields/geo-point';
+import CodeSnippet from '../components/code-snippet';
+
+// 1. Basic standard (no config needed)
+const basicFieldCode = `@field basic = contains(GeoPointField);`;
+
+// 2. With current location tracker
+const withCurrentLocationFieldCode = `@field withCurrentLocation = contains(GeoPointField, {
+  configuration: {
+    options: {
+      showCurrentLocation: true,
+    },
+  },
+});`;
+
+// 3. With quick locations
+const withQuickLocationsFieldCode = `@field withQuickLocations = contains(GeoPointField, {
+  configuration: {
+    options: {
+      quickLocations: ['London', 'Paris', 'Tokyo', 'New York'],
+    },
+  },
+});`;
+
+// 4. Combined: current location + quick locations
+const combinedFieldCode = `@field combined = contains(GeoPointField, {
+  configuration: {
+    options: {
+      showCurrentLocation: true,
+      quickLocations: ['London', 'Paris', 'Tokyo', 'New York'],
+    },
+  },
+});`;
+
+// 5. Map picker variant (no options)
+const mapPickerFieldCode = `@field mapPicker = contains(GeoPointField, {
+  configuration: {
+    variant: 'map-picker',
+  },
+});`;
+
+// 6. Map picker with showCurrentLocation (MapPickerOptions)
+const mapPickerWithCurrentLocationFieldCode = `@field mapPickerWithCurrentLocation = contains(GeoPointField, {
+  configuration: {
+    variant: 'map-picker',
+    options: {
+      mapHeight: '300px',
+      showCurrentLocation: true,
+    },
+  },
+});`;
+
+// 7. Map picker with quickLocations (MapPickerOptions)
+const mapPickerWithQuickLocationsFieldCode = `@field mapPickerWithQuickLocations = contains(GeoPointField, {
+  configuration: {
+    variant: 'map-picker',
+    options: {
+      mapHeight: '300px',
+      quickLocations: ['London', 'Paris', 'Tokyo', 'New York'],
+    },
+  },
+});`;
+
+// 8. Map picker with both addons + map options (MapPickerOptions)
+const mapPickerWithAddonsFieldCode = `@field mapPickerWithAddons = contains(GeoPointField, {
+  configuration: {
+    variant: 'map-picker',
+    options: {
+      tileserverUrl: 'https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png',
+      mapHeight: '300px',
+      showCurrentLocation: true,
+      quickLocations: ['London', 'Paris', 'Tokyo', 'New York'],
+    },
+  },
+});`;
+
+class GeoPointFieldSpecIsolated extends Component<typeof GeoPointFieldSpec> {
+  <template>
+    <article class='container'>
+      <SpecHeader @model={{@model}}>
+        <:title><@fields.cardTitle /></:title>
+        <:description><@fields.cardDescription /></:description>
+      </SpecHeader>
+
+      <SpecReadmeSection @model={{@model}} @context={{@context}}>
+        <@fields.readMe />
+      </SpecReadmeSection>
+
+      <ExamplesWithInteractive>
+        {{! 1. Basic }}
+        <article class='fields-configuration-card'>
+          <CodeSnippet @code={{basicFieldCode}} />
+          <@fields.basic />
+        </article>
+        {{! 2. With current location tracker }}
+        <article class='fields-configuration-card'>
+          <CodeSnippet @code={{withCurrentLocationFieldCode}} />
+          <@fields.withCurrentLocation />
+        </article>
+        {{! 3. With quick locations }}
+        <article class='fields-configuration-card'>
+          <CodeSnippet @code={{withQuickLocationsFieldCode}} />
+          <@fields.withQuickLocations />
+        </article>
+        {{! 4. Combined }}
+        <article class='fields-configuration-card'>
+          <CodeSnippet @code={{combinedFieldCode}} />
+          <@fields.combined />
+        </article>
+        {{! 5. Map picker variant }}
+        <article class='fields-configuration-card'>
+          <CodeSnippet @code={{mapPickerFieldCode}} />
+          <@fields.mapPicker />
+        </article>
+        {{! 6. Map picker with showCurrentLocation (using MapPickerOptions) }}
+        <article class='fields-configuration-card'>
+          <CodeSnippet @code={{mapPickerWithCurrentLocationFieldCode}} />
+          <@fields.mapPickerWithCurrentLocation />
+        </article>
+        {{! 7. Map picker with quickLocations (using MapPickerOptions) }}
+        <article class='fields-configuration-card'>
+          <CodeSnippet @code={{mapPickerWithQuickLocationsFieldCode}} />
+          <@fields.mapPickerWithQuickLocations />
+        </article>
+        {{! 8. Map picker with both addons (using MapPickerOptions) }}
+        <article class='fields-configuration-card'>
+          <CodeSnippet @code={{mapPickerWithAddonsFieldCode}} />
+          <@fields.mapPickerWithAddons />
+        </article>
+      </ExamplesWithInteractive>
+
+      <SpecModuleSection @model={{@model}} />
+    </article>
+    <style scoped>
+      .container {
+        --boxel-spec-background-color: #ebeaed;
+        --boxel-spec-code-ref-background-color: #e2e2e2;
+        --boxel-spec-code-ref-text-color: #646464;
+
+        height: 100%;
+        min-height: max-content;
+        padding: var(--boxel-sp);
+        background-color: var(--boxel-spec-background-color);
+      }
+      .fields-configuration-card {
+        border: var(--boxel-border);
+        border-radius: var(--boxel-border-radius);
+        background-color: var(--boxel-100);
+        padding: var(--boxel-sp-xs);
+        display: flex;
+        flex-direction: column;
+        gap: var(--boxel-sp-xs);
+      }
+    </style>
+  </template>
+}
+
+class GeoPointFieldSpecEdit extends Component<typeof GeoPointFieldSpec> {
+  <template>
+    <article class='container'>
+      <SpecHeader @model={{@model}} @isEditMode={{true}}>
+        <:title><@fields.cardTitle /></:title>
+        <:description><@fields.cardDescription /></:description>
+      </SpecHeader>
+
+      <SpecReadmeSection
+        @model={{@model}}
+        @context={{@context}}
+        @isEditMode={{@canEdit}}
+      >
+        <@fields.readMe />
+      </SpecReadmeSection>
+
+      <ExamplesWithInteractive>
+        {{! 1. Basic }}
+        <article class='fields-configuration-card'>
+          <CodeSnippet @code={{basicFieldCode}} />
+          <@fields.basic @format='edit' />
+        </article>
+        {{! 2. With current location tracker }}
+        <article class='fields-configuration-card'>
+          <CodeSnippet @code={{withCurrentLocationFieldCode}} />
+          <@fields.withCurrentLocation @format='edit' />
+        </article>
+        {{! 3. With quick locations }}
+        <article class='fields-configuration-card'>
+          <CodeSnippet @code={{withQuickLocationsFieldCode}} />
+          <@fields.withQuickLocations @format='edit' />
+        </article>
+        {{! 4. Combined }}
+        <article class='fields-configuration-card'>
+          <CodeSnippet @code={{combinedFieldCode}} />
+          <@fields.combined @format='edit' />
+        </article>
+        {{! 5. Map picker variant }}
+        <article class='fields-configuration-card'>
+          <CodeSnippet @code={{mapPickerFieldCode}} />
+          <@fields.mapPicker @format='edit' />
+        </article>
+        {{! 6. Map picker with showCurrentLocation (using MapPickerOptions) }}
+        <article class='fields-configuration-card'>
+          <CodeSnippet @code={{mapPickerWithCurrentLocationFieldCode}} />
+          <@fields.mapPickerWithCurrentLocation @format='edit' />
+        </article>
+        {{! 7. Map picker with quickLocations (using MapPickerOptions) }}
+        <article class='fields-configuration-card'>
+          <CodeSnippet @code={{mapPickerWithQuickLocationsFieldCode}} />
+          <@fields.mapPickerWithQuickLocations @format='edit' />
+        </article>
+        {{! 8. Map picker with both addons (using MapPickerOptions) }}
+        <article class='fields-configuration-card'>
+          <CodeSnippet @code={{mapPickerWithAddonsFieldCode}} />
+          <@fields.mapPickerWithAddons @format='edit' />
+        </article>
+      </ExamplesWithInteractive>
+
+      <SpecModuleSection @model={{@model}} />
+    </article>
+    <style scoped>
+      .container {
+        --boxel-spec-background-color: #ebeaed;
+        --boxel-spec-code-ref-background-color: #e2e2e2;
+        --boxel-spec-code-ref-text-color: #646464;
+
+        height: 100%;
+        min-height: max-content;
+        padding: var(--boxel-sp);
+        background-color: var(--boxel-spec-background-color);
+      }
+      .fields-configuration-card {
+        border: var(--boxel-border);
+        border-radius: var(--boxel-border-radius);
+        background-color: var(--boxel-100);
+        padding: var(--boxel-sp-xs);
+        display: flex;
+        flex-direction: column;
+        gap: var(--boxel-sp-xs);
+      }
+    </style>
+  </template>
+}
+
+export class GeoPointFieldSpec extends Spec {
+  static displayName = 'Geo Point Field Spec';
+
+  // 1. Basic standard (no config)
+  @field basic = contains(GeoPointField);
+
+  // 2. With current location tracker
+  @field withCurrentLocation = contains(GeoPointField, {
+    configuration: {
+      options: {
+        showCurrentLocation: true,
+      },
+    },
+  });
+
+  // 3. With quick locations
+  @field withQuickLocations = contains(GeoPointField, {
+    configuration: {
+      options: {
+        quickLocations: ['London', 'Paris', 'Tokyo', 'New York'],
+      },
+    },
+  });
+
+  // 4. Combined: current location + quick locations
+  @field combined = contains(GeoPointField, {
+    configuration: {
+      options: {
+        showCurrentLocation: true,
+        quickLocations: ['London', 'Paris', 'Tokyo', 'New York'],
+      },
+    },
+  });
+
+  // 5. Map picker variant (no options)
+  @field mapPicker = contains(GeoPointField, {
+    configuration: {
+      variant: 'map-picker',
+    },
+  });
+
+  // 6. Map picker with showCurrentLocation (using MapPickerOptions)
+  @field mapPickerWithCurrentLocation = contains(GeoPointField, {
+    configuration: {
+      variant: 'map-picker',
+      options: {
+        mapHeight: '300px',
+        showCurrentLocation: true,
+      },
+    },
+  });
+
+  // 7. Map picker with quickLocations (using MapPickerOptions)
+  @field mapPickerWithQuickLocations = contains(GeoPointField, {
+    configuration: {
+      variant: 'map-picker',
+      options: {
+        mapHeight: '300px',
+        quickLocations: ['London', 'Paris', 'Tokyo', 'New York'],
+      },
+    },
+  });
+
+  // 8. Map picker with both addons + map options (using MapPickerOptions)
+  @field mapPickerWithAddons = contains(GeoPointField, {
+    configuration: {
+      variant: 'map-picker',
+      options: {
+        tileserverUrl:
+          'https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png',
+        mapHeight: '300px',
+        showCurrentLocation: true,
+        quickLocations: ['London', 'Paris', 'Tokyo', 'New York'],
+      },
+    },
+  });
+
+  static isolated =
+    GeoPointFieldSpecIsolated as unknown as typeof Spec.isolated;
+  static edit = GeoPointFieldSpecEdit as unknown as typeof Spec.edit;
+}
diff --git a/packages/catalog-realm/field-spec/geo-search-point-spec.gts b/packages/catalog-realm/field-spec/geo-search-point-spec.gts
new file mode 100644
index 00000000000..898ec4761c1
--- /dev/null
+++ b/packages/catalog-realm/field-spec/geo-search-point-spec.gts
@@ -0,0 +1,224 @@
+import {
+  Spec,
+  SpecHeader,
+  SpecReadmeSection,
+  ExamplesWithInteractive,
+  SpecModuleSection,
+} from 'https://cardstack.com/base/spec';
+import {
+  field,
+  contains,
+  Component,
+} from 'https://cardstack.com/base/card-api';
+import GeoSearchPointField from '../fields/geo-search-point';
+import CodeSnippet from '../components/code-snippet';
+
+// 1. Basic (no config)
+const basicFieldCode = `@field basic = contains(GeoSearchPointField);`;
+
+// 2. With top search results
+const withTopResultsCode = `@field withTopResults = contains(GeoSearchPointField, {
+  configuration: {
+    options: {
+      showTopSearchResults: true,
+      topSearchResultsLimit: 5,
+    },
+  },
+});`;
+
+// 3. Top results without recent searches
+const withoutRecentSearchesCode = `@field withoutRecentSearches = contains(GeoSearchPointField, {
+  configuration: {
+    options: {
+      showTopSearchResults: true,
+      topSearchResultsLimit: 5,
+      showRecentSearches: false,
+    },
+  },
+});`;
+
+// 4. Combined: all features
+const combinedCode = `@field combined = contains(GeoSearchPointField, {
+  configuration: {
+    options: {
+      placeholder: 'Start typing an address...',
+      showTopSearchResults: true,
+      topSearchResultsLimit: 5,
+      recentSearchesLimit: 5,
+    },
+  },
+});`;
+
+class GeoSearchPointFieldSpecIsolated extends Component<
+  typeof GeoSearchPointFieldSpec
+> {
+  <template>
+    <article class='container'>
+      <SpecHeader @model={{@model}}>
+        <:title><@fields.cardTitle /></:title>
+        <:description><@fields.cardDescription /></:description>
+      </SpecHeader>
+
+      <SpecReadmeSection @model={{@model}} @context={{@context}}>
+        <@fields.readMe />
+      </SpecReadmeSection>
+
+      <ExamplesWithInteractive>
+        {{! 1. Basic }}
+        <article class='fields-configuration-card'>
+          <CodeSnippet @code={{basicFieldCode}} />
+          <@fields.basic />
+        </article>
+        {{! 2. With top search results }}
+        <article class='fields-configuration-card'>
+          <CodeSnippet @code={{withTopResultsCode}} />
+          <@fields.withTopResults />
+        </article>
+        {{! 3. Top results without recent searches }}
+        <article class='fields-configuration-card'>
+          <CodeSnippet @code={{withoutRecentSearchesCode}} />
+          <@fields.withoutRecentSearches />
+        </article>
+        {{! 4. Combined }}
+        <article class='fields-configuration-card'>
+          <CodeSnippet @code={{combinedCode}} />
+          <@fields.combined />
+        </article>
+      </ExamplesWithInteractive>
+
+      <SpecModuleSection @model={{@model}} />
+    </article>
+    <style scoped>
+      .container {
+        --boxel-spec-background-color: #ebeaed;
+        --boxel-spec-code-ref-background-color: #e2e2e2;
+        --boxel-spec-code-ref-text-color: #646464;
+
+        height: 100%;
+        min-height: max-content;
+        padding: var(--boxel-sp);
+        background-color: var(--boxel-spec-background-color);
+      }
+      .fields-configuration-card {
+        border: var(--boxel-border);
+        border-radius: var(--boxel-border-radius);
+        background-color: var(--boxel-100);
+        padding: var(--boxel-sp-xs);
+        display: flex;
+        flex-direction: column;
+        gap: var(--boxel-sp-xs);
+      }
+    </style>
+  </template>
+}
+
+class GeoSearchPointFieldSpecEdit extends Component<
+  typeof GeoSearchPointFieldSpec
+> {
+  <template>
+    <article class='container'>
+      <SpecHeader @model={{@model}} @isEditMode={{true}}>
+        <:title><@fields.cardTitle /></:title>
+        <:description><@fields.cardDescription /></:description>
+      </SpecHeader>
+
+      <SpecReadmeSection
+        @model={{@model}}
+        @context={{@context}}
+        @isEditMode={{@canEdit}}
+      >
+        <@fields.readMe />
+      </SpecReadmeSection>
+
+      <ExamplesWithInteractive>
+        {{! 1. Basic }}
+        <article class='fields-configuration-card'>
+          <CodeSnippet @code={{basicFieldCode}} />
+          <@fields.basic @format='edit' />
+        </article>
+        {{! 2. With top search results }}
+        <article class='fields-configuration-card'>
+          <CodeSnippet @code={{withTopResultsCode}} />
+          <@fields.withTopResults @format='edit' />
+        </article>
+        {{! 3. Top results without recent searches }}
+        <article class='fields-configuration-card'>
+          <CodeSnippet @code={{withoutRecentSearchesCode}} />
+          <@fields.withoutRecentSearches @format='edit' />
+        </article>
+        {{! 4. Combined }}
+        <article class='fields-configuration-card'>
+          <CodeSnippet @code={{combinedCode}} />
+          <@fields.combined @format='edit' />
+        </article>
+      </ExamplesWithInteractive>
+
+      <SpecModuleSection @model={{@model}} />
+    </article>
+    <style scoped>
+      .container {
+        --boxel-spec-background-color: #ebeaed;
+        --boxel-spec-code-ref-background-color: #e2e2e2;
+        --boxel-spec-code-ref-text-color: #646464;
+
+        height: 100%;
+        min-height: max-content;
+        padding: var(--boxel-sp);
+        background-color: var(--boxel-spec-background-color);
+      }
+      .fields-configuration-card {
+        border: var(--boxel-border);
+        border-radius: var(--boxel-border-radius);
+        background-color: var(--boxel-100);
+        padding: var(--boxel-sp-xs);
+        display: flex;
+        flex-direction: column;
+        gap: var(--boxel-sp-xs);
+      }
+    </style>
+  </template>
+}
+
+export class GeoSearchPointFieldSpec extends Spec {
+  static displayName = 'Geo Search Point Field Spec';
+
+  // 1. Basic (no config)
+  @field basic = contains(GeoSearchPointField);
+
+  // 2. With top search results
+  @field withTopResults = contains(GeoSearchPointField, {
+    configuration: {
+      options: {
+        showTopSearchResults: true,
+        topSearchResultsLimit: 5,
+      },
+    },
+  });
+
+  // 3. Top results without recent searches
+  @field withoutRecentSearches = contains(GeoSearchPointField, {
+    configuration: {
+      options: {
+        showTopSearchResults: true,
+        topSearchResultsLimit: 5,
+        showRecentSearches: false,
+      },
+    },
+  });
+
+  // 4. Combined: all features
+  @field combined = contains(GeoSearchPointField, {
+    configuration: {
+      options: {
+        placeholder: 'Start typing an address...',
+        showTopSearchResults: true,
+        topSearchResultsLimit: 5,
+        recentSearchesLimit: 5,
+      },
+    },
+  });
+
+  static isolated =
+    GeoSearchPointFieldSpecIsolated as unknown as typeof Spec.isolated;
+  static edit = GeoSearchPointFieldSpecEdit as unknown as typeof Spec.edit;
+}
diff --git a/packages/catalog-realm/fields-preview/GeoPointPreview/ef3d6b85-cc8b-46fb-9447-a329d2ab270c.json b/packages/catalog-realm/fields-preview/GeoPointPreview/ef3d6b85-cc8b-46fb-9447-a329d2ab270c.json
deleted file mode 100644
index 17aab1c6495..00000000000
--- a/packages/catalog-realm/fields-preview/GeoPointPreview/ef3d6b85-cc8b-46fb-9447-a329d2ab270c.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "data": {
-    "meta": {
-      "adoptsFrom": {
-        "name": "GeoPointPreview",
-        "module": "../geo-point"
-      }
-    },
-    "type": "card",
-    "attributes": {
-      "cardInfo": {
-        "notes": null,
-        "name": null,
-        "summary": null,
-        "cardThumbnailURL": null
-      },
-      "geoPoint": {
-        "lat": 3.4223567966488933,
-        "lon": 101.78656211516571
-      }
-    },
-    "relationships": {
-      "cardInfo.theme": {
-        "links": {
-          "self": null
-        }
-      }
-    }
-  }
-}
diff --git a/packages/catalog-realm/fields-preview/GeoSearchPointPreview/2b042a26-1932-47bd-b7c8-92d37e9a7e59.json b/packages/catalog-realm/fields-preview/GeoSearchPointPreview/2b042a26-1932-47bd-b7c8-92d37e9a7e59.json
deleted file mode 100644
index 558898f767d..00000000000
--- a/packages/catalog-realm/fields-preview/GeoSearchPointPreview/2b042a26-1932-47bd-b7c8-92d37e9a7e59.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "data": {
-    "meta": {
-      "adoptsFrom": {
-        "name": "GeoSearchPointPreview",
-        "module": "../geo-search-point"
-      }
-    },
-    "type": "card",
-    "attributes": {
-      "cardInfo": {
-        "notes": null,
-        "name": null,
-        "summary": null,
-        "cardThumbnailURL": null
-      },
-      "geoSearchPoint": {
-        "lat": 4.5986817,
-        "lon": 101.0900236,
-        "searchKey": "ipoh"
-      }
-    },
-    "relationships": {
-      "cardInfo.theme": {
-        "links": {
-          "self": null
-        }
-      }
-    }
-  }
-}
diff --git a/packages/catalog-realm/fields-preview/geo-point.gts b/packages/catalog-realm/fields-preview/geo-point.gts
deleted file mode 100644
index 89b75f5eb2a..00000000000
--- a/packages/catalog-realm/fields-preview/geo-point.gts
+++ /dev/null
@@ -1,34 +0,0 @@
-import GeoPointField from '../fields/geo-point';
-
-import { CardDef, field, contains } from 'https://cardstack.com/base/card-api';
-import { Component } from 'https://cardstack.com/base/card-api';
-import { FieldContainer } from '@cardstack/boxel-ui/components';
-
-export class GeoPointPreview extends CardDef {
-  @field geoPoint = contains(GeoPointField);
-
-  static displayName = 'Geo Point Preview';
-  static isolated = class Isolated extends Component<typeof this> {
-    <template>
-      <section class='fields'>
-        <FieldContainer @vertical={{true}} @label='Edit'>
-          <@fields.geoPoint @format='edit' />
-        </FieldContainer>
-        <FieldContainer @vertical={{true}} @label='Atom'>
-          <@fields.geoPoint @format='atom' />
-        </FieldContainer>
-        <FieldContainer @vertical={{true}} @label='Embedded'>
-          <@fields.geoPoint @format='embedded' />
-        </FieldContainer>
-      </section>
-
-      <style scoped>
-        .fields {
-          display: grid;
-          gap: var(--boxel-sp-lg);
-          padding: var(--boxel-sp-xl);
-        }
-      </style>
-    </template>
-  };
-}
diff --git a/packages/catalog-realm/fields-preview/geo-search-point.gts b/packages/catalog-realm/fields-preview/geo-search-point.gts
deleted file mode 100644
index 8aa24a43998..00000000000
--- a/packages/catalog-realm/fields-preview/geo-search-point.gts
+++ /dev/null
@@ -1,34 +0,0 @@
-import GeoSearchPointField from '../fields/geo-search-point';
-
-import { CardDef, field, contains } from 'https://cardstack.com/base/card-api';
-import { Component } from 'https://cardstack.com/base/card-api';
-import { FieldContainer } from '@cardstack/boxel-ui/components';
-
-export class GeoSearchPointPreview extends CardDef {
-  @field geoSearchPoint = contains(GeoSearchPointField);
-
-  static displayName = 'Geo Search Point Preview';
-  static isolated = class Isolated extends Component<typeof this> {
-    <template>
-      <section class='fields'>
-        <FieldContainer @vertical={{true}} @label='Edit'>
-          <@fields.geoSearchPoint @format='edit' />
-        </FieldContainer>
-        <FieldContainer @vertical={{true}} @label='Atom'>
-          <@fields.geoSearchPoint @format='atom' />
-        </FieldContainer>
-        <FieldContainer @vertical={{true}} @label='Embedded'>
-          <@fields.geoSearchPoint @format='embedded' />
-        </FieldContainer>
-      </section>
-
-      <style scoped>
-        .fields {
-          display: grid;
-          gap: var(--boxel-sp-lg);
-          padding: var(--boxel-sp-xl);
-        }
-      </style>
-    </template>
-  };
-}
diff --git a/packages/catalog-realm/fields/geo-point.gts b/packages/catalog-realm/fields/geo-point.gts
index 16e6b720e40..f966dcde440 100644
--- a/packages/catalog-realm/fields/geo-point.gts
+++ b/packages/catalog-realm/fields/geo-point.gts
@@ -5,230 +5,107 @@ import {
   field,
 } from 'https://cardstack.com/base/card-api';
 import NumberField from 'https://cardstack.com/base/number';
-import { action } from '@ember/object';
-import MapIcon from '@cardstack/boxel-icons/map';
 import MapPinIcon from '@cardstack/boxel-icons/map-pin';
-import { FieldContainer } from '@cardstack/boxel-ui/components';
-import { MapRender } from '../components/map-render';
 
-class AtomTemplate extends Component<typeof GeoPointField> {
-  get displayValue() {
-    const lat = this.args.model?.lat;
-    const lon = this.args.model?.lon;
+import GeoPointEditField from './geo-point/components/geo-point-edit-field';
+import GeoPointMapPicker from './geo-point/components/geo-point-map-picker';
 
-    if (lat != null && lon != null) {
-      return `${lat}, ${lon}`;
-    }
-    return 'No coordinates';
-  }
+// --- Configuration Types ---
 
-  <template>
-    <div class='geo-point-display'>
-      <MapIcon class='map-icon' />
-      <span class='coordinate'>{{this.displayValue}}</span>
-    </div>
-
-    <style scoped>
-      .geo-point-display {
-        display: inline-flex;
-        align-items: center;
-        gap: var(--geo-point-gap, var(--boxel-sp-xxs));
-      }
+export interface GeoPointBaseOptions {
+  showCurrentLocation?: boolean;
+  quickLocations?: string[];
+}
 
-      .map-icon {
-        flex-shrink: 0;
-        color: var(--map-icon-color, var(--boxel-red));
-        width: var(--map-icon-width, 16px);
-        height: var(--map-icon-height, 16px);
-      }
-    </style>
-  </template>
+export interface GeoPointMapOptions {
+  tileserverUrl?: string;
+  mapHeight?: string;
 }
 
-class EmbeddedTemplate extends Component<typeof GeoPointField> {
-  get displayValue() {
-    const lat = this.args.model?.lat;
-    const lon = this.args.model?.lon;
+export type GeoPointVariant = 'standard' | 'map-picker';
 
-    if (lat != null && lon != null) {
-      return `${lat}, ${lon}`;
+export type GeoPointConfiguration =
+  | {
+      variant?: 'standard';
+      options?: GeoPointBaseOptions;
     }
-    return 'No coordinates';
-  }
+  | {
+      variant?: 'map-picker';
+      options?: GeoPointBaseOptions & GeoPointMapOptions;
+    };
 
-  get coordinates() {
-    const lat = this.args.model?.lat;
-    const lon = this.args.model?.lon;
+// --- Dispatcher Templates ---
 
-    if (lat != null && lon != null) {
-      return [{ lat, lng: lon }];
-    }
-    return [];
-  }
+export class GeoPointEdit extends Component<typeof GeoPointField> {
+  <template>
+    <GeoPointEditField
+      @model={{@model}}
+      @canEdit={{@canEdit}}
+      @configuration={{@configuration}}
+    />
+  </template>
+}
 
-  get hasValidCoordinates() {
-    return this.args.model?.lat != null && this.args.model?.lon != null;
+export class GeoPointEmbedded extends Component<typeof GeoPointField> {
+  get config(): GeoPointConfiguration {
+    return (this.args.configuration as GeoPointConfiguration) ?? {};
   }
 
-  @action
-  updateCoordinate(coordinate: { lat: number; lng: number }) {
-    if (this.args.model) {
-      this.args.model.lat = coordinate.lat;
-      this.args.model.lon = coordinate.lng;
+  get mapOptions() {
+    const { options, variant } = this.config;
+    if (variant !== 'map-picker' || !options) {
+      return undefined;
     }
+    const mapOpts = options as GeoPointBaseOptions & GeoPointMapOptions;
+    return {
+      mapHeight: mapOpts.mapHeight,
+      tileserverUrl: mapOpts.tileserverUrl,
+    };
   }
 
   <template>
-    <div class='embedded-template'>
-      {{#if this.hasValidCoordinates}}
-        <div class='geo-preview'>
-          <div class='geo-header'>
-            <MapIcon class='map-icon' />
-            <div class='geo-info'>
-              <h3 class='geo-title'>Location</h3>
-              <span class='coordinate'>{{this.displayValue}}</span>
-            </div>
-          </div>
-
-          <div class='map-container'>
-            <MapRender
-              @coordinates={{this.coordinates}}
-              @onMapClick={{this.updateCoordinate}}
-            />
-          </div>
-        </div>
-      {{else}}
-        <div class='geo-placeholder'>
-          <div class='placeholder-text'>
-            <div class='placeholder-icon'>📍</div>
-            <div class='placeholder-title'>Add Coordinates</div>
-            <div class='placeholder-description'>
-              Enter latitude and longitude values to see the location on the map
-            </div>
-          </div>
-        </div>
-      {{/if}}
-    </div>
-
-    <style scoped>
-      .embedded-template {
-        display: flex;
-        flex-direction: column;
-        gap: var(--boxel-sp-md);
-      }
-
-      .geo-preview {
-        overflow: hidden;
-        background: var(--boxel-surface-secondary);
-        border: 1px solid var(--boxel-border-color);
-      }
-
-      .geo-header {
-        display: flex;
-        align-items: flex-start;
-        gap: var(--boxel-sp-xxs);
-        padding: var(--boxel-sp-sm);
-        background: var(--boxel-surface);
-        border-bottom: 1px solid var(--boxel-border-color);
-      }
-
-      .geo-info {
-        display: flex;
-        flex-direction: column;
-        gap: var(--boxel-sp-xxs);
-        flex: 1;
-      }
-
-      .geo-title {
-        margin: 0;
-        font-size: 16px;
-        font-weight: 600;
-        line-height: normal;
-        color: var(--boxel-text-color);
-      }
-
-      .map-icon {
-        flex-shrink: 0;
-        color: var(--map-icon-color, var(--boxel-red));
-        width: var(--map-icon-width, 16px);
-        height: var(--map-icon-height, 16px);
-      }
-
-      .coordinate {
-        font-weight: 500;
-        color: var(--boxel-text-color);
-        font-size: 14px;
-      }
-
-      .map-container {
-        flex: 1;
-        width: 100%;
-        height: 100%;
-        border: 1px solid var(--boxel-border-color);
-        border-radius: var(--boxel-border-radius);
-        background: var(--boxel-surface-secondary);
-        overflow: hidden;
-        position: relative;
-      }
-
-      .geo-placeholder {
-        height: 250px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: var(--boxel-surface-secondary);
-        border: 2px dashed var(--boxel-border-color);
-        border-radius: var(--boxel-border-radius);
-      }
-
-      .placeholder-text {
-        text-align: center;
-        color: var(--boxel-text-muted);
-      }
-
-      .placeholder-icon {
-        font-size: 32px;
-        margin-bottom: 8px;
-      }
-
-      .placeholder-title {
-        font-size: 16px;
-        font-weight: 600;
-        margin-bottom: 4px;
-        color: var(--boxel-text-color);
-      }
-
-      .placeholder-description {
-        font-size: 14px;
-        line-height: 1.4;
-      }
-    </style>
+    <GeoPointMapPicker
+      @model={{@model}}
+      @options={{this.mapOptions}}
+      @canEdit={{false}}
+    />
   </template>
 }
 
-class EditTemplate extends Component<typeof GeoPointField> {
+export class GeoPointAtom extends Component<typeof GeoPointField> {
+  get displayValue(): string {
+    const { lat, lon } = this.args.model;
+    if (lat != null && lon != null) {
+      return `${lat}, ${lon}`;
+    }
+    return 'No location';
+  }
+
   <template>
-    <FieldContainer @vertical={{true}} @label='Latitude' @tag='label'>
-      <@fields.lat />
-    </FieldContainer>
-    <FieldContainer @vertical={{true}} @label='Longitude' @tag='label'>
-      <@fields.lon />
-    </FieldContainer>
+    <span class='geo-point-atom'>
+      <MapPinIcon class='pin-icon' />
+      <span>{{this.displayValue}}</span>
+    </span>
 
     <style scoped>
-      label + label {
-        margin-top: var(--boxel-sp-xs);
+      .geo-point-atom {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--boxel-sp-xxs);
       }
 
-      .color-palette-container {
-        padding: 1rem;
-        border-radius: var(--boxel-border-radius);
-        border: var(--boxel-border-card);
+      .pin-icon {
+        width: 14px;
+        height: 14px;
+        flex-shrink: 0;
+        color: var(--boxel-red);
       }
     </style>
   </template>
 }
 
+// --- Field Definition ---
+
 export default class GeoPointField extends FieldDef {
   static displayName = 'Geo Point';
   static icon = MapPinIcon;
@@ -236,7 +113,7 @@ export default class GeoPointField extends FieldDef {
   @field lat = contains(NumberField);
   @field lon = contains(NumberField);
 
-  static atom = AtomTemplate;
-  static embedded = EmbeddedTemplate;
-  static edit = EditTemplate;
+  static atom = GeoPointAtom;
+  static embedded = GeoPointEmbedded;
+  static edit = GeoPointEdit;
 }
diff --git a/packages/catalog-realm/fields/geo-point/components/current-location-addon.gts b/packages/catalog-realm/fields/geo-point/components/current-location-addon.gts
new file mode 100644
index 00000000000..fd4be96ad0f
--- /dev/null
+++ b/packages/catalog-realm/fields/geo-point/components/current-location-addon.gts
@@ -0,0 +1,94 @@
+import GlimmerComponent from '@glimmer/component';
+import { action } from '@ember/object';
+import { on } from '@ember/modifier';
+import { BoxelButton } from '@cardstack/boxel-ui/components';
+import { not } from '@cardstack/boxel-ui/helpers';
+import { task } from 'ember-concurrency';
+import MapPinIcon from '@cardstack/boxel-icons/map-pin';
+import type { GeoModel } from '../util/index';
+
+interface CurrentLocationAddonSignature {
+  Args: {
+    model: GeoModel;
+    canEdit?: boolean;
+  };
+}
+
+function getPosition(): Promise<GeolocationPosition> {
+  return new Promise((resolve, reject) => {
+    navigator.geolocation.getCurrentPosition(resolve, reject, {
+      timeout: 10000,
+      maximumAge: 0,
+    });
+  });
+}
+
+export default class CurrentLocationAddon extends GlimmerComponent<CurrentLocationAddonSignature> {
+  private locateTask = task(async () => {
+    if (!navigator.geolocation) {
+      throw new Error('Geolocation is not supported by this browser.');
+    }
+    const position = await getPosition();
+    if (this.args.model) {
+      this.args.model.lat = position.coords.latitude;
+      this.args.model.lon = position.coords.longitude;
+    }
+  });
+
+  get errorMessage(): string | null {
+    const error = this.locateTask.last?.error;
+    if (!error) return null;
+    return error instanceof GeolocationPositionError
+      ? `Location error: ${error.message}`
+      : (error as Error).message;
+  }
+
+  @action
+  getCurrentLocation() {
+    this.locateTask.perform();
+  }
+
+  <template>
+    <div class='current-location-addon'>
+      <BoxelButton
+        @kind='primary-dark'
+        @size='small'
+        @loading={{this.locateTask.isRunning}}
+        @disabled={{not @canEdit}}
+        class='current-location-button'
+        {{on 'click' this.getCurrentLocation}}
+      >
+        <MapPinIcon width='14' height='14' />
+        Use Current Location
+      </BoxelButton>
+
+      {{#if this.errorMessage}}
+        <div class='error-message'>
+          {{this.errorMessage}}
+        </div>
+      {{/if}}
+    </div>
+
+    <style scoped>
+      .current-location-addon {
+        display: flex;
+        flex-direction: column;
+        gap: var(--boxel-sp-4xs);
+      }
+
+      .current-location-button {
+        gap: var(--boxel-sp-2xs);
+      }
+
+      .error-message {
+        padding: var(--boxel-sp-4xs) var(--boxel-sp-xs);
+        border-radius: var(--boxel-border-radius-sm);
+        font-size: var(--boxel-font-size-xs);
+        line-height: var(--boxel-line-height-xs);
+        background: var(--boxel-error-100);
+        border-left: 3px solid var(--boxel-error-300);
+        color: var(--boxel-error-300);
+      }
+    </style>
+  </template>
+}
diff --git a/packages/catalog-realm/fields/geo-point/components/geo-point-coordinate-input.gts b/packages/catalog-realm/fields/geo-point/components/geo-point-coordinate-input.gts
new file mode 100644
index 00000000000..7b96da9ac56
--- /dev/null
+++ b/packages/catalog-realm/fields/geo-point/components/geo-point-coordinate-input.gts
@@ -0,0 +1,126 @@
+import GlimmerComponent from '@glimmer/component';
+import { action } from '@ember/object';
+import { not } from '@cardstack/boxel-ui/helpers';
+import { FieldContainer, BoxelInput } from '@cardstack/boxel-ui/components';
+import type { GeoModel } from '../util/index';
+
+interface CoordinateInputSignature {
+  Args: {
+    model: GeoModel;
+    canEdit?: boolean;
+  };
+}
+
+export default class GeoPointCoordinateInput extends GlimmerComponent<CoordinateInputSignature> {
+  get latState(): 'valid' | 'invalid' | 'none' {
+    const lat = this.args.model.lat;
+    if (lat == null) return 'none';
+    if (Number.isNaN(lat)) return 'invalid';
+    return lat >= -90 && lat <= 90 ? 'valid' : 'invalid';
+  }
+
+  get latError(): string | undefined {
+    return this.latState === 'invalid'
+      ? 'Latitude must be between -90 and 90'
+      : undefined;
+  }
+
+  get lonState(): 'valid' | 'invalid' | 'none' {
+    const lon = this.args.model.lon;
+    if (lon == null) return 'none';
+    if (Number.isNaN(lon)) return 'invalid';
+    return lon >= -180 && lon <= 180 ? 'valid' : 'invalid';
+  }
+
+  get lonError(): string | undefined {
+    return this.lonState === 'invalid'
+      ? 'Longitude must be between -180 and 180'
+      : undefined;
+  }
+
+  @action
+  setLat(val: string) {
+    if (this.args.model) {
+      if (val === '') {
+        this.args.model.lat = null;
+      } else {
+        const num = Number(val);
+        this.args.model.lat = Number.isNaN(num) ? null : num;
+      }
+    }
+  }
+
+  @action
+  setLon(val: string) {
+    if (this.args.model) {
+      if (val === '') {
+        this.args.model.lon = null;
+      } else {
+        const num = Number(val);
+        this.args.model.lon = Number.isNaN(num) ? null : num;
+      }
+    }
+  }
+
+  <template>
+    <div class='geo-point-coordinate-input'>
+      <section class='input-stack'>
+        <div class='field-wrapper'>
+          <FieldContainer
+            class='coord-field lat'
+            @vertical={{true}}
+            @label='Latitude'
+            @tag='label'
+          >
+            <BoxelInput
+              @type='number'
+              @value={{@model.lat}}
+              @onInput={{this.setLat}}
+              @disabled={{not @canEdit}}
+              @state={{this.latState}}
+              @errorMessage={{this.latError}}
+            />
+          </FieldContainer>
+        </div>
+
+        <div class='field-wrapper'>
+          <FieldContainer
+            class='coord-field lon'
+            @vertical={{true}}
+            @label='Longitude'
+            @tag='label'
+          >
+            <BoxelInput
+              @type='number'
+              @value={{@model.lon}}
+              @onInput={{this.setLon}}
+              @disabled={{not @canEdit}}
+              @state={{this.lonState}}
+              @errorMessage={{this.lonError}}
+            />
+          </FieldContainer>
+        </div>
+      </section>
+    </div>
+
+    <style scoped>
+      .geo-point-coordinate-input {
+        display: flex;
+        flex-direction: column;
+        gap: var(--boxel-sp);
+      }
+
+      .input-stack {
+        display: flex;
+        flex-direction: column;
+        gap: var(--boxel-sp-xs);
+      }
+
+      .coord-field :global(.boxel-input) {
+        border-radius: var(--boxel-border-radius-sm);
+        border: 1px solid var(--boxel-border-color);
+        width: 100%;
+      }
+    </style>
+  </template>
+}
diff --git a/packages/catalog-realm/fields/geo-point/components/geo-point-edit-field.gts b/packages/catalog-realm/fields/geo-point/components/geo-point-edit-field.gts
new file mode 100644
index 00000000000..1ca23485f98
--- /dev/null
+++ b/packages/catalog-realm/fields/geo-point/components/geo-point-edit-field.gts
@@ -0,0 +1,101 @@
+import GlimmerComponent from '@glimmer/component';
+import { eq, or } from '@cardstack/boxel-ui/helpers';
+import type { GeoModel } from '../util/index';
+import type {
+  GeoPointConfiguration,
+  GeoPointMapOptions,
+  GeoPointVariant,
+} from '../../geo-point';
+import GeoPointCoordinateInput from './geo-point-coordinate-input';
+import GeoPointMapPicker from './geo-point-map-picker';
+import CurrentLocationAddon from './current-location-addon';
+import QuickLocationsAddon from './quick-locations-addon';
+
+interface GeoPointEditFieldSignature {
+  Args: {
+    model: GeoModel;
+    canEdit?: boolean;
+    configuration?: GeoPointConfiguration;
+  };
+}
+
+export default class GeoPointEditField extends GlimmerComponent<GeoPointEditFieldSignature> {
+  get variant(): GeoPointVariant {
+    return this.args.configuration?.variant ?? 'standard';
+  }
+
+  private get options() {
+    return this.args.configuration?.options ?? {};
+  }
+
+  get showCurrentLocation(): boolean {
+    return this.options.showCurrentLocation ?? false;
+  }
+
+  get quickLocations(): string[] {
+    return this.options.quickLocations ?? [];
+  }
+
+  get hasQuickLocations(): boolean {
+    return this.quickLocations.length > 0;
+  }
+
+  get mapOptions(): GeoPointMapOptions | undefined {
+    const config = this.args.configuration;
+    if (config?.variant !== 'map-picker') return undefined;
+    const opts = config.options;
+    return opts
+      ? { tileserverUrl: opts.tileserverUrl, mapHeight: opts.mapHeight }
+      : undefined;
+  }
+
+  <template>
+    <div class='geo-point-edit-field'>
+      <div class='variant-section'>
+        {{#if (eq this.variant 'map-picker')}}
+          <GeoPointMapPicker
+            @model={{@model}}
+            @options={{this.mapOptions}}
+            @canEdit={{@canEdit}}
+          />
+        {{else}}
+          <GeoPointCoordinateInput @model={{@model}} @canEdit={{@canEdit}} />
+        {{/if}}
+      </div>
+
+      {{#if (or this.showCurrentLocation this.hasQuickLocations)}}
+        <div class='addons-section'>
+          {{#if this.showCurrentLocation}}
+            <CurrentLocationAddon @model={{@model}} @canEdit={{@canEdit}} />
+          {{/if}}
+
+          {{#if this.hasQuickLocations}}
+            <QuickLocationsAddon
+              @model={{@model}}
+              @locations={{this.quickLocations}}
+              @canEdit={{@canEdit}}
+            />
+          {{/if}}
+        </div>
+      {{/if}}
+    </div>
+
+    <style scoped>
+      .geo-point-edit-field {
+        display: flex;
+        flex-direction: column;
+        gap: var(--boxel-sp);
+      }
+
+      .variant-section {
+        width: 100%;
+      }
+
+      .addons-section {
+        display: flex;
+        flex-direction: column;
+        gap: var(--boxel-sp);
+      }
+    </style>
+  </template>
+}
diff --git a/packages/catalog-realm/fields/geo-point/components/geo-point-map-picker.gts b/packages/catalog-realm/fields/geo-point/components/geo-point-map-picker.gts
new file mode 100644
index 00000000000..12bda27a0ef
--- /dev/null
+++ b/packages/catalog-realm/fields/geo-point/components/geo-point-map-picker.gts
@@ -0,0 +1,162 @@
+import GlimmerComponent from '@glimmer/component';
+import { action } from '@ember/object';
+import { htmlSafe } from '@ember/template';
+import MapPinIcon from '@cardstack/boxel-icons/map-pin';
+import { or } from '@cardstack/boxel-ui/helpers';
+import { MapRender, type Coordinate } from '../../../components/map-render';
+import { hasValidCoordinates, formatCoordinates } from '../util/index';
+import type { GeoModel } from '../util/index';
+import type { GeoPointMapOptions } from '../../geo-point';
+
+interface MapPickerSignature {
+  Args: {
+    model: GeoModel;
+    options?: GeoPointMapOptions;
+    canEdit?: boolean;
+  };
+}
+
+export default class GeoPointMapPicker extends GlimmerComponent<MapPickerSignature> {
+  get hasCoordinates() {
+    return hasValidCoordinates(this.args.model);
+  }
+
+  get coordinates(): Coordinate[] {
+    if (!this.hasCoordinates) return [];
+    return [{ lat: this.args.model.lat!, lng: this.args.model.lon! }];
+  }
+
+  get coordinateDisplay() {
+    if (this.hasCoordinates) {
+      return formatCoordinates(this.args.model.lat, this.args.model.lon);
+    }
+    return this.args.canEdit
+      ? 'Click the map to place a pin'
+      : 'No location set';
+  }
+
+  get mapConfig(): {
+    tileserverUrl?: string;
+    disableMapClick?: boolean;
+  } {
+    const config: {
+      tileserverUrl?: string;
+      disableMapClick?: boolean;
+    } = {};
+    if (this.args.options?.tileserverUrl) {
+      config.tileserverUrl = this.args.options.tileserverUrl;
+    }
+    if (!this.args.canEdit) {
+      config.disableMapClick = true;
+    }
+    return config;
+  }
+
+  get mapContainerStyle() {
+    const height = this.args.options?.mapHeight;
+    return height ? htmlSafe(`height: ${height}`) : undefined;
+  }
+
+  @action
+  handleMapClick(coordinate: Coordinate) {
+    if (this.args.canEdit && this.args.model) {
+      this.args.model.lat = coordinate.lat;
+      this.args.model.lon = coordinate.lng;
+    }
+  }
+
+  <template>
+    <div class='geo-point-map-picker'>
+      {{#if (or this.hasCoordinates @canEdit)}}
+        <div class='map-container' style={{this.mapContainerStyle}}>
+          {{#if @canEdit}}
+            <MapRender
+              @coordinates={{this.coordinates}}
+              @onMapClick={{this.handleMapClick}}
+              @mapConfig={{this.mapConfig}}
+            />
+          {{else}}
+            <MapRender
+              @coordinates={{this.coordinates}}
+              @mapConfig={{this.mapConfig}}
+            />
+          {{/if}}
+        </div>
+        {{#if this.hasCoordinates}}
+          <div class='coordinate-display'>
+            📍
+            {{this.coordinateDisplay}}
+          </div>
+        {{else}}
+          <div class='no-location-placeholder-text'>
+            <MapPinIcon class='placeholder-icon' />
+            <span class='placeholder-text'>{{this.coordinateDisplay}}</span>
+          </div>
+        {{/if}}
+      {{else}}
+        <div class='no-location-placeholder'>
+          <MapPinIcon class='placeholder-icon' />
+          <span class='placeholder-text'>{{this.coordinateDisplay}}</span>
+        </div>
+      {{/if}}
+    </div>
+
+    <style scoped>
+      .geo-point-map-picker {
+        display: flex;
+        flex-direction: column;
+        gap: var(--boxel-sp-xs);
+      }
+
+      .map-container {
+        width: 100%;
+        border: 1px solid var(--boxel-border-color);
+        border-radius: var(--boxel-border-radius);
+        overflow: hidden;
+        position: relative;
+      }
+
+      .coordinate-display {
+        --coordinate-display-bg-color: #daf3ff;
+        --coordinate-display-border-color: #0ea5e9;
+        padding: var(--boxel-sp-4xs) var(--boxel-sp-xs);
+        font-size: var(--boxel-font-size-xs);
+        line-height: var(--boxel-line-height-xs);
+        font-family: var(--boxel-font-family-mono);
+        background: var(--coordinate-display-bg-color);
+        border-left: 3px solid var(--coordinate-display-border-color);
+        color: var(--boxel-dark);
+      }
+
+      .no-location-placeholder-text {
+        display: flex;
+        align-items: center;
+        gap: var(--boxel-sp-xs);
+        color: var(--boxel-text-muted);
+        font-size: var(--boxel-font-size-sm);
+      }
+
+      .no-location-placeholder {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: var(--boxel-sp-2xs);
+        background: var(--boxel-surface-secondary);
+        border: 2px dashed var(--boxel-border-color);
+        border-radius: var(--boxel-border-radius);
+        color: var(--boxel-text-muted);
+        aspect-ratio: 16 / 9;
+      }
+
+      .placeholder-icon {
+        width: 24px;
+        height: 24px;
+      }
+
+      .placeholder-text {
+        font-size: var(--boxel-font-size-sm);
+      }
+    </style>
+  </template>
+}
diff --git a/packages/catalog-realm/fields/geo-point/components/quick-locations-addon.gts b/packages/catalog-realm/fields/geo-point/components/quick-locations-addon.gts
new file mode 100644
index 00000000000..9c0061c986c
--- /dev/null
+++ b/packages/catalog-realm/fields/geo-point/components/quick-locations-addon.gts
@@ -0,0 +1,74 @@
+import GlimmerComponent from '@glimmer/component';
+import { action } from '@ember/object';
+import { on } from '@ember/modifier';
+import { fn } from '@ember/helper';
+import { tracked } from '@glimmer/tracking';
+import { eq, not } from '@cardstack/boxel-ui/helpers';
+import { BoxelButton, FieldContainer } from '@cardstack/boxel-ui/components';
+import { task } from 'ember-concurrency';
+import type { GeoModel } from '../util/index';
+import { geocodeLocation } from '../util/index';
+
+interface QuickLocationsAddonSignature {
+  Args: {
+    model: GeoModel;
+    locations: string[];
+    canEdit?: boolean;
+  };
+}
+
+export default class QuickLocationsAddon extends GlimmerComponent<QuickLocationsAddonSignature> {
+  @tracked loadingLocation: string | null = null;
+
+  private geocodeAndSet = task(async (locationName: string) => {
+    this.loadingLocation = locationName;
+    try {
+      const result = await geocodeLocation(locationName);
+      if (result && this.args.model) {
+        this.args.model.lat = result.lat;
+        this.args.model.lon = result.lon;
+      }
+    } catch (error) {
+      console.error('Failed to geocode location:', error);
+    } finally {
+      this.loadingLocation = null;
+    }
+  });
+
+  @action
+  selectQuickLocation(locationName: string) {
+    this.geocodeAndSet.perform(locationName);
+  }
+
+  <template>
+    <FieldContainer
+      class='quick-locations-addon'
+      @vertical={{true}}
+      @label='Quick Locations'
+      @tag='label'
+    >
+      <div class='button-grid'>
+        {{#each @locations as |locationName|}}
+          <BoxelButton
+            @kind='default'
+            @size='small'
+            @rectangular={{true}}
+            @disabled={{not @canEdit}}
+            @loading={{eq this.loadingLocation locationName}}
+            {{on 'click' (fn this.selectQuickLocation locationName)}}
+          >
+            {{locationName}}
+          </BoxelButton>
+        {{/each}}
+      </div>
+    </FieldContainer>
+
+    <style scoped>
+      .button-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: var(--boxel-sp-3xs);
+      }
+    </style>
+  </template>
+}
diff --git a/packages/catalog-realm/fields/geo-point/util/index.gts b/packages/catalog-realm/fields/geo-point/util/index.gts
new file mode 100644
index 00000000000..742be73d21a
--- /dev/null
+++ b/packages/catalog-realm/fields/geo-point/util/index.gts
@@ -0,0 +1,61 @@
+export interface GeoModel {
+  lat?: number | null;
+  lon?: number | null;
+  searchKey?: string | null;
+}
+
+export function hasValidCoordinates(model: GeoModel | null | undefined): boolean {
+  if (!model) return false;
+  const { lat, lon } = model;
+  return (
+    lat != null &&
+    lon != null &&
+    typeof lat === 'number' &&
+    typeof lon === 'number' &&
+    !Number.isNaN(lat) &&
+    !Number.isNaN(lon)
+  );
+}
+
+export function formatCoordinates(
+  lat: number | null | undefined,
+  lon: number | null | undefined,
+  precision?: number,
+): string {
+  if (lat == null || lon == null) return 'No coordinates';
+  const p = precision ?? 6;
+  return `${lat.toFixed(p)}, ${lon.toFixed(p)}`;
+}
+
+export async function geocodeLocation(
+  query: string,
+): Promise<{ lat: number; lon: number } | null> {
+  if (!query || query.trim() === '') return null;
+
+  const response = await fetch(
+    `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(query)}&limit=1`,
+  );
+
+  if (!response.ok) {
+    throw new Error(`Geocoding failed: ${response.status}`);
+  }
+
+  const data = await response.json();
+  if (!data || data.length === 0) return null;
+
+  const lat = parseFloat(data[0].lat);
+  const lon = parseFloat(data[0].lon);
+
+  if (
+    Number.isNaN(lat) ||
+    Number.isNaN(lon) ||
+    lat < -90 ||
+    lat > 90 ||
+    lon < -180 ||
+    lon > 180
+  ) {
+    return null;
+  }
+
+  return { lat, lon };
+}
diff --git a/packages/catalog-realm/fields/geo-search-point.gts b/packages/catalog-realm/fields/geo-search-point.gts
index e8113608564..25991a08ca6 100644
--- a/packages/catalog-realm/fields/geo-search-point.gts
+++ b/packages/catalog-realm/fields/geo-search-point.gts
@@ -1,427 +1,167 @@
-import { action } from '@ember/object';
-import { task } from 'ember-concurrency';
-import { debounce } from 'lodash';
-import { BoxelInput } from '@cardstack/boxel-ui/components';
-import MapIcon from '@cardstack/boxel-icons/map';
-import StringField from 'https://cardstack.com/base/string';
 import {
   Component,
   contains,
   field,
 } from 'https://cardstack.com/base/card-api';
+import StringField from 'https://cardstack.com/base/string';
+import MapPinIcon from '@cardstack/boxel-icons/map-pin';
 import GeoPointField from './geo-point';
-import { MapRender, type Coordinate } from '../components/map-render';
+import GeoSearchPointEditField from './geo-search-point/components/geo-search-point-edit-field';
+import GeoPointMapPicker from './geo-point/components/geo-point-map-picker';
 
-class AtomTemplate extends Component<typeof GeoSearchPointField> {
-  get displayValue() {
-    const address = this.args.model?.searchKey;
-    const lat = this.args.model?.lat;
-    const lon = this.args.model?.lon;
+// --- Configuration Types ---
 
-    if (address && address.trim() !== '') {
-      return address;
-    }
+interface GeoSearchPointCommonOptions {
+  placeholder?: string;
+  tileserverUrl?: string;
+  mapHeight?: string;
+}
 
-    if (lat != null && lon != null) {
-      return `${lat}, ${lon}`;
-    }
+interface GeoSearchPointWithSearchResults extends GeoSearchPointCommonOptions {
+  showTopSearchResults: true;
+  topSearchResultsLimit?: number;
+  showRecentSearches?: boolean;
+  recentSearchesLimit?: number;
+}
 
-    return 'No location';
-  }
+interface GeoSearchPointWithoutSearchResults extends GeoSearchPointCommonOptions {
+  showTopSearchResults?: false;
+}
 
-  <template>
-    <div class='coordinate-section'>
-      <MapIcon class='map-icon' />
-      <span class='coordinate-section-info-title'>{{this.displayValue}}</span>
-    </div>
+export type GeoSearchPointOptions =
+  | GeoSearchPointWithSearchResults
+  | GeoSearchPointWithoutSearchResults;
 
-    <style scoped>
-      .coordinate-section {
-        display: inline-flex;
-        align-items: center;
-        gap: var(--boxel-sp-xxs);
-        flex-shrink: 0;
-      }
+export type GeoSearchPointConfiguration = {
+  options?: GeoSearchPointOptions;
+};
 
-      .coordinate-section-info-title {
-        line-height: normal;
-      }
+// --- Dispatcher Templates ---
 
-      .map-icon {
-        flex-shrink: 0;
-        color: var(--map-icon-color, var(--boxel-red));
-        width: var(--map-icon-width, 16px);
-        height: var(--map-icon-height, 16px);
-      }
-    </style>
+export class GeoSearchPointEdit extends Component<typeof GeoSearchPointField> {
+  <template>
+    <GeoSearchPointEditField
+      @model={{@model}}
+      @canEdit={{@canEdit}}
+      @configuration={{@configuration}}
+    />
   </template>
 }
 
-export class GeoSearchPointEditTemplate extends Component<
+export class GeoSearchPointEmbedded extends Component<
   typeof GeoSearchPointField
 > {
-  get searchAddressValue() {
-    return this.args.model.searchKey;
+  get displayName(): string {
+    const { searchKey, lat, lon } = this.args.model;
+    if (searchKey && searchKey.trim() !== '') return searchKey;
+    if (lat != null && lon != null) return `${lat}, ${lon}`;
+    return 'No location';
   }
 
-  get coordinateDisplay() {
-    const lat = this.args.model?.lat;
-    const lon = this.args.model?.lon;
-
-    if (lat != null && lon != null) {
-      return `📍 Lat: ${lat}, Lon: ${lon}`;
-    }
-    return 'No coordinates available';
+  get config(): GeoSearchPointConfiguration {
+    return (this.args.configuration as GeoSearchPointConfiguration) ?? {};
   }
 
-  private fetchCoordinate = task(async (address: string | undefined) => {
-    if (!address || address.trim() === '') {
-      if (this.args.model) {
-        this.args.model.lat = undefined;
-        this.args.model.lon = undefined;
-      }
-      return;
-    }
-
-    try {
-      const response = await fetch(
-        `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(
-          address,
-        )}&limit=10`,
-      );
-
-      if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`);
-      }
-
-      const data = await response.json();
-
-      if (data && data.length > 0) {
-        if (this.args.model) {
-          const lat = parseFloat(data[0].lat);
-          const lon = parseFloat(data[0].lon);
-
-          // Validate the parsed coordinates
-          if (
-            !isNaN(lat) &&
-            !isNaN(lon) &&
-            lat >= -90 &&
-            lat <= 90 &&
-            lon >= -180 &&
-            lon <= 180
-          ) {
-            this.args.model.lat = lat;
-            this.args.model.lon = lon;
-            console.log('✅ Coordinates updated successfully:', { lat, lon });
-          } else {
-            console.log('❌ Invalid coordinates returned from geocoding API:', {
-              lat,
-              lon,
-            });
-            // Reset coordinates if invalid
-            this.args.model.lat = undefined;
-            this.args.model.lon = undefined;
-          }
-        }
-      } else {
-        console.log('❌ No geocoding results found for address:', address);
-        // Reset coordinates when no results found
-        if (this.args.model) {
-          this.args.model.lat = undefined;
-          this.args.model.lon = undefined;
-        }
-      }
-    } catch (error) {
-      console.error('Error geocoding address:', error);
-      // Reset coordinates on any error
-      if (this.args.model) {
-        this.args.model.lat = undefined;
-        this.args.model.lon = undefined;
-      }
-    }
-  });
-
-  private debouncedGeocodeAddress = debounce(() => {
-    this.fetchCoordinate.perform(this.args.model.searchKey);
-  }, 1000);
-
-  @action
-  updateSearchAddress(value: string) {
-    this.args.model.searchKey = value;
-
-    // If address is cleared, immediately reset coordinates
-    if (!value || value.trim() === '') {
-      if (this.args.model) {
-        this.args.model.lat = undefined;
-        this.args.model.lon = undefined;
-      }
-      return;
-    }
-
-    this.debouncedGeocodeAddress();
+  get mapOptions() {
+    const opts = this.config.options;
+    return {
+      mapHeight: opts?.mapHeight,
+      tileserverUrl: opts?.tileserverUrl,
+    };
   }
 
   <template>
-    <div class='edit-template'>
-      <BoxelInput
-        id='address-search-input'
-        type='text'
-        placeholder='Enter address to search...'
-        @value={{this.searchAddressValue}}
-        @onInput={{this.updateSearchAddress}}
-      />
-
-      <div class='coordinate'>
-        {{#if this.fetchCoordinate.isRunning}}
-          <div class='loading-state'>
-            🔍 Searching for coordinates...
-          </div>
-        {{else}}
-          <div class='coordinate-display'>
-            {{this.coordinateDisplay}}
-          </div>
-        {{/if}}
+    <div class='geo-search-point-embedded'>
+      <div class='info-row'>
+        <MapPinIcon class='pin-icon' />
+        <div class='content'>
+          <span class='display-name'>{{this.displayName}}</span>
+        </div>
       </div>
+
+      <GeoPointMapPicker
+        @model={{@model}}
+        @options={{this.mapOptions}}
+        @canEdit={{false}}
+      />
     </div>
 
     <style scoped>
-      .edit-template > * + * {
-        margin-top: 1rem;
-      }
-
-      .coordinate-container {
-        margin-top: 0.2rem;
+      .geo-search-point-embedded {
+        display: flex;
+        flex-direction: column;
+        gap: var(--boxel-sp-xs);
       }
 
-      .coordinate {
-        margin-top: 8px;
-        padding: 8px 12px;
-        border-radius: 4px;
-        font-size: 13px;
-        font-family: 'Monaco', 'Menlo', monospace;
+      .info-row {
+        display: flex;
+        align-items: start;
+        gap: var(--boxel-sp-xxs);
       }
 
-      .loading-state {
-        background: #fef3c7;
-        border-left: 4px solid #f59e0b;
-        color: #92400e;
-        padding: 4px 10px;
+      .pin-icon {
+        width: 14px;
+        height: 14px;
+        flex-shrink: 0;
+        color: var(--boxel-red);
       }
 
-      .coordinate-display {
-        background: #f0f9ff;
-        border-left: 4px solid #0ea5e9;
-        color: #0c4a6e;
-        padding: 4px 10px;
+      .content {
+        display: flex;
+        flex-direction: column;
+        gap: var(--boxel-sp-xxs);
       }
 
-      .color-palette-container {
-        padding: 1rem;
-        border-radius: var(--boxel-border-radius);
-        border: var(--boxel-border-card);
+      .display-name {
+        font-size: var(--boxel-font-size-sm);
+        font-weight: 600;
+        color: var(--boxel-dark);
       }
     </style>
   </template>
 }
 
-class EmbeddedTemplate extends Component<typeof GeoSearchPointField> {
-  get displayValue() {
-    const address = this.args.model?.searchKey;
-    const lat = this.args.model?.lat;
-    const lon = this.args.model?.lon;
-
-    if (address && address.trim() !== '') {
-      return address;
-    }
-
-    if (lat != null && lon != null) {
-      return `${lat}, ${lon}`;
-    }
-
+export class GeoSearchPointAtom extends Component<typeof GeoSearchPointField> {
+  get displayValue(): string {
+    const { searchKey, lat, lon } = this.args.model;
+    if (searchKey && searchKey.trim() !== '') return searchKey;
+    if (lat != null && lon != null) return `${lat}, ${lon}`;
     return 'No location';
   }
 
-  get coordinateDisplay() {
-    const lat = this.args.model?.lat;
-    const lon = this.args.model?.lon;
-
-    if (lat != null && lon != null) {
-      return `${lat}, ${lon}`;
-    }
-    return 'No coordinates';
-  }
-
-  get coordinates(): Coordinate[] {
-    const lat = this.args.model?.lat;
-    const lon = this.args.model?.lon;
-    const address = this.args.model?.searchKey;
-
-    if (
-      lat != null &&
-      lon != null &&
-      typeof lat === 'number' &&
-      typeof lon === 'number' &&
-      !isNaN(lat) &&
-      !isNaN(lon)
-    ) {
-      return [
-        {
-          lat,
-          lng: lon,
-          address: address || 'Waypoint',
-        },
-      ];
-    }
-
-    return [];
-  }
-
-  get hasValidCoordinates() {
-    const lat = this.args.model?.lat;
-    const lon = this.args.model?.lon;
-
-    return (
-      lat != null &&
-      lon != null &&
-      typeof lat === 'number' &&
-      typeof lon === 'number' &&
-      !isNaN(lat) &&
-      !isNaN(lon)
-    );
-  }
-
   <template>
-    <div class='embedded-template'>
-      {{#if this.hasValidCoordinates}}
-        <div class='geo-preview'>
-          <div class='geo-header'>
-            <MapIcon class='map-icon' />
-            <div class='geo-info'>
-              <h3 class='geo-title'>{{this.displayValue}}</h3>
-              <span class='coordinate'>{{this.coordinateDisplay}}</span>
-            </div>
-          </div>
-
-          <div class='map-container'>
-            <MapRender @coordinates={{this.coordinates}} />
-          </div>
-        </div>
-      {{else}}
-        <div class='geo-placeholder'>
-          <div class='placeholder-text'>
-            <div class='placeholder-icon'>📍</div>
-            <div class='placeholder-title'>Add Location</div>
-            <div class='placeholder-description'>
-              Enter an address to see the location on the map
-            </div>
-          </div>
-        </div>
-      {{/if}}
-    </div>
+    <span class='geo-search-point-atom'>
+      <MapPinIcon class='pin-icon' />
+      <span>{{this.displayValue}}</span>
+    </span>
 
     <style scoped>
-      .embedded-template {
-        display: flex;
-        flex-direction: column;
-        gap: var(--boxel-sp-md);
-      }
-
-      .geo-preview {
-        overflow: hidden;
-        background: var(--boxel-surface-secondary);
-        border: 1px solid var(--boxel-border-color);
-      }
-
-      .geo-header {
-        display: flex;
-        align-items: flex-start;
-        gap: var(--boxel-sp-xxs);
-        padding: var(--boxel-sp-sm);
-        background: var(--boxel-surface);
-        border-bottom: 1px solid var(--boxel-border-color);
-      }
-
-      .geo-info {
-        display: flex;
-        flex-direction: column;
+      .geo-search-point-atom {
+        display: inline-flex;
+        align-items: center;
         gap: var(--boxel-sp-xxs);
-        flex: 1;
       }
 
-      .geo-title {
-        margin: 0;
-        font-size: 16px;
-        font-weight: 600;
-        line-height: normal;
-        color: var(--boxel-text-color);
-      }
-
-      .map-icon {
+      .pin-icon {
+        width: 14px;
+        height: 14px;
         flex-shrink: 0;
-        color: var(--map-icon-color, var(--boxel-red));
-        width: var(--map-icon-width, 16px);
-        height: var(--map-icon-height, 16px);
-      }
-
-      .coordinate {
-        font-weight: 500;
-        color: var(--boxel-text-color);
-        font-size: 14px;
-      }
-
-      .map-container {
-        flex: 1;
-        width: 100%;
-        height: 100%;
-        border: 1px solid var(--boxel-border-color);
-        border-radius: var(--boxel-border-radius);
-        background: var(--boxel-surface-secondary);
-        overflow: hidden;
-        position: relative;
-      }
-
-      .geo-placeholder {
-        height: 250px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: var(--boxel-surface-secondary);
-        border: 2px dashed var(--boxel-border-color);
-        border-radius: var(--boxel-border-radius);
-      }
-
-      .placeholder-text {
-        text-align: center;
-        color: var(--boxel-text-muted);
-      }
-
-      .placeholder-icon {
-        font-size: 32px;
-        margin-bottom: 8px;
-      }
-
-      .placeholder-title {
-        font-size: 16px;
-        font-weight: 600;
-        margin-bottom: 4px;
-        color: var(--boxel-text-color);
-      }
-
-      .placeholder-description {
-        font-size: 14px;
-        line-height: 1.4;
+        color: var(--boxel-red);
       }
     </style>
   </template>
 }
 
+// --- Field Definition ---
+
 // @ts-ignore
 export default class GeoSearchPointField extends GeoPointField {
   static displayName = 'Geo Search Point';
+  static icon = MapPinIcon;
 
   @field searchKey = contains(StringField);
 
-  static edit = GeoSearchPointEditTemplate;
-  static atom = AtomTemplate;
-  static embedded = EmbeddedTemplate;
+  static edit = GeoSearchPointEdit;
+  static atom = GeoSearchPointAtom;
+  static embedded = GeoSearchPointEmbedded;
 }
diff --git a/packages/catalog-realm/fields/geo-search-point/components/geo-search-address-input.gts b/packages/catalog-realm/fields/geo-search-point/components/geo-search-address-input.gts
new file mode 100644
index 00000000000..26ee0142d19
--- /dev/null
+++ b/packages/catalog-realm/fields/geo-search-point/components/geo-search-address-input.gts
@@ -0,0 +1,88 @@
+import GlimmerComponent from '@glimmer/component';
+import { action } from '@ember/object';
+import { not } from '@cardstack/boxel-ui/helpers';
+import { BoxelInput } from '@cardstack/boxel-ui/components';
+import type { GeoSearchModel } from '../util/index';
+
+interface GeoSearchAddressInputOptions {
+  placeholder?: string;
+}
+
+interface GeoSearchAddressInputSignature {
+  Args: {
+    model: GeoSearchModel;
+    canEdit?: boolean;
+    options?: GeoSearchAddressInputOptions;
+    isSearching?: boolean;
+    onSearch: (value: string) => void;
+  };
+}
+
+export default class GeoSearchAddressInput extends GlimmerComponent<GeoSearchAddressInputSignature> {
+  get canEdit(): boolean {
+    return this.args.canEdit ?? true;
+  }
+
+  get searchAddressValue() {
+    return this.args.model.searchKey ?? '';
+  }
+
+  get coordinateDisplay() {
+    const lat = this.args.model?.lat;
+    const lon = this.args.model?.lon;
+    if (lat != null && lon != null) {
+      return `Lat: ${lat}, Lon: ${lon}`;
+    }
+    return 'No coordinates available';
+  }
+
+  get placeholder() {
+    return this.args.options?.placeholder ?? 'Enter address to search...';
+  }
+
+  @action
+  updateSearchAddress(value: string) {
+    this.args.onSearch(value);
+  }
+
+  <template>
+    <div class='geo-search-address-input'>
+      <BoxelInput
+        type='text'
+        placeholder={{this.placeholder}}
+        @value={{this.searchAddressValue}}
+        @onInput={{this.updateSearchAddress}}
+        @disabled={{not this.canEdit}}
+      />
+
+      <div class='coordinate-display'>
+        {{#if @isSearching}}
+          Searching for coordinates...
+        {{else}}
+          📍
+          {{this.coordinateDisplay}}
+        {{/if}}
+      </div>
+    </div>
+
+    <style scoped>
+      .geo-search-address-input {
+        display: flex;
+        flex-direction: column;
+        gap: var(--boxel-sp-xs);
+      }
+
+      .coordinate-display {
+        --coordinate-display-bg-color: #daf3ff;
+        --coordinate-display-border-color: #0ea5e9;
+        padding: var(--boxel-sp-4xs) var(--boxel-sp-xs);
+        font-size: var(--boxel-font-size-xs);
+        line-height: var(--boxel-line-height-xs);
+        font-family: var(--boxel-font-family-mono);
+        background: var(--coordinate-display-bg-color);
+        border-left: 3px solid var(--coordinate-display-border-color);
+        color: var(--boxel-dark);
+      }
+    </style>
+  </template>
+}
diff --git a/packages/catalog-realm/fields/geo-search-point/components/geo-search-point-edit-field.gts b/packages/catalog-realm/fields/geo-search-point/components/geo-search-point-edit-field.gts
new file mode 100644
index 00000000000..e47f0a195e6
--- /dev/null
+++ b/packages/catalog-realm/fields/geo-search-point/components/geo-search-point-edit-field.gts
@@ -0,0 +1,239 @@
+import GlimmerComponent from '@glimmer/component';
+import type Owner from '@ember/owner';
+import { action } from '@ember/object';
+import { task } from 'ember-concurrency';
+import { debounce } from 'lodash';
+import { tracked } from '@glimmer/tracking';
+import GeoSearchAddressInput from './geo-search-address-input';
+import GeoSearchTopResultsAddon from './geo-search-top-results-addon';
+import GeoSearchRecentSearchesAddon from './geo-search-recent-searches-addon';
+import { searchAddress, type GeoSearchModel } from '../util/index';
+import type {
+  GeoSearchPointConfiguration,
+  GeoSearchPointOptions,
+} from '../../geo-search-point';
+
+// Module-level storage for recent searches keyed by configuration
+// Persists across component recreation within the same page session
+const recentSearchesStorage = new WeakMap<
+  GeoSearchPointConfiguration | object,
+  string[]
+>();
+
+const DEFAULT_CONFIG: GeoSearchPointConfiguration = {};
+
+interface GeoSearchPointEditFieldSignature {
+  Args: {
+    model: GeoSearchModel;
+    canEdit?: boolean;
+    configuration?: GeoSearchPointConfiguration;
+  };
+}
+
+export default class GeoSearchPointEditField extends GlimmerComponent<GeoSearchPointEditFieldSignature> {
+  @tracked searchResults: any[] = [];
+  @tracked recentSearches: string[] = [];
+  @tracked private resultSelected = false;
+
+  constructor(owner: Owner, args: GeoSearchPointEditFieldSignature['Args']) {
+    super(owner, args);
+    const stored = recentSearchesStorage.get(this.config);
+    if (stored) {
+      this.recentSearches = [...stored];
+    }
+  }
+
+  get config(): GeoSearchPointConfiguration {
+    return (this.args.configuration as GeoSearchPointConfiguration) ?? DEFAULT_CONFIG;
+  }
+
+  private get options(): GeoSearchPointOptions {
+    return this.config.options ?? {};
+  }
+
+  get canEdit(): boolean {
+    return this.args.canEdit ?? true;
+  }
+
+  get inputOptions() {
+    return {
+      placeholder: this.options.placeholder,
+    };
+  }
+
+  get showTopSearchResults(): boolean {
+    return this.options.showTopSearchResults === true;
+  }
+
+  get topSearchResultsLimit(): number {
+    if (this.options.showTopSearchResults === true) {
+      return this.options.topSearchResultsLimit ?? 5;
+    }
+    return 5;
+  }
+
+  get showRecentSearches(): boolean {
+    if (this.options.showTopSearchResults === true) {
+      return this.options.showRecentSearches ?? true;
+    }
+    return false;
+  }
+
+  get recentSearchesLimit(): number {
+    if (this.options.showTopSearchResults === true) {
+      return this.options.recentSearchesLimit ?? 5;
+    }
+    return 5;
+  }
+
+  get limitedSearchResults() {
+    return this.searchResults.slice(0, this.topSearchResultsLimit);
+  }
+
+  get limitedRecentSearches() {
+    return this.recentSearches.slice(0, this.recentSearchesLimit);
+  }
+
+  get showTopResultsSection() {
+    return (
+      this.canEdit &&
+      this.showTopSearchResults &&
+      !this.resultSelected &&
+      !!this.args.model?.searchKey?.trim() &&
+      !!this.performSearchTask.last
+    );
+  }
+
+  get showRecentSearchesSection() {
+    return (
+      this.canEdit &&
+      this.showRecentSearches &&
+      this.limitedRecentSearches.length > 0
+    );
+  }
+
+  private performSearchTask = task(async (query: string | undefined) => {
+    if (!query || query.trim() === '') {
+      if (this.args.model) {
+        this.args.model.lat = undefined;
+        this.args.model.lon = undefined;
+      }
+      this.searchResults = [];
+      return;
+    }
+
+    try {
+      const results = await searchAddress(query, this.topSearchResultsLimit);
+      this.searchResults = results.map((r) => r.raw);
+
+      if (results.length > 0 && this.args.model) {
+        const first = results[0];
+        this.args.model.lat = first.lat;
+        this.args.model.lon = first.lon;
+      }
+    } catch (error) {
+      console.error('Error geocoding address:', error);
+      if (this.args.model) {
+        this.args.model.lat = undefined;
+        this.args.model.lon = undefined;
+      }
+      this.searchResults = [];
+    }
+  });
+
+  private debouncedSearch = debounce((query: string) => {
+    this.performSearchTask.perform(query);
+  }, 1000);
+
+  willDestroy(): void {
+    this.debouncedSearch.cancel();
+    super.willDestroy?.();
+  }
+
+  @action
+  handleSearchInput(value: string) {
+    this.resultSelected = false;
+    if (this.args.model) {
+      this.args.model.searchKey = value;
+    }
+
+    const trimmed = value.trim();
+    if (!trimmed) {
+      if (this.args.model) {
+        this.args.model.lat = undefined;
+        this.args.model.lon = undefined;
+      }
+      this.searchResults = [];
+      return;
+    }
+
+    this.debouncedSearch(trimmed);
+  }
+
+  private recordRecentSearch(query: string) {
+    if (!query || this.recentSearches.includes(query)) return;
+    const updated = [query, ...this.recentSearches].slice(
+      0,
+      this.recentSearchesLimit,
+    );
+    this.recentSearches = updated;
+    recentSearchesStorage.set(this.config, updated);
+  }
+
+  @action
+  selectResult(displayName: string) {
+    this.recordRecentSearch(displayName);
+    this.resultSelected = true;
+    this.searchResults = [];
+    if (this.args.model) {
+      this.args.model.searchKey = displayName;
+    }
+    this.performSearchTask.perform(displayName);
+  }
+
+  @action
+  selectRecentSearch(query: string) {
+    this.resultSelected = true;
+    if (this.args.model) {
+      this.args.model.searchKey = query;
+    }
+    this.performSearchTask.perform(query);
+  }
+
+  <template>
+    <div class='geo-search-point-edit-field'>
+      <GeoSearchAddressInput
+        @model={{@model}}
+        @canEdit={{this.canEdit}}
+        @options={{this.inputOptions}}
+        @isSearching={{this.performSearchTask.isRunning}}
+        @onSearch={{this.handleSearchInput}}
+      />
+
+      {{#if this.showTopResultsSection}}
+        <GeoSearchTopResultsAddon
+          @results={{this.limitedSearchResults}}
+          @canEdit={{this.canEdit}}
+          @isSearching={{this.performSearchTask.isRunning}}
+          @onSelectResult={{this.selectResult}}
+        />
+      {{/if}}
+
+      {{#if this.showRecentSearchesSection}}
+        <GeoSearchRecentSearchesAddon
+          @searches={{this.limitedRecentSearches}}
+          @canEdit={{this.canEdit}}
+          @onSelectSearch={{this.selectRecentSearch}}
+        />
+      {{/if}}
+    </div>
+
+    <style scoped>
+      .geo-search-point-edit-field {
+        display: flex;
+        flex-direction: column;
+        gap: var(--boxel-sp);
+      }
+    </style>
+  </template>
+}
diff --git a/packages/catalog-realm/fields/geo-search-point/components/geo-search-recent-searches-addon.gts b/packages/catalog-realm/fields/geo-search-point/components/geo-search-recent-searches-addon.gts
new file mode 100644
index 00000000000..e760c444294
--- /dev/null
+++ b/packages/catalog-realm/fields/geo-search-point/components/geo-search-recent-searches-addon.gts
@@ -0,0 +1,79 @@
+import GlimmerComponent from '@glimmer/component';
+import { on } from '@ember/modifier';
+import { fn } from '@ember/helper';
+import { Pill } from '@cardstack/boxel-ui/components';
+
+interface GeoSearchRecentSearchesAddonSignature {
+  Args: {
+    searches: string[];
+    canEdit?: boolean;
+    onSelectSearch: (query: string) => void;
+  };
+}
+
+export default class GeoSearchRecentSearchesAddon extends GlimmerComponent<GeoSearchRecentSearchesAddonSignature> {
+  get canEdit(): boolean {
+    return this.args.canEdit ?? true;
+  }
+
+  <template>
+    {{#if this.canEdit}}
+      <section class='recent-section'>
+        <h3 class='section-title'>Recent Searches</h3>
+        <div class='recent-pills'>
+          {{#each @searches as |query|}}
+            <Pill
+              class='search-pill'
+              @kind='button'
+              @pillBackgroundColor='var(--boxel-100)'
+              @pillFontColor='var(--boxel-dark-green)'
+              @pillBorderColor='var(--boxel-200)'
+              title={{query}}
+              {{on 'click' (fn @onSelectSearch query)}}
+            >
+              <span class='pill-text'>{{query}}</span>
+            </Pill>
+          {{/each}}
+        </div>
+      </section>
+    {{/if}}
+
+    <style scoped>
+      .recent-section {
+        display: flex;
+        flex-direction: column;
+        gap: var(--boxel-sp-xs);
+      }
+
+      .section-title {
+        font: 600 var(--boxel-font-sm);
+        color: var(--boxel-dark);
+        margin: 0;
+      }
+
+      .recent-pills {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--boxel-sp-xxs);
+      }
+
+      .search-pill {
+        --boxel-pill-padding: var(--boxel-sp-5xs) var(--boxel-sp-xs);
+        --boxel-pill-border-radius: 9999px;
+        --boxel-pill-font: 500 var(--boxel-font-xs);
+        max-width: 150px;
+        cursor: pointer;
+      }
+
+      .pill-text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .search-pill:hover {
+        --boxel-pill-border-color: var(--boxel-dark-green);
+      }
+    </style>
+  </template>
+}
diff --git a/packages/catalog-realm/fields/geo-search-point/components/geo-search-top-results-addon.gts b/packages/catalog-realm/fields/geo-search-point/components/geo-search-top-results-addon.gts
new file mode 100644
index 00000000000..e58051e15ac
--- /dev/null
+++ b/packages/catalog-realm/fields/geo-search-point/components/geo-search-top-results-addon.gts
@@ -0,0 +1,215 @@
+import GlimmerComponent from '@glimmer/component';
+import { on } from '@ember/modifier';
+import { fn } from '@ember/helper';
+import MapPinIcon from '@cardstack/boxel-icons/map-pin';
+import InfoIcon from '@cardstack/boxel-icons/info';
+import SearchIcon from '@cardstack/boxel-icons/search';
+import { SkeletonPlaceholder } from '@cardstack/boxel-ui/components';
+import { not } from '@cardstack/boxel-ui/helpers';
+
+interface GeoSearchTopResultsAddonSignature {
+  Args: {
+    results: any[];
+    canEdit?: boolean;
+    isSearching?: boolean;
+    onSelectResult: (result: any) => void;
+  };
+}
+
+export default class GeoSearchTopResultsAddon extends GlimmerComponent<GeoSearchTopResultsAddonSignature> {
+  get canEdit(): boolean {
+    return this.args.canEdit ?? true;
+  }
+
+  resultAddressType = (value: string): string => {
+    if (!value) return '';
+    return value.charAt(0).toUpperCase() + value.slice(1);
+  };
+
+  <template>
+    {{#if this.canEdit}}
+      <section class='results-section'>
+        <h3 class='section-title'><InfoIcon class='info-icon' />Results</h3>
+        {{#if (not @isSearching)}}
+          {{#if @results.length}}
+            <div class='results-list'>
+              {{#each @results as |result|}}
+                <button
+                  type='button'
+                  class='result-card'
+                  {{on 'click' (fn @onSelectResult result.display_name)}}
+                >
+                  <div class='result-icon'>
+                    <MapPinIcon />
+                  </div>
+                  <div class='result-content'>
+                    <p class='result-name'>
+                      {{result.name}}
+                    </p>
+                    <p class='result-address'>
+                      {{result.display_name}}
+                    </p>
+                    {{#if result.addresstype}}
+                      <span class='result-address-type'>
+                        {{this.resultAddressType result.addresstype}}
+                      </span>
+                    {{/if}}
+                  </div>
+                </button>
+              {{/each}}
+            </div>
+          {{else}}
+            <div class='no-results'>
+              <SearchIcon class='no-results-icon' />
+              <span class='no-results-text'>No results found. Try a different search term.</span>
+            </div>
+          {{/if}}
+        {{else}}
+          <div class='result-card skeleton-card'>
+            <div class='result-icon'>
+              <MapPinIcon />
+            </div>
+            <div class='skeleton-content'>
+              <SkeletonPlaceholder class='skeleton-name' />
+              <SkeletonPlaceholder class='skeleton-address' />
+            </div>
+          </div>
+        {{/if}}
+      </section>
+    {{/if}}
+
+    <style scoped>
+      .results-section {
+        display: flex;
+        flex-direction: column;
+        gap: var(--boxel-sp-xs);
+      }
+
+      .section-title {
+        display: flex;
+        align-items: center;
+        gap: var(--boxel-sp-xxs);
+        font: 600 var(--boxel-font-sm);
+        color: var(--boxel-dark);
+        margin: 0;
+      }
+
+      .info-icon {
+        width: 16px;
+        height: 16px;
+        flex-shrink: 0;
+      }
+
+      .results-list {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .result-card {
+        border: none;
+        display: flex;
+        align-items: flex-start;
+        gap: var(--boxel-sp-sm);
+        width: 100%;
+        padding: var(--boxel-sp) var(--boxel-sp);
+        background-color: var(--boxel-light);
+        cursor: pointer;
+        text-align: left;
+        transition: background-color 0.15s ease;
+      }
+
+      .result-card + .result-card {
+        border-top: 1px solid var(--boxel-200);
+      }
+
+      .result-card:hover {
+        background-color: var(--boxel-200);
+      }
+
+      .result-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        padding-top: var(--boxel-sp-5xs);
+      }
+
+      .result-icon :global(svg) {
+        width: 28px;
+        height: 28px;
+        color: var(--boxel-dark-green);
+      }
+
+      .result-content {
+        display: flex;
+        flex-direction: column;
+        gap: var(--boxel-sp-xxxs);
+        flex: 1;
+        min-width: 0;
+      }
+
+      .result-name {
+        font: 700 var(--boxel-font-sm);
+        color: var(--boxel-dark);
+        margin: 0;
+      }
+
+      .result-address {
+        font: var(--boxel-font-xs);
+        color: var(--boxel-600);
+        margin: 0;
+      }
+
+      .result-address-type {
+        font: 600 var(--boxel-font-xs);
+        color: var(--boxel-dark);
+        margin-top: var(--boxel-sp-5xs);
+      }
+
+      .no-results {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: var(--boxel-sp-2xs);
+        padding: var(--boxel-sp-lg) var(--boxel-sp);
+        background: var(--boxel-surface-secondary);
+        border: 2px dashed var(--boxel-border-color);
+        border-radius: var(--boxel-border-radius);
+        color: var(--boxel-text-muted);
+      }
+
+      .no-results-icon {
+        width: 24px;
+        height: 24px;
+      }
+
+      .no-results-text {
+        font-size: var(--boxel-font-size-sm);
+      }
+
+      .skeleton-card {
+        cursor: default;
+      }
+
+      .skeleton-content {
+        display: flex;
+        flex-direction: column;
+        gap: var(--boxel-sp-xxxs);
+        flex: 1;
+      }
+
+      .skeleton-name {
+        --boxel-skeleton-width: 40%;
+        --boxel-skeleton-height: 14px;
+        --boxel-skeleton-border-radius: 0;
+      }
+
+      .skeleton-address {
+        --boxel-skeleton-width: 80%;
+        --boxel-skeleton-height: 12px;
+        --boxel-skeleton-border-radius: 0;
+      }
+    </style>
+  </template>
+}
diff --git a/packages/catalog-realm/fields/geo-search-point/util/index.gts b/packages/catalog-realm/fields/geo-search-point/util/index.gts
new file mode 100644
index 00000000000..7fd77a41d18
--- /dev/null
+++ b/packages/catalog-realm/fields/geo-search-point/util/index.gts
@@ -0,0 +1,50 @@
+export interface GeoSearchModel {
+  lat?: number | null;
+  lon?: number | null;
+  searchKey?: string | null;
+}
+
+export interface GeoSearchResult {
+  lat: number;
+  lon: number;
+  raw: any;
+}
+
+export async function searchAddress(
+  query: string,
+  limit = 10,
+): Promise<GeoSearchResult[]> {
+  if (!query || query.trim() === '') return [];
+
+  const response = await fetch(
+    `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(
+      query,
+    )}&limit=${limit}`,
+  );
+
+  if (!response.ok) {
+    throw new Error(`Geocoding search failed: ${response.status}`);
+  }
+
+  const data = await response.json();
+  if (!Array.isArray(data) || data.length === 0) return [];
+
+  return data
+    .map((item: any) => {
+      const lat = parseFloat(item.lat);
+      const lon = parseFloat(item.lon);
+      if (
+        Number.isNaN(lat) ||
+        Number.isNaN(lon) ||
+        lat < -90 ||
+        lat > 90 ||
+        lon < -180 ||
+        lon > 180
+      ) {
+        return null;
+      }
+      return { lat, lon, raw: item };
+    })
+    .filter((item: GeoSearchResult | null): item is GeoSearchResult => !!item);
+}
+
diff --git a/packages/catalog-realm/route/route.gts b/packages/catalog-realm/route/route.gts
index 9113876194a..2df309f7a7c 100644
--- a/packages/catalog-realm/route/route.gts
+++ b/packages/catalog-realm/route/route.gts
@@ -10,7 +10,7 @@ import {
 import { MapRender, type Coordinate } from '../components/map-render';
 import LeafletMapConfigField from '../fields/leaflet-map-config-field';
 import GeoSearchPointField, {
-  GeoSearchPointEditTemplate,
+  GeoSearchPointEdit,
 } from '../fields/geo-search-point';
 
 class AtomTemplate extends Component<typeof Route> {
@@ -403,7 +403,7 @@ export class CoordinateField extends GeoSearchPointField {
   static displayName = 'Coordinate';
 
   // resuse the edit template to prevent map embedding
-  static embedded = GeoSearchPointEditTemplate;
+  static embedded = GeoSearchPointEdit;
 }
 
 export class Route extends CardDef {