diff --git a/src/runtime/components/feed-version-map-viewer.vue b/src/runtime/components/feed-version-map-viewer.vue
index 12d32e41..2c027c68 100644
--- a/src/runtime/components/feed-version-map-viewer.vue
+++ b/src/runtime/components/feed-version-map-viewer.vue
@@ -15,22 +15,24 @@
         :zoom="zoom ? zoom : null"
         :circle-radius="circleRadius"
         :circle-color="circleColor"
+        :enable-hover="enableHover"
+        :highlighted-stop-feature-id="highlightedStopFeatureId"
         @set-agency-features="agencyFeatures = $event"
         @map-click="mapClick"
         @set-zoom="currentZoom = $event"
       />
       <div v-if="overlay" class="tl-fv-map-panel">
-        <tl-map-route-list
+        <tl-map-route-stop-list
           :current-zoom="currentZoom"
           :link-version="linkVersion"
           :agency-features="agencyFeatures"
           :is-component-modal-active="isComponentModalActive"
           @close="isComponentModalActive = false"
         >
-          <strong>Select routes</strong>
-          <br>
-          Use your cursor to highlight routes
-        </tl-map-route-list>
+          <p><strong>Select routes and stops</strong></p>
+          <p>Use your cursor to highlight route lines<template v-if="includeStops"> or stop points</template>.</p>
+          <p>Click for details.</p>
+        </tl-map-route-stop-list>
       </div>
     </div>
   </div>
