diff --git a/public/static/images/icons/progress-avatar.png b/public/static/images/icons/progress-avatar.png
new file mode 100644
index 0000000000..64d7777cc2
Binary files /dev/null and b/public/static/images/icons/progress-avatar.png differ
diff --git a/public/static/images/icons/progress-bar-bg.png b/public/static/images/icons/progress-bar-bg.png
new file mode 100644
index 0000000000..20d96c9a97
Binary files /dev/null and b/public/static/images/icons/progress-bar-bg.png differ
diff --git a/public/static/images/icons/progress-bar-fill.png b/public/static/images/icons/progress-bar-fill.png
new file mode 100644
index 0000000000..5b76929f81
Binary files /dev/null and b/public/static/images/icons/progress-bar-fill.png differ
diff --git a/src/components/problem-layout/Problem.js b/src/components/problem-layout/Problem.js
index 7ef80d2ffd..0da56fdc9a 100644
--- a/src/components/problem-layout/Problem.js
+++ b/src/components/problem-layout/Problem.js
@@ -336,19 +336,19 @@ class Problem extends React.Component {
         }
     };
 
-    clickNextProblem = async () => {
-        scroll.scrollToTop({ duration: 900, smooth: true });
+  clickNextProblem = async () => {
+      scroll.scrollToTop({ duration: 900, smooth: true });
 
-        await this.props.problemComplete(this.context);
+      await this.props.problemComplete(this.context);
 
-        this.setState({
-            stepStates: {},
-            firstAttempts: {},
-            problemFinished: false,
-            feedback: "",
-            feedbackSubmitted: false,
-        });
-    };
+      this.setState({
+          stepStates: {},
+          firstAttempts: {},
+          problemFinished: false,
+          feedback: "",
+          feedbackSubmitted: false,
+      });
+  };
 
     submitFeedback = () => {
         const { problem } = this.props;
@@ -429,6 +429,9 @@ class Problem extends React.Component {
 
     render() {
         const { translate } = this.props;
+        const { progressInfo } = this.props;
+        const total = progressInfo?.total || 0;
+        const completed = progressInfo?.completed || 0;
         const { classes, problem, seed } = this.props;
         const [oerLink, oerName, licenseLink, licenseName] =
             this.getOerLicense();
diff --git a/src/content-sources/oatutor b/src/content-sources/oatutor
index 270ce04096..74e419d0ac 160000
--- a/src/content-sources/oatutor
+++ b/src/content-sources/oatutor
@@ -1 +1 @@
-Subproject commit 270ce04096a39b3412a8e08bc626bdce99c0f495
+Subproject commit 74e419d0acf27b025feb7a83e2995361f8f3b10a
diff --git a/src/platform-logic/Platform.js b/src/platform-logic/Platform.js
index 35777e3bee..0950346830 100644
--- a/src/platform-logic/Platform.js
+++ b/src/platform-logic/Platform.js
@@ -33,7 +33,7 @@ class Platform extends React.Component {
 
     constructor(props, context) {
         super(props);
-        
+
         this.problemIndex = {
             problems: problemPool,
         };
@@ -78,7 +78,7 @@ class Platform extends React.Component {
     componentDidMount() {
         this._isMounted = true;
         if (this.props.lessonID != null) {
-            console.log("calling selectLesson from componentDidMount...") 
+            console.log("calling selectLesson from componentDidMount...")
             const lesson = findLessonById(this.props.lessonID)
             console.debug("lesson: ", lesson)
             this.selectLesson(lesson).then(
@@ -112,7 +112,7 @@ class Platform extends React.Component {
         this.onComponentUpdate(prevProps, prevState, snapshot);
     }
 
-    
+
     onComponentUpdate(prevProps, prevState, snapshot) {
         if (
             Boolean(this.state.currProblem?.id) &&
@@ -124,7 +124,7 @@ class Platform extends React.Component {
             this.context.problemID = "n/a";
         }
     }
-    
+
     async selectLesson(lesson, updateServer=true) {
         const context = this.context;
         console.debug("lesson: ", context)
@@ -230,6 +230,10 @@ class Platform extends React.Component {
         }
 
         this.lesson = lesson;
+        const lessonName = String(lesson.name.replace("Lesson ", "") + " " + lesson.topics);
+        this.lessonProblems = this.problemIndex.problems
+          .filter(({ lesson: probLesson }) => String(probLesson).includes(lessonName))
+          .sort((a, b) => a.id.localeCompare(b.id));
 
         const loadLessonProgress = async () => {
             const { getByKey } = this.context.browserStorage;
@@ -498,8 +502,88 @@ class Platform extends React.Component {
                         componentName={"Problem"}
                         descriptor={"problem"}
                     >
+                    {this.lessonProblems?.length > 0 && (() => {
+                      const progressPercent = this.completedProbs.size / this.lessonProblems.length;
+                      const mascotLeft = Math.max(0, progressPercent * 888 - 44);
+
+                      return (
+                        <div style={{ display: "flex", justifyContent: "center", margin: "24px 0" }}>
+                          <div
+                            style={{
+                              display: "flex",
+                              flexDirection: "row",
+                              alignItems: "center",
+                              width: "1112px",
+                              padding: "16px 0",
+                              gap: "12px",
+                            }}
+                          >
+                            <div
+                              style={{
+                                fontSize: "16px",
+                                fontWeight: 600,
+                                lineHeight: "24px",
+                                width: "156px",
+                              }}
+                            >
+                              Question {this.completedProbs.size}/{this.lessonProblems.length}
+                            </div>
+                            <div style={{ position: "relative", width: "888px", height: "48px" }}>
+                              <img
+                                src="/place-holder/static/images/icons/progress-bar-bg.png"
+                                alt="Progress bar background"
+                                style={{
+                                  position: "absolute",
+                                  top: 0,
+                                  left: 0,
+                                  width: "888px",
+                                  height: "48px",
+                                  zIndex: 1,
+                                }}
+                              />
+                              <div
+                                style={{
+                                  position: "absolute",
+                                  top: "3px",
+                                  left: "3px",
+                                  width: `${progressPercent * 888}px`,
+                                  height: "42px",
+                                  overflow: "hidden",
+                                  borderRadius: "99px",
+                                  zIndex: 2,
+                                }}
+                              >
+                                <img
+                                  src="/place-holder/static/images/icons/progress-bar-fill.png"
+                                  alt="Progress bar fill"
+                                  style={{
+                                    width: "352px",
+                                    height: "42px",
+                                    objectFit: "cover",
+                                  }}
+                                />
+                                <img
+                                  src="/place-holder/static/images/icons/progress-avatar.png"
+                                  alt="Progress mascot"
+                                  style={{
+                                    position: "absolute",
+                                    top: "1px",
+                                    left: `${mascotLeft}px`,
+                                    width: "40px",
+                                    height: "40px",
+                                    transform: "rotate(180deg)",
+                                    transition: "left 0.3s ease-in-out",
+                                    zIndex: 3,
+                                  }}
+                                />
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      );
+                    })()}
                         <ProblemWrapper
-                            problem={this.state.currProblem}
+                          problem={this.state.currProblem}
                             problemComplete={this.problemComplete}
                             lesson={this.lesson}
                             seed={this.state.seed}