diff --git a/selfdrive/assets/training/step10.png b/selfdrive/assets/training/step10.png
index 7c9c78130..94342a4b5 100644
Binary files a/selfdrive/assets/training/step10.png and b/selfdrive/assets/training/step10.png differ
diff --git a/selfdrive/assets/training_wide/step0.png b/selfdrive/assets/training_wide/step0.png
index 3235828d5..cff6d4f88 100644
Binary files a/selfdrive/assets/training_wide/step0.png and b/selfdrive/assets/training_wide/step0.png differ
diff --git a/selfdrive/assets/training_wide/step10.png b/selfdrive/assets/training_wide/step10.png
index 5dee06a96..26680b902 100644
Binary files a/selfdrive/assets/training_wide/step10.png and b/selfdrive/assets/training_wide/step10.png differ
diff --git a/selfdrive/assets/training_wide/step9.png b/selfdrive/assets/training_wide/step9.png
index c97398295..c595f602a 100644
Binary files a/selfdrive/assets/training_wide/step9.png and b/selfdrive/assets/training_wide/step9.png differ
diff --git a/selfdrive/ui/qt/offroad/onboarding.cc b/selfdrive/ui/qt/offroad/onboarding.cc
index 8e3318ba3..6e7d57452 100644
--- a/selfdrive/ui/qt/offroad/onboarding.cc
+++ b/selfdrive/ui/qt/offroad/onboarding.cc
@@ -34,12 +34,18 @@ void TrainingGuide::paintEvent(QPaintEvent *event) {
   QPainter painter(this);
 
   QRect bg(0, 0, painter.device()->width(), painter.device()->height());
-  QBrush bgBrush("#000000");
-  painter.fillRect(bg, bgBrush);
+  painter.fillRect(bg, QColor("#000000"));
 
   QRect rect(image.rect());
   rect.moveCenter(bg.center());
   painter.drawImage(rect.topLeft(), image);
+
+  // progress bar
+  if (currentIndex > 0 && currentIndex < (boundingRect.size() - 2)) {
+    const int h = 20;
+    const int w = (currentIndex / (float)(boundingRect.size() - 2)) * width();
+    painter.fillRect(QRect(0, height() - h, w, h), QColor("#465BEA"));
+  }
 }
 
 void TermsPage::showEvent(QShowEvent *event) {