@@ -72,6 +74,7 @@ query ($limit: Int=100, $agency_ids: [Int!], $after:Int!=0, $route_ids: [Int!],
         stop_id
         stop_name
         geometry
+        location_type
       }
     }
     agency {
@@ -123,7 +126,15 @@ export default {
     zoom: { type: Number, default: null },
     enableScrollZoom: { type: Boolean, default: false },
     circleRadius: { type: Number, default: 1 },
-    circleColor: { type: String, default: '#f03b20' }
+    circleColor: { type: String, default: '#f03b20' },
+    enableHover: {
+      type: Boolean,
+      default: true
+    },
+    highlightedStopFeatureId: { 
+      type: [String, Number],
+      default: null 
+    }
   },
   data () {
     return {
@@ -173,18 +184,17 @@ export default {
       const features = []
       for (const feature of this.routes) {
         for (const g of feature.route_stops || []) {
-          if (!(g.stop.location_type !== 0 || g.stop.location_type !== 2)) {
-            continue
+          if (g.stop.location_type === 0 || g.stop.location_type === 2) {
+            const fcopy = Object.assign({}, g.stop)
+            delete fcopy.geometry
+            delete fcopy.__typename
+            features.push({
+              type: 'Feature',
+              geometry: g.stop.geometry,
+              properties: fcopy,
+              id: g.stop.id
+            })
           }
-          const fcopy = Object.assign({}, g.stop)
-          delete fcopy.geometry
-          delete fcopy.__typename
-          features.push({
-            type: 'Feature',
-            geometry: g.stop.geometry,
-            properties: fcopy,
-            id: g.stop.id
-          })
         }
       }
       return features
@@ -195,7 +205,7 @@ export default {
       this.$emit('setRouteFeatures', v)
     },
     stopFeatures (v) {
-      this.$emit('setSopFeatures', v)
+      this.$emit('setStopFeatures', v)
     }
   },
   methods: {
diff --git a/src/runtime/components/map-layers.js b/src/runtime/components/map-layers.js
index 2d61cd68..e14c2c70 100644
--- a/src/runtime/components/map-layers.js
+++ b/src/runtime/components/map-layers.js
@@ -1,3 +1,5 @@
+import { stopColors } from '../constants/stop-colors'
+
 const headways = {
   high: 600,
   medium: 1200,
@@ -17,19 +19,109 @@ const colors = {
   metro: '#ff0000',
   metrooutline: '#ffffff',
   other: '#E6A615',
-  stop: '#007cbf'
+  stop: stopColors.stop,
+  stopNode: stopColors.entrance,
+  stopEntrance: stopColors.entrance,
+  stopGeneric: stopColors.node,
+  stopBoarding: stopColors.boarding
+}
+
+const LocationTypes = {
+  STOP: 0,      // Stop/Platform
+  STATION: 1,   // Station
+  ENTRANCE: 2,  // Entrance/Exit
+  NODE: 3,      // Generic Node
+  BOARDING: 4   // Boarding Area
 }
 
 const stopLayers = [
+  // Add hover/active layer first
+  {
+    name: 'stop-active',
+    type: 'circle',
+    source: 'stops',
+    minzoom: 14,
+    paint: {
+      'circle-radius': [
+        'case',
+        ['boolean', ['feature-state', 'hover'], false],
+        8,
+        6
+      ],
+      'circle-color': [
+        'case',
+        ['>', ['get', 'location_type'], 1],
+        colors.stopNode,
+        colors.stop
+      ],
+      'circle-opacity': [
+        'case',
+        ['boolean', ['feature-state', 'hover'], false],
+        0.8,
+        0.0
+      ],
+      'circle-stroke-width': [
+        'case',
+        ['boolean', ['feature-state', 'hover'], false],
+        6,
+        0
+      ],
+      'circle-stroke-color': [
+        'case',
+        ['boolean', ['feature-state', 'hover'], false],
+        colors.active,
+        '#ffffff'
+      ]
+    },
+    filter: [
+      'any',
+      ['==', ['get', 'location_type'], LocationTypes.STOP],
+      ['==', ['get', 'location_type'], LocationTypes.STATION],
+      ['==', ['get', 'location_type'], LocationTypes.ENTRANCE]
+    ]
+  },
+  // Regular stops layer
   {
     name: 'stops',
     type: 'circle',
     source: 'stops',
+    minzoom: 14,
     paint: {
-      'circle-color': '#000',
+      'circle-color': [
+        'case',
+        ['>', ['get', 'location_type'], 1],
+        colors.stopNode,
+        colors.stop
+      ],
       'circle-radius': 4,
-      'circle-opacity': 0.75
-    }
+      'circle-opacity': 0.75,
+      'circle-stroke-width': [
+        'case',
+        ['==', ['get', 'location_type'], 2],
+        2,
+        ['==', ['get', 'location_type'], 3],
+        2,
+        ['==', ['get', 'location_type'], 4],
+        2,
+        0
+      ],
+      'circle-stroke-color': [
+        'case',
+        ['==', ['get', 'location_type'], 2],
+        colors.stopEntrance,
+        ['==', ['get', 'location_type'], 3],
+        colors.stopGeneric,
+        ['==', ['get', 'location_type'], 4],
+        colors.stopBoarding,
+        '#ffffff'
+      ]
+    },
+    filter: [
+      'any',
+      ['==', ['get', 'location_type'], LocationTypes.STOP],
+      ['==', ['get', 'location_type'], LocationTypes.STATION], 
+      ['==', ['get', 'location_type'], LocationTypes.ENTRANCE]
+    ]
   }
 ]
 
@@ -203,4 +295,64 @@ const routeLayers = [
   }
 ]
 
-export default { headways, colors, stopLayers, routeLayers }
+// Add these new layer definitions
+const otherLayers = {
+  polygons: {
+    id: 'polygons',
+    type: 'fill',
+    source: 'polygons',
+    paint: {
+      'fill-color': '#ccc',
+      'fill-opacity': 0.2
+    }
+  },
+  polygonsOutline: {
+    id: 'polygons-outline',
+    type: 'line',
+    source: 'polygons',
+    paint: {
+      'line-width': 2,
+      'line-color': '#000',
+      'line-opacity': 0.2
+    }
+  },
+  points: {
+    id: 'points',
+    type: 'circle',
+    source: 'points',
+    paint: {
+      'circle-color': ['coalesce', ['get', 'marker-color'], '#f03b20'],
+      'circle-radius': ['coalesce', ['get', 'marker-radius'], 1],
+      'circle-opacity': 0.4
+    }
+  },
+  lines: {
+    id: 'lines',
+    type: 'line',
+    source: 'lines',
+    paint: {
+      'line-color': ['coalesce', ['get', 'stroke'], '#000'],
+      'line-width': ['coalesce', ['get', 'stroke-width'], 2],
+      'line-opacity': 1.0
+    }
+  }
+}
+
+// Add route layer defaults
+const routeLayerDefaults = {
+  type: 'line',
+  layout: {
+    'line-cap': 'round',
+    'line-join': 'round'
+  }
+}
+
+export default { 
+  headways, 
+  colors, 
+  stopLayers, 
+  routeLayers,
+  otherLayers,
+  routeLayerDefaults,
+  LocationTypes
+}
diff --git a/src/runtime/components/map-options-modal.vue b/src/runtime/components/map-options-modal.vue
new file mode 100644
index 00000000..c00f9f5f
--- /dev/null
+++ b/src/runtime/components/map-options-modal.vue
@@ -0,0 +1,168 @@
+<template>
+  <tl-modal 
+    v-model="active"
+    :title="title"
+  >
+    <!-- Stop Type Filters -->
+    <o-field label="Stops to display">
+      <div class="control">
+        <div v-for="(label, type) in stopTypeLabels" :key="type">
+          <o-checkbox
+            :model-value="showStopTypes[type]"
+            @update:model-value="updateFilter(Number(type), $event)"
+            class="stop-type-checkbox"
+          >
+            <span class="stop-type-label">
+              <span 
+                class="color-dot" 
+                :style="{ backgroundColor: getStopTypeColor(type) }"
+              />
+              {{ label }} 
+              <o-tooltip>
+                <o-icon icon="information" />
+                <template #content>
+                  <code>location_type = {{ type }}</code>
+                </template>
+              </o-tooltip>
+            </span>
+          </o-checkbox>
+        </div>
+      </div>
+    </o-field>
+
+    <hr>
+
+    <!-- Route Options -->
+    <o-field label="Routes to display">
+      <div class="control">
+        <div class="mb-2">
+          <o-checkbox
+            :model-value="showGeneratedGeometries"
+            @update:model-value="$emit('update:showGeneratedGeometries', $event)"
+          >
+            Stop-to-stop geometries
+            <o-tooltip label="For routes without agency-defined shapes, render straight lines between stops.">
+              <o-icon icon="information" />
+            </o-tooltip>
+          </o-checkbox>
+        </div>
+        <div>
+          <o-checkbox
+            :model-value="showProblematicGeometries"
+            @update:model-value="$emit('update:showProblematicGeometries', $event)"
+          >
+            Problematic geometries with long segment lengths
+            <o-tooltip label="Routes with extra long segment lengths may look messy and obscure other routes.">
+              <o-icon icon="information" />
+            </o-tooltip>
+          </o-checkbox>
+        </div>
+      </div>
+    </o-field>
+  </tl-modal>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { stopColors } from '../constants/stop-colors'
+
+// Define props
+const props = defineProps({
+  title: {
+    type: String,
+    default: 'Map Options'
+  },
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  showStopTypes: {
+    type: Object,
+    required: true
+  },
+  showGeneratedGeometries: {
+    type: Boolean,
+    required: true
+  },
+  showProblematicGeometries: {
+    type: Boolean,
+    required: true
+  }
+})
+
+// Define emits
+const emit = defineEmits([
+  'update:modelValue',
+  'update:showStopTypes',
+  'update:showGeneratedGeometries',
+  'update:showProblematicGeometries'
+])
+
+// Computed for v-model binding
+const active = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value)
+})
+
+// Define stop type labels
+const stopTypeLabels = {
+  0: 'Stops/Platforms',
+  1: 'Stations',
+  2: 'Entrances/Exits', 
+  3: 'Generic Nodes',
+  4: 'Boarding Areas'
+}
+
+function updateFilter(type, checked) {
+  emit('update:showStopTypes', {
+    ...props.showStopTypes,
+    [type]: checked
+  })
+}
+
+function getStopTypeColor(type) {
+  switch (Number(type)) {
+    case 0: return stopColors.stop
+    case 1: return stopColors.station
+    case 2: return stopColors.entrance
+    case 3: return stopColors.node
+    case 4: return stopColors.boarding
+    default: return '#000000'
+  }
+}
+
+function getStopTypeName(type) {
+  switch (Number(type)) {
+    case 0: return 'Stop/Platform'
+    case 1: return 'Station'
+    case 2: return 'Entrance/Exit'
+    case 3: return 'Generic Node'
+    case 4: return 'Boarding Area'
+    default: return 'Unknown'
+  }
+}
+</script>
+
+<style scoped>
+.control {
+  margin-bottom: 0.5rem;
+}
+
+.stop-type-checkbox {
+  display: block;
+  margin-bottom: 0.5rem;
+}
+
+.stop-type-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.color-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  display: inline-block;
+}
+</style> 
\ No newline at end of file
diff --git a/src/runtime/components/map-route-list.vue b/src/runtime/components/map-route-list.vue
deleted file mode 100644
index 03c0bd4a..00000000
--- a/src/runtime/components/map-route-list.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
-  <div>
-    <div>
-      <div v-if="Object.keys(agencyFeatures).length > 0">
-        <tl-route-select :agency-features="agencyFeatures" :collapse="true" :link="true" />
-      </div>
-      <div v-else>
-        <slot name="default" />
-      </div>
-    </div>
-    <div v-if="isComponentModalActive">
-      <o-modal
-        :active="isComponentModalActive"
-        has-modal-card
-        :on-cancel="close"
-      >
-        <template #default>
-          <div v-if="isComponentModalActive" class="modal-card">
-            <header class="modal-card-head">
-              <p class="modal-card-title">
-                Select Route
-              </p>
-              <button type="button" class="delete" @click="close" />
-            </header>
-            <section class="modal-card-body">
-              <tl-route-select :agency-features="agencyFeatures" :link="true" :link-version="linkVersion" />
-            </section>
-          </div>
-        </template>
-      </o-modal>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    linkVersion: { type: Boolean, default: false },
-    isComponentModalActive: { type: Boolean, default: false },
-    agencyFeatures: { type: Object, default () { return {} } }
-  },
-  methods: {
-    close () {
-      this.$emit('close')
-    }
-  }
-}
-</script>
diff --git a/src/runtime/components/map-route-stop-list.vue b/src/runtime/components/map-route-stop-list.vue
new file mode 100644
index 00000000..425f0c20
--- /dev/null
+++ b/src/runtime/components/map-route-stop-list.vue
@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <div v-if="hasFeatures">
+      <tl-route-stop-select 
+        :agency-features="agencyFeatures" 
+        :collapse="true" 
+        :link="true"
+        :show-stops="true"
+      />
+    </div>
+    <div v-else>
+      <slot />
+    </div>
+
+    <o-modal
+      v-if="isComponentModalActive"
+      :active="true"
+      has-modal-card
+      @close="$emit('close')"
+    >
+      <div class="modal-card">
+        <header class="modal-card-head">
+          <p class="modal-card-title">Select Route or Stop</p>
+        </header>
+        <section class="modal-card-body">
+          <tl-route-stop-select 
+            :agency-features="agencyFeatures" 
+            :link="true"
+            :show-stops="true"
+          />
+        </section>
+      </div>
+    </o-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  isComponentModalActive?: boolean
+  agencyFeatures: Record<string, {
+    routes?: Record<string, {
+      id: string | number
+      route_type: number
+      route_short_name: string
+      route_long_name: string
+      onestop_id: string
+      feed_onestop_id: string
+      feed_version_sha1: string
+      route_id: string
+    }>
+    stops?: Record<string, {
+      id: string | number
+      location_type: number
+      stop_name: string
+      onestop_id: string
+      feed_onestop_id: string
+      feed_version_sha1: string
+      stop_id: string
+    }>
+  }>
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isComponentModalActive: false
+})
+
+defineEmits(['close'])
+
+const hasFeatures = computed(() => {
+  return Object.keys(props.agencyFeatures).some(agency => {
+    const features = props.agencyFeatures[agency]
+    return (features.routes && Object.keys(features.routes).length > 0) ||
+           (features.stops && Object.keys(features.stops).length > 0)
+  })
+})
+</script>
diff --git a/src/runtime/components/map-viewer.vue b/src/runtime/components/map-viewer.vue
index fd556e05..1d738ad9 100644
--- a/src/runtime/components/map-viewer.vue
+++ b/src/runtime/components/map-viewer.vue
@@ -30,13 +30,32 @@ export default {
     hash: { type: Boolean, default: false },
     features: {
       type: Array, default () { return [] }
+    },
+    showStopTypes: {
+      type: Object,
+      default: () => ({
+        0: true,  // Stop/Platform
+        1: true,  // Station  
+        2: true,  // Entrance
+        3: false, // Node
+        4: false  // Boarding Area
+      })
+    },
+    enableHover: {
+      type: Boolean,
+      default: true
+    },
+    highlightedStopFeatureId: {
+      type: [String, Number],
+      default: null
     }
   },
   data () {
     return {
       map: null,
       marker: null,
-      hovering: [],
+      hoveringRoutes: [],
+      hoveringStops: [],
       markerLayer: null
     }
   },
