diff --git a/client/src/App.js b/client/src/App.js
index a316c69c..762049bd 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -2,15 +2,15 @@ import React from "react";
 import "./App.css"
 import MapComponent from './components/RealtimeMap';
 import Banner from "./components/Banner";
-import InputBox from "./components/inputBox";
+import RouteSearchDiv from "./components/RouteSearchDiv";
 
 function App() {
 
   return (
     <div className="App">
       <Banner />
-      <InputBox />
       <MapComponent />
+      <RouteSearchDiv />
     </div>
   );
 }
diff --git a/client/src/components/inputBox.js b/client/src/components/InputBox.js
similarity index 98%
rename from client/src/components/inputBox.js
rename to client/src/components/InputBox.js
index e8e7ec8a..d34f345e 100644
--- a/client/src/components/inputBox.js
+++ b/client/src/components/InputBox.js
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-function App() {
+function InputBox() {
     const [input1, setInput1] = useState('');
     const [input2, setInput2] = useState('');
     const [suggestedStations1, setSuggestedStations1] = useState([]);
@@ -111,4 +111,4 @@ function App() {
     );
 }
 
-export default App;
+export default InputBox;
diff --git a/client/src/components/RealtimeMap.js b/client/src/components/RealtimeMap.js
index 7c31184d..88077097 100644
--- a/client/src/components/RealtimeMap.js
+++ b/client/src/components/RealtimeMap.js
@@ -58,13 +58,22 @@ function RealtimeMap() {
     return (
       <Marker position={[item.position.lat, item.position.lon]} icon={icon}>
         <Popup>
-          <p>
-            Type: {capitalizeFirstLetter(item.type)} <br/>
-            Line: {item.line} | Direction: {item.direction} <br/>
-            <br/>
-            Absolute Utilization: {item.utilization.abs} <br/>
-            Relative Utilization: {item.utilization.rel}
-          </p>
+        <div className="popup-content">
+          <div className="popup-heading">
+            Type: {capitalizeFirstLetter(item.subType)} | Line: {item.line}
+          </div>
+          <div className="popup-info">
+            <div className="info-line">
+              <span className="info-label">Direction:</span> {item.direction}
+            </div>
+            <div className="info-line">
+              <span className="info-label">Absolute Utilization:</span> {item.utilization.abs !== null ? item.utilization.abs : "null"}
+            </div>
+            <div className="info-line">
+              <span className="info-label">Relative Utilization:</span> {item.utilization.rel !== null ? item.utilization.rel : "null"}
+            </div>
+          </div>
+        </div>
         </Popup>
       </Marker>
     );
@@ -75,11 +84,27 @@ function RealtimeMap() {
     return (
     <Circle center={[item.position.lat, item.position.lon]} radius={25} color={color}>
       <Popup>
-        <h1>{item.name}</h1>
-        <p>
-          Absolute Utilization: {item.utilization.abs} <br/>
-          Relative Utilization: {item.utilization.rel}
-        </p>
+      <div className="popup-content">
+        <div className="popup-heading">
+          {item.name}
+        </div>
+        <div className="popup-info">
+          <div className="info-line">
+            <span><span className="info-label">Transportation mode(s):</span> { 
+              Object.entries(item.products)
+                .filter(([key, value]) => value)
+                .map(([key]) => key)
+                .join(', ')
+            }</span>
+          </div>
+          <div className="info-line">
+            <span className="info-label">Absolute Utilization:</span> {item.utilization.abs !== null ? item.utilization.abs : 'null'}
+          </div>
+          <div className="info-line">
+            <span className="info-label">Relative Utilization:</span> {item.utilization.rel !== null ? item.utilization.rel : 'null'}
+          </div>
+        </div>
+      </div>
       </Popup>
     </Circle>
     );
diff --git a/client/src/components/RouteSearchDiv.js b/client/src/components/RouteSearchDiv.js
new file mode 100644
index 00000000..9f449a44
--- /dev/null
+++ b/client/src/components/RouteSearchDiv.js
@@ -0,0 +1,10 @@
+import React, { useState } from 'react';
+import InputBox from "./InputBox";
+
+function RouteSearchDiv() {
+  return (
+    <InputBox />
+  );
+}
+
+export default RouteSearchDiv;
diff --git a/client/src/components/VehicleIcons.js b/client/src/components/VehicleIcons.js
index e9d2070e..ba018d32 100644
--- a/client/src/components/VehicleIcons.js
+++ b/client/src/components/VehicleIcons.js
@@ -71,7 +71,7 @@ export function getColor(products) {
     return "red";
   } else if (products.tram) {
     return "blue";
-  } else if (products.bus) {
+  } else if (products.suburban) {
     return "yellow";
   } else if (products.ferry) {
     return "purple";
diff --git a/client/src/components/css/RealtimeMap.css b/client/src/components/css/RealtimeMap.css
index 858ebfa3..12f4b06d 100644
--- a/client/src/components/css/RealtimeMap.css
+++ b/client/src/components/css/RealtimeMap.css
@@ -6,3 +6,28 @@
   margin-right: auto;
 }
 
+.popup-content {
+  max-width: 600px; /* or a higher value to allow more content in one line */
+  overflow-x: auto; /* Allows horizontal scrolling */
+}
+
+.popup-heading {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.popup-info .info-line {
+  background-color: #f2f2f2;
+  border-radius: 8px;
+  padding: 5px;
+  margin-top: 5px;
+  white-space: pre-wrap; /* Allows text to wrap */
+}
+
+.info-label {
+  font-weight: bold; /* Makes the label text bold */
+}
+
+.popup-heading, .popup-info .info-line {
+  white-space: nowrap;
+}