diff --git a/src/discussions/learners/LearnersView.test.jsx b/src/discussions/learners/LearnersView.test.jsx
index 54813b4e..0093a055 100644
--- a/src/discussions/learners/LearnersView.test.jsx
+++ b/src/discussions/learners/LearnersView.test.jsx
@@ -118,7 +118,7 @@ describe('LearnersView', () => {
       renderComponent();
     });
 
-    expect(screen.queryByText('learner-1')).toBeInTheDocument();
+    expect(screen.queryByText('Learner-1')).toBeInTheDocument();
   });
 
   test('Most activity should be selected by default for the non-moderator role.', async () => {
@@ -176,7 +176,7 @@ describe('LearnersView', () => {
     const learners = await container.querySelectorAll('.discussion-post');
     const firstLearner = learners.item(0);
     const learnerAvatar = firstLearner.querySelector('[alt=learner-1]');
-    const learnerTitle = within(firstLearner).queryByText('learner-1');
+    const learnerTitle = within(firstLearner).queryByText('Learner-1');
     const stats = firstLearner.querySelectorAll('.icon-size');
 
     expect(learners).toHaveLength(3);
diff --git a/src/discussions/learners/learner/LearnerCard.jsx b/src/discussions/learners/learner/LearnerCard.jsx
index 6ce9cfbd..8554b385 100644
--- a/src/discussions/learners/learner/LearnerCard.jsx
+++ b/src/discussions/learners/learner/LearnerCard.jsx
@@ -1,5 +1,6 @@
 import React, { useContext } from 'react';
 
+import capitalize from 'lodash/capitalize';
 import { Link } from 'react-router-dom';
 
 import { Routes } from '../../../data/constants';
@@ -39,7 +40,7 @@ const LearnerCard = ({ learner }) => {
               <div
                 className="text-truncate font-weight-500 text-primary-500 font-style"
               >
-                {username}
+                {capitalize(username)}
               </div>
             </div>
             {threads !== null && (