@@ -68,10 +87,35 @@ export default {
     zoom () {
       this.map.jumpTo({ center: this.center, zoom: this.zoom })
     },
-    markers(v) {
+    markers (v) {
       this.drawMarkers(v)
+    },
+    showStopTypes: {
+      handler() {
+        this.updateFilters()
+      },
+      deep: true
+    },
+    highlightedStopFeatureId: {
+      handler(newId) {
+        if (!this.map) return
+        
+        // Wait for map and source to be ready
+        this.map.once('load', () => {
+          console.log('Setting highlight state for stop:', {
+            id: newId,
+            source: 'stops',
+            features: this.stopFeatures.map(f => f.id)
+          })
+          this.map.setFeatureState(
+            { source: 'stops', id: newId },
+            { hover: true }
+          )
+        })
+      }
     }
   },
+
   mounted () {
     if (this.features) {
       nextTick(() => { this.initMap() })
@@ -147,38 +191,70 @@ export default {
       })
     },
     updateFeatures () {
+      console.log('Updating features:', {
+        stopFeatures: this.stopFeatures.length,
+        routeFeatures: this.routeFeatures.length,
+        usingTiles: {
+          stops: !!this.stopTiles,
+          routes: !!this.routeTiles
+        }
+      })
       const polygons = this.features.filter((s) => { return s.geometry.type === 'MultiPolygon' || s.geometry.type === 'Polygon' })
       const points = this.features.filter((s) => { return s.geometry.type === 'Point' })
       const lines = this.features.filter((s) => { return s.geometry.type === 'LineString' })
-      // check if map is initialized... TODO: this could be improved to try again
+
+      // check if map is initialized...
       const p = this.map.getSource('polygons')
       if (!p) {
+        console.warn('Map not initialized yet')
         return
       }
+
       this.map.getSource('polygons').setData({ type: 'FeatureCollection', features: polygons })
       this.map.getSource('lines').setData({ type: 'FeatureCollection', features: lines })
       this.map.getSource('points').setData({ type: 'FeatureCollection', features: points })
-      // this.map.getSource('stops').setData({ type: 'FeatureCollection', features: this.stopFeatures })
-      // this.map.getSource('routes').setData({ type: 'FeatureCollection', features: this.routeFeatures })
-      this.fitFeatures()
-    },
-    updateFilters () {
-      for (const v of mapLayers.stopLayers) {
-        const f = (v.filter || []).slice()
-        if (f.length === 0) {
-          f.push('all')
-        }
-        // Hide all routes?
-        if (this.hideTiles) {
-          f.push(['==', 'route_id', ''])
-        }
-        if (f.length > 1) {
-          this.map.setFilter(v.name, f)
-        } else {
-          this.map.setFilter(v.name, null)
+
+      // Only update if using GeoJSON sources
+      if (!this.stopTiles) {
+        console.log('Updating GeoJSON stops source:', {
+          featureCount: this.stopFeatures.length,
+          features: this.stopFeatures.map(f => ({
+            id: f.id,
+            type: f.type,
+            properties: f.properties
+          }))
+        })
+        this.map.getSource('stops').setData({ 
+          type: 'FeatureCollection', 
+          features: this.stopFeatures 
+        })
+
+        // Set highlight state after updating source
+        if (this.highlightedStopFeatureId) {
+          this.map.setFeatureState(
+            { source: 'stops', id: this.highlightedStopFeatureId },
+            { hover: true }
+          )
         }
       }
+      if (!this.routeTiles) {
+        console.log('Updating GeoJSON routes source:', {
+          featureCount: this.routeFeatures.length,
+          features: this.routeFeatures.map(f => ({
+            id: f.id,
+            type: f.type,
+            properties: f.properties
+          }))
+        })
+        this.map.getSource('routes').setData({ 
+          type: 'FeatureCollection', 
+          features: this.routeFeatures 
+        })
+      }
 
+      this.fitFeatures()
+    },
+    updateFilters () {
       for (const v of mapLayers.routeLayers) {
         const f = (v.filter || []).slice()
         if (f.length === 0) {
@@ -204,8 +280,35 @@ export default {
           this.map.setFilter(v.name, null)
         }
       }
+
+      // Update stop layer filters
+      for (const layer of mapLayers.stopLayers) {
+        let filter = ['any']
+        
+        // Show stop types based on showStopTypes prop
+        const visibleTypes = Object.entries(this.showStopTypes)
+          .filter(([_, visible]) => visible)
+          .map(([type]) => Number(type))
+
+        for (const type of visibleTypes) {
+          filter.push(['==', ['get', 'location_type'], type])
+        }
+
+        if (this.hideTiles) {
+          filter.push(['==', 'stop_id', ''])
+        }
+
+        this.map.setFilter(layer.name, filter)
+      }
     },
     createSources () {
+      console.log('Creating sources:', {
+        routeTiles: this.routeTiles,
+        stopTiles: this.stopTiles,
+        routeFeatures: this.routeFeatures.length,
+        stopFeatures: this.stopFeatures.length
+      })
+
       this.map.addSource('polygons', {
         type: 'geojson',
         data: { type: 'FeatureCollection', features: [] }
@@ -218,8 +321,10 @@ export default {
         type: 'geojson',
         data: { type: 'FeatureCollection', features: [] }
       })
-      // Add route/stop sources, with geojson features as fallbacks
+      // Add route/stop sources
+
       if (this.routeTiles) {
+        console.log('Adding vector tile source for routes:', this.routeTiles)
         this.map.addSource('routes', {
           type: 'vector',
           tiles: [this.routeTiles.url],
@@ -227,11 +332,16 @@ export default {
           maxzoom: this.routeTiles.maxzoom || 14
         })
       } else {
+        console.log('Adding GeoJSON source for routes:', {
+          featureCount: this.routeFeatures.length,
+          firstFeature: this.routeFeatures[0]
+        })
         this.map.addSource('routes', {
           type: 'geojson',
           data: { type: 'FeatureCollection', features: this.routeFeatures }
         })
       }
+
       if (this.stopTiles) {
         this.map.addSource('stops', {
           type: 'vector',
@@ -247,59 +357,14 @@ export default {
       }
     },
     createLayers () {
-      // Other feature layers
-      this.map.addLayer({
-        id: 'polygons',
-        type: 'fill',
-        source: 'polygons',
-        layout: {},
-        paint: {
-          'fill-color': '#ccc',
-          'fill-opacity': 0.2
-        }
-      })
-      this.map.addLayer({
-        id: 'polygons-outline',
-        type: 'line',
-        source: 'polygons',
-        layout: {},
-        paint: {
-          'line-width': 2,
-          'line-color': '#000',
-          'line-opacity': 0.2
-        }
-      })
-      this.map.addLayer({
-        id: 'points',
-        type: 'circle',
-        source: 'points',
-        paint: {
-          'circle-color': ['coalesce', ['get', 'marker-color'], this.circleColor],
-          'circle-radius': ['coalesce', ['get', 'marker-radius'], this.circleRadius],
-          'circle-opacity': 0.4
-        }
-      })
-      this.map.addLayer({
-        id: 'lines',
-        type: 'line',
-        source: 'lines',
-        layout: {},
-        paint: {
-          'line-color': ['coalesce', ['get', 'stroke'], '#000'],
-          'line-width': ['coalesce', ['get', 'stroke-width'], 2],
-          'line-opacity': 1.0
-        }
-      })
-      // Route/Stop layers
+      console.log('Creating layers with paint properties:', mapLayers)
+
+      // Add route layers
       for (const v of mapLayers.routeLayers) {
         const layer = {
+          ...mapLayers.routeLayerDefaults,
           id: v.name,
-          type: 'line',
           source: 'routes',
-          layout: {
-            'line-cap': 'round',
-            'line-join': 'round'
-          },
           minzoom: v.minzoom || 0,
           paint: v.paint
         }
@@ -311,6 +376,8 @@ export default {
         }
         this.map.addLayer(layer)
       }
+
+      // Add stop layers  
       for (const v of mapLayers.stopLayers) {
         const layer = {
           id: v.name,
@@ -326,15 +393,25 @@ export default {
         }
         this.map.addLayer(layer)
       }
-      // add labels last
+
+      // Add other feature layers
+      Object.values(mapLayers.otherLayers).forEach(layer => {
+        this.map.addLayer({
+          ...layer,
+          source: layer.id === 'polygons-outline' ? 'polygons' : layer.id
+        })
+      })
+
+      // Add labels last
       for (const labelLayer of labels('protomaps-base', 'grayscale')) {
         this.map.addLayer(labelLayer)
       }
+
       // Set initial show generated geometry
       this.updateFilters()
     },
 
-    drawMarkers(markers) {
+    drawMarkers (markers) {
       for (const m of this.markerLayer) {
         m.remove()
       }
@@ -391,29 +468,147 @@ export default {
       this.$emit('mapMove', { zoom: this.map.getZoom(), bbox: this.map.getBounds().toArray() })
     },
     mapMouseMove (e) {
+      // Skip hover effects if disabled
+      if (!this.enableHover) {
+        return
+      }
+      
       const map = this.map
-      const features = map.queryRenderedFeatures(e.point, { layers: ['route-active'] })
-      map.getCanvas().style.cursor = 'pointer'
-      for (const k of this.hovering) {
-        map.setFeatureState(
-          { source: 'routes', id: k, sourceLayer: this.routeTiles ? this.routeTiles.id : null },
-          { hover: false }
-        )
+      let routeFeatures = []
+      let stopFeatures = []
+
+      // Query features
+      const routeLayers = this.routeTiles ? ['route-active'] : mapLayers.routeLayers.map(layer => layer.name)
+      const stopLayer = this.stopTiles ? 'stop-active' : 'stops'
+
+      // Query all route layers
+      for (const layer of routeLayers) {
+        if (map.getLayer(layer)) {
+          try {
+            const features = map.queryRenderedFeatures(e.point, { layers: [layer] })
+            routeFeatures = routeFeatures.concat(features)
+          } catch (err) {
+            console.warn(`Error querying route layer ${layer}:`, err)
+          }
+        }
       }
-      this.hovering = []
-      for (const v of features) {
-        this.hovering.push(v.id)
-        map.setFeatureState({ source: 'routes', id: v.id, sourceLayer: this.routeTiles ? this.routeTiles.id : null }, { hover: true })
+
+      // Query stop layer
+      if (map.getLayer(stopLayer)) {
+        try {
+          stopFeatures = map.queryRenderedFeatures(e.point, { layers: [stopLayer] })
+        } catch (err) {
+          console.warn('Error querying stop features:', err)
+        }
       }
+
+      // Update cursor
+      map.getCanvas().style.cursor = stopFeatures.length || routeFeatures.length ? 'pointer' : ''
+
+      // Handle route hover states
+      for (const k of this.hoveringRoutes) {
+        for (const layer of routeLayers) {
+          if (map.getLayer(layer)) {
+            try {
+              map.setFeatureState(
+                { source: 'routes', sourceLayer: this.routeTiles ? 'routes' : undefined, id: k },
+                { hover: false }
+              )
+            } catch (err) {
+              console.warn(`Error removing hover state from route ${k} in layer ${layer}:`, err)
+            }
+          }
+        }
+      }
+      this.hoveringRoutes = []
+
+      // Set hover state for found routes
+      for (const v of routeFeatures) {
+        this.hoveringRoutes.push(v.id)
+        for (const layer of routeLayers) {
+          if (map.getLayer(layer)) {
+            try {
+              map.setFeatureState(
+                { source: 'routes', sourceLayer: this.routeTiles ? 'routes' : undefined, id: v.id },
+                { hover: true }
+              )
+            } catch (err) {
+              console.warn(`Error setting hover state for route ${v.id} in layer ${layer}:`, err)
+            }
+          }
+        }
+      }
+
+      // Handle stop hover states
+      for (const k of this.hoveringStops) {
+        if (map.getLayer(stopLayer)) {
+          try {
+            map.setFeatureState(
+              { source: 'stops', id: k, sourceLayer: this.stopTiles ? this.stopTiles.id : null },
+              { hover: false }
+            )
+          } catch (err) {
+            console.warn('Error removing stop hover state:', err)
+          }
+        }
+      }
+      this.hoveringStops = []
+
+      for (const v of stopFeatures) {
+        this.hoveringStops.push(v.id)
+        if (map.getLayer(stopLayer)) {
+          try {
+            map.setFeatureState(
+              { source: 'stops', id: v.id, sourceLayer: this.stopTiles ? this.stopTiles.id : null },
+              { hover: true }
+            )
+          } catch (err) {
+            console.warn('Error setting stop hover state:', err)
+          }
+        }
+      }
+
+      // Always process and emit features
       const agencyFeatures = {}
-      for (const v of features) {
+      const processFeature = (v) => {
+        try {
+          if (v.properties.route_id) {
+            // Handle route
         const agencyId = v.properties.agency_name
-        const routeId = v.properties.route_id
         if (agencyFeatures[agencyId] == null) {
-          agencyFeatures[agencyId] = {}
+          agencyFeatures[agencyId] = { routes: {}, stops: {} }
+        }
+            agencyFeatures[agencyId].routes[v.properties.route_id] = v.properties
+        } else {
+            // Handle stop
+            const agencies = JSON.parse(v.properties.agencies || '[]')
+            
+            const agencyId = agencies[0]?.agency_name || 'undefined'
+            if (agencyFeatures[agencyId] == null) {
+              agencyFeatures[agencyId] = { routes: {}, stops: {} }
+            }
+            
+            const stopData = {
+              id: v.properties.stop_id,
+              stop_id: v.properties.stop_id,
+              stop_name: v.properties.stop_name,
+              location_type: v.properties.location_type || 0,
+              onestop_id: v.properties.onestop_id,
+              feed_onestop_id: v.properties.feed_onestop_id,
+              feed_version_sha1: v.properties.feed_version_sha1,
+              agencies: v.properties.agencies
+            }
+            
+            agencyFeatures[agencyId].stops[v.properties.stop_id] = stopData
+          }
+        } catch (err) {
+          console.warn('Error processing feature:', err, v)
         }
-        agencyFeatures[agencyId][routeId] = v.properties
       }
+
+      routeFeatures.forEach(processFeature)
+      stopFeatures.forEach(processFeature)
+      
       this.$emit('setAgencyFeatures', agencyFeatures)
     }
   }
diff --git a/src/runtime/components/pages/map.vue b/src/runtime/components/pages/map.vue
index 41f3dea7..e1160d38 100644
--- a/src/runtime/components/pages/map.vue
+++ b/src/runtime/components/pages/map.vue
@@ -16,6 +16,7 @@
         :auto-fit="false"
         :hide-tiles="activeTab === DIRECTIONS_TAB"
         map-class="tall"
+        :show-stop-types="showStopTypes"
         @set-zoom="mapSetZoom"
         @set-agency-features="routesSetAgencyFeatures"
         @map-click="mapClick"
@@ -24,42 +25,40 @@
 
       <div class="tl-map-panel tl-map-panel-tabs">
         <o-tabs v-model="activeTab" class="tl-tabs block" position="centered" type="boxed">
-          <o-tab-item :value="ROUTES_TAB" label="Routes">
-            <o-field addons>
+          <o-tab-item :value="ROUTES_TAB" label="Routes & Stops">
+            <o-field addons class="mt-2">
               <o-field expanded class="is-fullwidth">
-                <h6 class="title is-6 short-margin">
                   <template v-if="currentZoom < 8">
-                    Zoom in to select routes and to see stop points.
+                    <p class="content">Zoom in to select routes and to see stop points.</p>
                   </template>
-                  <template v-else>
-                    Select routes
+                  <template v-else-if="currentZoom >= 8 && currentZoom < 14 && Object.keys(agencyFeatures).length == 0">
+                    <p class="content">Use your cursor to highlight routes.</p>
+                    <p class="content">Click or tap for more information.</p>
+                    <p class="content">Zoom in to see stop points.</p>
                   </template>
-                </h6>
+                  <template v-else-if="currentZoom >= 14 && Object.keys(agencyFeatures).length == 0">
+                    <p class="content">Use your cursor to highlight routes and stops.</p>
+                    <p class="content">Click or tap for more information.</p>
+                  </template>
+                  <p class="content block is-small">
+                    <a href="https://www.transit.land/documentation/vector-tiles" target="_blank">Learn more about Transitland v2 Vector Tiles</a>
+                  </p>
               </o-field>
               <o-field>
-                <o-button variant="primary" @click="showRouteOptionsModal = true">
-                  Options
+                <o-button variant="outlined" @click="showMapOptionsModal = true" role="button">
+                  Map Options
                 </o-button>
               </o-field>
             </o-field>
 
-            <tl-map-route-list
+            <tl-map-route-stop-list
               v-if="activeTab === ROUTES_TAB"
               :agency-features="agencyFeatures"
               :is-component-modal-active="showRouteModal"
               @close="showRouteModal = false"
             />
-
-            <div v-if="Object.keys(agencyFeatures).length == 0">
-              <p v-if="currentZoom >= 8">
-                Use your cursor to highlight routes and see their names here.<br>
-                Click on a route for more details.
-              </p>
-              <p class="content block is-small pt-2">
-                <a href="https://www.transit.land/documentation/vector-tiles" target="_blank">Learn more about Transitland v2 Vector Tiles</a>
-              </p>
-            </div>
           </o-tab-item>
+
           <o-tab-item :value="DEPARTURE_TAB" label="Departures">
             <tl-login-gate>
               <tl-map-search
@@ -84,8 +83,9 @@
               </template>
             </tl-login-gate>
           </o-tab-item>
-          <tl-login-gate role="tl_user_enterprise">
-            <o-tab-item :value="DIRECTIONS_TAB" label="Directions">
+
+          <o-tab-item :value="DIRECTIONS_TAB" label="Directions">
+            <tl-login-gate role="tl_user_enterprise">
               <tl-msg-info>
                 This feature is in a limited beta. <br>
                 Please see the <a href="https://www.transit.land/documentation/routing-api/" target="_blank">Routing API docs</a><br>
@@ -102,40 +102,94 @@
                 @reset="directionsReset"
                 @set-depart-at="directionsSetDepartAt"
               />
-            </o-tab-item>
-            <template #loginText>
-              <div />
-            </template>
-            <template #roleText>
-              <div />
-            </template>
-          </tl-login-gate>
+              <template #loginText>
+                <div />
+              </template>
+              <template #roleText>
+                <div />
+              </template>
+            </tl-login-gate>
+          </o-tab-item>
         </o-tabs>
       </div>
-      <!-- Modal Options -->
-      <tl-modal v-model="showRouteOptionsModal" title="Route Options">
-        <div class="field">
-          <o-checkbox
-            v-model="showGeneratedGeometries"
-          >
-            Show stop-to-stop geometries
-          </o-checkbox>
-        </div>
-        <div class="field">
-          <o-checkbox
-            v-model="showProblematicGeometries"
-          >
-            Show problematic geometries
-          </o-checkbox>
-        </div>
-      </tl-modal>
+      <tl-map-options-modal
+        v-model="showMapOptionsModal"
+        v-model:show-stop-types="showStopTypes"
+        v-model:show-generated-geometries="showGeneratedGeometries"
+        v-model:show-problematic-geometries="showProblematicGeometries"
+        title="Map Options"
+      />
     </div>
   </client-only>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue'
-import { useRoute, useRuntimeConfig, navigateTo } from '#imports'
+import { ref, computed, watch, useRoute, useRuntimeConfig, navigateTo } from '#imports'
+
+// Interfaces
+interface MapMarker {
+  lng: number
+  lat: number
+  color: string
+  label: string
+  draggable: boolean
+  onDragEnd?: (event: any) => void
+}
+
+interface MapMoveEvent {
+  zoom: number
+  bbox: number[]
+}
+
+interface MapClickEvent {
+  lngLat: {
+    lng: number
+    lat: number
+  }
+}
+
+interface Agency {
+  agency_id: string
+  agency_name: string
+  operator: {
+    onestop_id: string
+    name: string
+  }
+}
+
+interface Stop {
+  stop_id: string
+  stop_name: string
+  location_type: number
+  onestop_id: string
+  feed_onestop_id: string
+  feed_version_sha1: string
+  agencies: string
+}
+
+interface Route {
+  route_id: string
+  route_short_name: string
+  route_long_name: string
+  route_color: string
+  route_type: number
+  agency_id: string
+  agency_name: string
+  onestop_id: string
+  generated: boolean
+  headway_secs: number
+  geometry_length: number
+  geometry_max_segment_length: number
+}
+
+interface AgencyFeatures {
+  routes?: Record<string, Route>
+  stops?: Record<string, Stop>
+}
+
+interface AgencyFeaturesMap {
+  [key: string]: AgencyFeatures
+}
 
 const config = useRuntimeConfig()
 
@@ -178,15 +232,22 @@ const initialZoom = ref(1.5)
 const initialCenter = ref([-119.49, 12.66])
 const currentZoom = ref(1.5)
 const showRouteModal = ref(false)
-const showRouteOptionsModal = ref(false)
-const agencyFeatures = ref({})
+const showMapOptionsModal = ref(false)
+const currentBbox = ref<number[] | null>(null)
 const showGeneratedGeometries = ref(true)
 const showProblematicGeometries = ref(false)
-const currentBbox = ref(null)
 
-// Generic map event handlers
+const agencyFeatures = ref<AgencyFeaturesMap>({})
 
-function mapMove (e: any) {
+const showStopTypes = ref({
+  0: true,  // Stop/Platform
+  1: true,  // Station
+  2: true,  // Entrance
+  3: false, // Node
+  4: false  // Boarding Area
+})
+
+function mapMove (e: MapMoveEvent) {
   currentZoom.value = e.zoom
   currentBbox.value = e.bbox
 }
@@ -195,7 +256,7 @@ function mapSetZoom (v: number) {
   currentZoom.value = v
 }
 
-function mapClick (e: any) {
+function mapClick(e: MapClickEvent) {
   // Convert to coordinates
   const coords = [e.lngLat.lng, e.lngLat.lat]
 
@@ -225,8 +286,50 @@ function mapClick (e: any) {
 // Routes
 /// ////////////////////
 
-function routesSetAgencyFeatures (e: any) {
-  agencyFeatures.value = e
+function routesSetAgencyFeatures (e: AgencyFeaturesMap) {
+  console.log('Input features:', JSON.stringify(e, null, 2))
+  const reorganizedFeatures: AgencyFeaturesMap = {}
+  
+  // First process routes
+  Object.entries(e).forEach(([agencyName, features]) => {
+    if (features.routes && Object.keys(features.routes).length > 0) {
+      // Initialize agency with empty routes and stops
+      reorganizedFeatures[agencyName] = { 
+        routes: features.routes,
+        stops: {}  // Initialize empty stops object
+      }
+    }
+  })
+
+  // Then process stops
+  Object.entries(e).forEach(([_, features]) => {
+    if (!features.stops) return
+
+    Object.entries(features.stops).forEach(([stopId, stop]) => {
+      let agencyName = 'Other (No Defined Agency)'
+      
+      try {
+        const agencies = JSON.parse(stop.agencies || '[]')
+        if (agencies && agencies.length > 0) {
+          agencyName = agencies[0].agency_name
+        }
+      } catch (err) {
+        console.warn('Failed to parse agencies for stop:', stopId, err)
+        return // Skip this stop if we can't determine the agency
+      }
+
+      // Initialize agency if it doesn't exist yet
+      if (!reorganizedFeatures[agencyName]) {
+        reorganizedFeatures[agencyName] = { routes: {}, stops: {} }
+      }
+
+      // Now TypeScript knows stops exists and is initialized
+      reorganizedFeatures[agencyName].stops[stopId] = stop
+    })
+  })
+
+  console.log('Reorganized features:', JSON.stringify(reorganizedFeatures, null, 2))
+  agencyFeatures.value = reorganizedFeatures
 }
 
 /// ////////////////////
@@ -348,13 +451,14 @@ const activeFeatures = computed(() => {
 watch(activeTab, () => {
   // Hacky; always set modal back to empty when switching tabs
   showRouteModal.value = false
-  showRouteOptionsModal.value = false
+  showMapOptionsModal.value = false
   // rerenderKey.value += 1
 })
 
 // TODO: Does not reset map when goes empty
-const markers = computed(() => {
-  const ret = []
+const markers = computed((): MapMarker[] => {
+  const ret: MapMarker[] = []
+
   if (activeTab.value === DEPARTURE_TAB) {
     if (departureCoords.value.length === 2) {
       ret.push({
diff --git a/src/runtime/components/pages/route.vue b/src/runtime/components/pages/route.vue
index 5a9d137b..3f734e8e 100644
--- a/src/runtime/components/pages/route.vue
+++ b/src/runtime/components/pages/route.vue
@@ -231,6 +231,7 @@
                 :overlay="false"
                 :include-stops="true"
                 :link-version="linkVersion"
+                :enable-hover="false"
                 :features="activeTab === tabNames.export ? features : []"
               />
               <template #loginText>
diff --git a/src/runtime/components/pages/stop.vue b/src/runtime/components/pages/stop.vue
index 8f507146..a02d9705 100644
--- a/src/runtime/components/pages/stop.vue
+++ b/src/runtime/components/pages/stop.vue
@@ -229,7 +229,16 @@
                 :include-stops="true"
                 :circle-radius="20"
                 :zoom="15"
-                :overlay="true"
+                :overlay="false"
+                :highlighted-stop-feature-id="entity.id"
+                :enable-hover="false"
+                :show-stop-types="{
+                  0: true,  // Stop/Platform
+                  1: true,  // Station
+                  2: true,  // Entrance
+                  3: true,  // Node
+                  4: true   // Boarding Area
+                }"
               />
               <template #loginText>
                 <o-notification icon="lock">
diff --git a/src/runtime/components/route-select.vue b/src/runtime/components/route-select.vue
deleted file mode 100644
index 7528a3fa..00000000
--- a/src/runtime/components/route-select.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-  <div>
-    <div v-for="(routes,agency) in agencyFeatures" :key="agency">
-      <h6 class="title is-6">
-        {{ agency }}
-      </h6>
-      <template v-if="isCollapsed">
-        <div>{{ Object.keys(routes).length }} routes</div>
-      </template>
-      <template v-else>
-        <div v-for="route in routes" :key="route.id">
-          <nuxt-link
-            v-if="link"
-            :to="$filters.makeRouteLink(route.onestop_id, route.feed_onestop_id, route.feed_version_sha1, route.route_id, route.id, linkVersion)"
-          >
-            <tl-route-icon
-              :key="route.id"
-              :route-type="route.route_type"
-              :route-short-name="route.route_short_name"
-              :route-long-name="route.route_long_name"
-            />
-          </nuxt-link>
-          <template v-else>
-            <tl-route-icon
-              :key="route.id"
-              :route-type="route.route_type"
-              :route-short-name="route.route_short_name"
-              :route-long-name="route.route_long_name"
-            />
-          </template>
-        </div>
-      </template>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    link: { type: Boolean, default: false },
-    maxAgencyRows: { type: Number, default () { return 5 } },
-    collapse: { type: Boolean },
-    linkVersion: { type: Boolean, default: false },
-    agencyFeatures: { type: Object, default () { return {} } }
-  },
-  computed: {
-    isCollapsed () {
-      return this.routeCount > this.maxAgencyRows && this.collapse
-    },
-    routeCount () {
-      let count = 0
-      for (const v of Object.values(this.agencyFeatures)) {
-        count = count + Object.keys(v).length
-      }
-      return count
-    }
-  }
-}
-</script>
diff --git a/src/runtime/components/route-stop-select.vue b/src/runtime/components/route-stop-select.vue
new file mode 100644
index 00000000..fe4ebc51
--- /dev/null
+++ b/src/runtime/components/route-stop-select.vue
@@ -0,0 +1,138 @@
+<template>
+  <div>
+    <div v-for="(features, agency) in agencyFeatures" :key="agency">
+      <h6 class="title is-6 mt-2">
+        {{ agency }}
+      </h6>
+      <template v-if="isCollapsed">
+        <div>
+          <span v-if="Object.keys(features.routes || {}).length">{{ Object.keys(features.routes || {}).length }} routes</span>
+          <span v-if="Object.keys(features.stops || {}).length">
+            <template v-if="Object.keys(features.routes || {}).length">, </template>
+            {{ Object.keys(features.stops || {}).length }} stops
+          </span>
+        </div>
+      </template>
+      <template v-else>
+        <!-- Routes -->
+        <div v-if="Object.keys(features.routes || {}).length > 0">
+          <div v-for="route in features.routes" :key="route.id" class="item-row">
+            <nuxt-link
+              v-if="link"
+              :to="$filters.makeRouteLink(route.onestop_id, route.feed_onestop_id, route.feed_version_sha1, route.route_id, route.id, linkVersion)"
+            >
+              <tl-route-icon
+                :key="route.id"
+                :route-type="route.route_type"
+                :route-short-name="route.route_short_name"
+                :route-long-name="route.route_long_name"
+              />
+            </nuxt-link>
+            <template v-else>
+              <tl-route-icon
+                :key="route.id"
+                :route-type="route.route_type"
+                :route-short-name="route.route_short_name"
+                :route-long-name="route.route_long_name"
+              />
+            </template>
+          </div>
+        </div>
+
+        <hr v-if="Object.keys(features.routes || {}).length > 0 && Object.keys(features.stops || {}).length > 0" />
+        <!-- Stops -->
+        <div v-if="Object.keys(features.stops || {}).length > 0">
+          <div v-for="stop in features.stops" :key="stop.id" class="item-row">
+            <nuxt-link
+              v-if="link"
+              :to="$filters.makeStopLink(stop.onestop_id, stop.feed_onestop_id, stop.feed_version_sha1, stop.stop_id, stop.id, linkVersion)"
+            >
+              <div class="stop-item">
+                <tl-stop-icon :location_type="stop.location_type" />
+                {{ stop.stop_name || 'Unnamed Stop' }}
+              </div>
+            </nuxt-link>
+            <template v-else>
+              <div class="stop-item">
+                <tl-stop-icon :location_type="stop.location_type" />
+                {{ stop.stop_name || 'Unnamed Stop' }}
+              </div>
+            </template>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  link?: boolean
+  maxAgencyRows?: number
+  collapse?: boolean
+  linkVersion?: boolean
+  showStops?: boolean
+  agencyFeatures: Record<string, {
+    routes?: Record<string, {
+      id: string | number
+      route_type: number
+      route_short_name: string
+      route_long_name: string
+      onestop_id: string
+      feed_onestop_id: string
+      feed_version_sha1: string
+      route_id: string
+    }>
+    stops?: Record<string, {
+      id: string | number
+      location_type: number
+      stop_name: string
+      onestop_id: string
+      feed_onestop_id: string
+      feed_version_sha1: string
+      stop_id: string
+    }>
+  }>
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  link: false,
+  maxAgencyRows: 5,
+  collapse: false,
+  linkVersion: false,
+  showStops: true,
+  agencyFeatures: () => ({})
+})
+
+const isCollapsed = computed(() => {
+  return totalFeatureCount.value > props.maxAgencyRows && props.collapse
+})
+
+const totalFeatureCount = computed(() => {
+      let count = 0
+  for (const agency of Object.values(props.agencyFeatures)) {
+        count += Object.keys(agency.routes || {}).length
+        count += Object.keys(agency.stops || {}).length
+      }
+      return count
+})
+</script>
+
+<style scoped>
+.item-row {
+  padding: 4px 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.subtitle {
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+}
+hr {
+  margin: 0.5rem 0;
+}
+</style>
diff --git a/src/runtime/components/stop-icon.vue b/src/runtime/components/stop-icon.vue
new file mode 100644
index 00000000..438c3add
--- /dev/null
+++ b/src/runtime/components/stop-icon.vue
@@ -0,0 +1,71 @@
+<template>
+  <span class="stop-icon" :class="iconClass">
+    <o-icon :icon="iconName" />
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { stopColors } from '../constants/stop-colors'
+
+interface Props {
+  location_type: number
+}
+
+const props = defineProps<Props>()
+
+const iconName = computed(() => {
+  switch (props.location_type) {
+    case 1:
+      return 'train-station' // Station
+    case 2:
+      return 'door-open' // Entrance/Exit
+    case 3:
+      return 'circle-medium' // Generic Node
+    case 4:
+      return 'circle-medium' // Boarding Area
+    case 0:
+    default:
+      return 'circle-medium' // Stop/Platform
+  }
+})
+
+const iconClass = computed(() => {
+  switch (props.location_type) {
+    case 1:
+      return 'stop-icon-station'
+    case 2:
+      return 'stop-icon-entrance' 
+    case 3:
+      return 'stop-icon-node'
+    case 4:
+      return 'stop-icon-boarding'
+    case 0:
+    default:
+      return 'stop-icon-stop'
+  }
+})
+</script>
+
+<style scoped>
+/* Use shared stop type colors */
+.stop-icon-station {
+  color: v-bind('stopColors.station');
+}
+
+.stop-icon-entrance {
+  color: v-bind('stopColors.entrance');
+}
+
+.stop-icon-node {
+  color: v-bind('stopColors.node');
+}
+
+.stop-icon-boarding {
+  color: v-bind('stopColors.boarding');
+}
+
+.stop-icon-stop {
+  color: v-bind('stopColors.stop');
+}
+</style> 
\ No newline at end of file
diff --git a/src/runtime/constants/stop-colors.ts b/src/runtime/constants/stop-colors.ts
new file mode 100644
index 00000000..95982f86
--- /dev/null
+++ b/src/runtime/constants/stop-colors.ts
@@ -0,0 +1,7 @@
+export const stopColors = {
+  stop: '#000000',      // Stop/Platform (type 0)
+  station: '#000000',   // Station (type 1)
+  entrance: '#808080',  // Entrance/Exit (type 2)
+  node: '#ff0000',      // Generic Node (type 3)
+  boarding: '#00ff00'   // Boarding Area (type 4)
+} 
\ No newline at end of file
diff --git a/src/runtime/types/filters.d.ts b/src/runtime/types/filters.d.ts
new file mode 100644
index 00000000..5109b5c7
--- /dev/null
+++ b/src/runtime/types/filters.d.ts
@@ -0,0 +1,22 @@
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $filters: {
+      makeRouteLink: (
+        onestop_id: string | null,
+        feed_onestop_id: string | null,
+        feed_version_sha1: string | null,
+        route_id: string | null,
+        id: number | null,
+        linkVersion: boolean
+      ) => string;
+      makeStopLink: (
+        onestop_id: string | null,
+        feed_onestop_id: string | null,
+        feed_version_sha1: string | null,
+        stop_id: string | null,
+        id: number | null,
+        linkVersion: boolean
+      ) => string;
+    }
+  }
+} 
\ No newline at end of file