diff --git a/resources/layouts/layouts.xml b/resources/layouts/layouts.xml
index f7ff57b..1d4f17b 100755
--- a/resources/layouts/layouts.xml
+++ b/resources/layouts/layouts.xml
@@ -2,6 +2,13 @@
     <!-- A generic, centered layout. -->
     <layout id="MainLayout">
         <drawable class="Background"/>
+        <drawable class="BgOverlay" id="BgOverlay">
+            <param name="x">132</param>
+            <param name="y">62</param>
+            <param name="w">300</param>
+            <param name="h">260</param>
+            <param name="d">-30</param>
+        </drawable>
         <drawable class="HeartRate" id="HeartRate">
             <param name="y">64</param>
         </drawable>
@@ -24,7 +31,8 @@
         <label id="apaceLabel" x="81%" y="200" color="0x004488" justification="Graphics.TEXT_JUSTIFY_LEFT" font="Graphics.FONT_XTINY" text="apace"/>
         <label id="distance" x="80%" y="224" color="Graphics.COLOR_WHITE" justification="Graphics.TEXT_JUSTIFY_RIGHT" font="Graphics.FONT_NUMBER_MEDIUM" />
         <label id="distanceLabel" x="81%" y="272" color="0x004488" justification="Graphics.TEXT_JUSTIFY_LEFT" font="Graphics.FONT_TINY" text="km"/>
-        <!-- TODO distance, pace, avg pace, elevation, egain, calories -->
+
+        <!-- TODO elevation, egain, power -->
     </layout>
 
     <!-- Layouts used for the for the four quadrants. -->
diff --git a/source/RepaFieldBackground.mc b/source/RepaFieldBackground.mc
index 3b4e3a1..975bca5 100644
--- a/source/RepaFieldBackground.mc
+++ b/source/RepaFieldBackground.mc
@@ -21,19 +21,8 @@ class Background extends WatchUi.Drawable {
     }
 
     function draw(dc as Dc) as Void {
-        var x = 132;
-        var y = 62;
-        var width = 300;
-        var height = 260;
-        var diff = -20;
         dc.setColor(0x002244, mColor);
         dc.clear();
-        dc.fillPolygon([[x+width, y], [x, y], [x-diff, y+height], [x+width, y+height]]);
-        dc.setColor(0x003366, mColor);
-        dc.setPenWidth(1);
-        dc.drawLine(x+width, y, x, y);
-        dc.drawLine(x, y, x-diff, y+height);
-        dc.drawLine(x-diff, y+height, x+width, y+height);
     }
 
 }
diff --git a/source/RepaFieldBgOverlay.mc b/source/RepaFieldBgOverlay.mc
new file mode 100644
index 0000000..08b8fc7
--- /dev/null
+++ b/source/RepaFieldBgOverlay.mc
@@ -0,0 +1,48 @@
+import Toybox.Application;
+import Toybox.Graphics;
+import Toybox.WatchUi;
+import Toybox.Lang;
+
+class BgOverlay extends WatchUi.Drawable {
+
+    hidden var x as Number;
+    hidden var y as Number;
+    hidden var w as Number;
+    hidden var h as Number;
+    hidden var d as Number;
+
+    function initialize(params as Dictionary) {
+        Drawable.initialize(params);
+        x = 132;
+        if (params.hasKey(:x)) {
+            x = params.get(:x) as Number;
+        }
+        y = 62;
+        if (params.hasKey(:y)) {
+            y = params.get(:y) as Number;
+        }
+        w = 300;
+        if (params.hasKey(:w)) {
+            w = params.get(:w) as Number;
+        }
+        h = 260;
+        if (params.hasKey(:h)) {
+            h = params.get(:h) as Number;
+        }
+        d = -20;
+        if (params.hasKey(:d)) {
+            d = params.get(:d) as Number;
+        }
+    }
+
+    function draw(dc as Dc) as Void {
+        dc.setColor(0x002244, Graphics.COLOR_TRANSPARENT);
+        dc.fillPolygon([[x+w, y], [x, y], [x-d, y+h], [x+w, y+h]]);
+        dc.setColor(0x003366, Graphics.COLOR_TRANSPARENT);
+        dc.setPenWidth(1);
+        dc.drawLine(x+w, y, x, y);
+        dc.drawLine(x, y, x-d, y+h);
+        dc.drawLine(x-d, y+h, x+w, y+h);
+    }
+
+}
diff --git a/source/RepaFieldView.mc b/source/RepaFieldView.mc
index 1a1eeba..ba558c4 100644
--- a/source/RepaFieldView.mc
+++ b/source/RepaFieldView.mc
@@ -16,6 +16,8 @@ class RepaFieldView extends WatchUi.DataField {
     hidden var timer as Numeric;
     hidden var timerState as Number;
     hidden var offCourse as Float;
+    hidden var speed as Float;
+    hidden var aspeed as Float;
 
     function initialize() {
         DataField.initialize();
@@ -28,6 +30,8 @@ class RepaFieldView extends WatchUi.DataField {
         timer = 0;
         timerState = Activity.TIMER_STATE_OFF;
         offCourse = 0.0f;
+        speed = 0.0f;
+        aspeed = 0.0f;
     }
 
     function calculateHRColor(hr as Numeric) as Numeric {
@@ -126,6 +130,16 @@ class RepaFieldView extends WatchUi.DataField {
         } else {
             offCourse = 0.0f;
         }
+        if (info.currentSpeed != null) {
+            speed = info.currentSpeed as Float;
+        } else {
+            speed = 0.0f;
+        }
+        if (info.averageSpeed != null) {
+            aspeed = info.averageSpeed as Float;
+        } else {
+            aspeed = 0.0f;
+        }
     }
 
     // Display the value you computed here. This will be called
@@ -191,6 +205,31 @@ class RepaFieldView extends WatchUi.DataField {
             }
         }
 
+        // pace
+        var paceField = View.findDrawableById("pace") as Text;
+        if (paceField != null) {
+            if (speed != 0) {
+                var pace = 1000 / 60 / speed; // mps -> min/km
+                var pmin = pace.toNumber();
+                var psec = (pace - pmin) * 60;
+                paceField.setText(pmin.format("%2d") + ":" + psec.format("%02d"));
+            } else {
+                paceField.setText("--:--");
+            }
+        }
+        var apaceField = View.findDrawableById("apace") as Text;
+        if (apaceField != null) {
+            if (aspeed != 0) {
+                var apace = 1000 / 60 / aspeed; // mps -> min/km
+                var apmin = apace.toNumber();
+                var apsec = (apace - apmin) * 60;
+                apaceField.setText(apmin.format("%2d") + ":" + apsec.format("%02d"));
+            } else {
+                apaceField.setText("--:--");
+            }
+        }
+
+
         // Set the foreground color and value
         var value = View.findDrawableById("value") as Text;
         if (value != null) {