diff --git a/app/index.js b/app/index.js
index 9b8edad..3150cf7 100644
--- a/app/index.js
+++ b/app/index.js
@@ -122,6 +122,7 @@ messaging.peerSocket.onmessage = evt => {
 };
 
 function populateResults(results) {
+  document.getElementById("spinner").state = "disabled";
   departureTimes = [];
   delays = [];
   //populate all elements
@@ -166,7 +167,13 @@ function populateResults(results) {
 }
 
 function launchLookup(from, to) {
-  //TODO: show spinner?
+  // show spinner and hide panes
+  document.getElementById("spinner").state = "enabled";
+  for (var i = 0; i < MAX_PANES; i++) {
+    let index = i+1;
+    let pane = document.getElementById("item"+index);
+    pane.style.display = "hidden";
+  }
   departureTimes = [];
   delays = [];
   document.getElementById("txt-from").text = from;
@@ -184,24 +191,36 @@ messaging.peerSocket.onclose = () => {
   console.log("App Socket Closed");
 };
 
-document.getElementById('txt-from').onclick = (a, evt) => {
+document.getElementById('click-space-from').onclick = (a, evt) => {
   fromStationId ++;
   fromStationId %= stations.length;
-  //Make sure origin and destination are not the same
+  //Make sure origin and destination are not the same, unless there are only 2 in the lest, then swith them around
   if (fromStationId === toStationId) {
-    fromStationId ++;
-    fromStationId %= stations.length;
+    if (stations.length === 2) {
+      let helper = fromStationId;
+      toStationId = fromStationId;
+      fromStationId = helper;
+    } else {
+      fromStationId ++;
+      fromStationId %= stations.length;
+    }
   }
   launchLookup(stations[fromStationId], stations[toStationId]);
 }
 
-document.getElementById('txt-to').onclick = (a, evt) => {
+document.getElementById('click-space-to').onclick = (a, evt) => {
   toStationId ++;
   toStationId %= stations.length;
-  //Make sure origin and destination are not the same
+  //Make sure origin and destination are not the same, unless there are only 2 in the lest, then swith them around
   if (fromStationId === toStationId) {
-    toStationId ++;
-    toStationId %= stations.length;
+    if (stations.length === 2) {
+      let helper = fromStationId;
+      toStationId = fromStationId;
+      fromStationId = helper;
+    } else {
+      toStationId ++;
+      toStationId %= stations.length;
+    }
   }
   launchLookup(stations[fromStationId], stations[toStationId]);
 }
\ No newline at end of file
diff --git a/resources/index.gui b/resources/index.gui
index d692e52..8f64541 100644
--- a/resources/index.gui
+++ b/resources/index.gui
@@ -212,11 +212,15 @@
   <text id="text-date-and-time">2020-12-25         00:00</text>
   <rect id="background-from" class="station"/>
   <rect id="background-to" class="station"/>
-  <text id="txt-from" pointer-events="visible">_loading</text>
-  <text id="txt-to" pointer-events="visible">_loading</text>
+  <text id="txt-from">_loading</text>
+  <rect id="click-space-from" pointer-events="visible"/>
+  <text id="txt-to">_loading</text>
+  <rect id="click-space-to" pointer-events="visible"/>
   <!-- these are the end dots for the line visualizing the number of transfers -->
   <use id="from-circle" href="#circle" x="6" y="15%-10"/>
   <line x1="16" y1="15%+10" x2="16" y2="15%+15" fill="white" stroke-width="4" />
   <use id="to-circle" href="#circle" x="6" y="100%-25"/>
   <line x1="16" y1="100%-25" x2="16" y2="100%-29" fill="white" stroke-width="4" />
+  <!--Loading spinner -->
+  <use id="spinner" href="#spinner" />
 </svg>
diff --git a/resources/styles.css b/resources/styles.css
index cbafae1..4b329b5 100644
--- a/resources/styles.css
+++ b/resources/styles.css
@@ -17,7 +17,7 @@
   display:none;
   width: 100%;
   height: 240;
-  fill: "black";
+  fill: fb-black;
   y: 30;
 }
 
@@ -28,7 +28,7 @@
   text-anchor: end;
   font-family: Seville-Bold;
   display: none;
-  fill: white;
+  fill: fb-white;
 }
 .platform-text {
   y: 150;
@@ -37,14 +37,14 @@
   text-anchor: end;
   font-family: Seville-Bold;
   text-length: 15;
-  fill: white;
+  fill: fb-white;
 }
 .duration-text {
   y: 30%;
   x: 10%;
   font-size: 21;
   text-length: 30;
-  fill: white;
+  fill: fb-white;
 }
 .countdown {
   y: 200;
@@ -54,33 +54,33 @@
   text-length: 32;
   text-anchor: end;
   x: 100%-20;
-  fill: white;
+  fill: fb-white;
 }
 .delay {
   font-size: 30;
   font-family: Seville-Bold;
   font-weight: regular;
   text-length: 32;
-  fill: red;
+  fill: fb-red;
   y: 230;
   x: 100%-20;
   text-anchor: end;
 }
 
 .station {
-  fill: red;
+  fill: "#AA0000";
   height: 10%;
   width: 100%;
 }
 #background-date-and-time {
   y: 0;
   height: 10%;
-  fill: black;
+  fill: fb-black;
 }
 #text-date-and-time {
   text-anchor: middle;
   x: 50%;
-  fill: white;
+  fill: fb-white;
   font-size: 24;
   y: 10%-8;
   
@@ -91,18 +91,40 @@
 #background-to {
   y: 90%;
 }
+
+ 
+#click-space-from {
+  x: 0;
+  y: 0;
+  width: 100%;
+  height: 25%;
+  opacity:0;
+}
 #txt-from {
   /*text-anchor: middle;*/
   x: 10%;
   y: 10%+25;/*+font-size + 5 margin */ 
   font-size: 30;
+  font-family: Seville-Bold;
+  fill: fb-white;
+
 }
+#click-space-to {
+  x: 0;
+  y: 75%;
+  width: 100%;
+  height: 25%;
+  opacity:0;
+}
+
 #txt-to {
   /*text-anchor: middle;
   x: 50%;*/
   x: 10%;
   y: 100%-5; 
   font-size: 30;
+  font-family: Seville-Bold;
+  fill: fb-white;
 }
 
 
@@ -110,3 +132,10 @@
   height: 235;
 }
 
+#spinner {
+  x: 30%-25;
+  y: 50%-25; 
+  width: 50; 
+  height: 50; 
+  fill: fb-white; }
+}
diff --git a/resources/widgets.gui b/resources/widgets.gui
index bc3a39e..cb51b09 100644
--- a/resources/widgets.gui
+++ b/resources/widgets.gui
@@ -5,5 +5,6 @@
     <link rel="import" href="/mnt/sysassets/widgets/baseview_widget.gui" />
     <link rel="import" href="/mnt/sysassets/widgets/panoramaview_widget.gui" />
     <link rel="import" href="/mnt/sysassets/widgets/pagination_dots.gui" />
+    <link rel="import" href="/mnt/sysassets/widgets/spinner_widget.gui" />
   </defs>
 </svg>