2 files changed, 58 insertions, 2 deletions
diff --git a/src/components/StopItem.css b/src/components/StopItem.css
new file mode 100644
index 0000000..9feb2d1
--- /dev/null
+++ b/src/components/StopItem.css
@@ -0,0 +1,54 @@
+/* Stop Item Styling */
+
+.stop-notes {
+  font-size: 0.85rem;
+  font-style: italic;
+  color: #666;
+  margin: 2px 0;
+}
+
+.stop-amenities {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-top: 4px;
+}
+
+.amenity-tag {
+  font-size: 0.75rem;
+  background-color: #e8f4f8;
+  color: #0078d4;
+  border-radius: 4px;
+  padding: 2px 6px;
+  display: inline-block;
+}
+
+/* Different colors for different amenity types */
+.amenity-tag[data-amenity="shelter"] {
+  background-color: #e3f1df;
+  color: #107c41;
+}
+
+.amenity-tag[data-amenity="bench"] {
+  background-color: #f0e8fc;
+  color: #5c2e91;
+}
+
+.amenity-tag[data-amenity="real-time display"] {
+  background-color: #fff4ce;
+  color: #986f0b;
+}
+
+/* When there are alternate names available, show an indicator */
+.has-alternate-names {
+  position: relative;
+}
+
+.has-alternate-names::after {
+  content: "⋯";
+  position: absolute;
+  right: -15px;
+  top: 0;
+  color: #0078d4;
+  font-weight: bold;
+}
+\ No newline at end of file
diff --git a/src/components/StopItem.tsx b/src/components/StopItem.tsx
index 6b48899..cf9ccfc 100644
--- a/src/components/StopItem.tsx
+++ b/src/components/StopItem.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router';
-import { Stop } from '../data/StopDataProvider';
+import StopDataProvider, { Stop } from '../data/StopDataProvider';
 import LineIcon from './LineIcon';
 
 interface StopItemProps {
@@ -8,13 +8,15 @@ interface StopItemProps {
 }
 
 const StopItem: React.FC<StopItemProps> = ({ stop }) => {
+
   return (
     <li className="list-item">
       <Link className="list-item-link" to={`/estimates/${stop.stopId}`}>
-        ({stop.stopId}) {stop.name}
+      {stop.favourite && <span className="favourite-icon">★</span>} ({stop.stopId}) {StopDataProvider.getDisplayName(stop)}
         <div className="line-icons">
           {stop.lines?.map(line => <LineIcon key={line} line={line} />)}
         </div>
+        
       </Link>
     </li>
   );