diff --git a/client/src/templates/Challenges/components/Challenge-Title.js b/client/src/templates/Challenges/components/Challenge-Title.js
index 16d1ae8b3a..f71f12cac2 100644
--- a/client/src/templates/Challenges/components/Challenge-Title.js
+++ b/client/src/templates/Challenges/components/Challenge-Title.js
@@ -16,15 +16,22 @@ const propTypes = {
 function ChallengeTitle({ block, children, isCompleted, superBlock }) {
   return (
     <div className='challenge-title-wrap'>
-      <Link to={`/learn/${dasherize(superBlock)}`}>{superBlock}</Link>
-      {' >> '}
-      <Link
-        state={{ breadcrumbBlockClick: block }}
-        to={`/learn/${dasherize(superBlock)}`}
-      >
-        {block}
-      </Link>
-      {' >> '}
+      <div className='challenge-title-breadcrumbs'>
+        <Link
+          className='breadcrumb-left'
+          to={`/learn/${dasherize(superBlock)}`}
+        >
+          <span className='ellipsis'>{superBlock}</span>
+        </Link>
+        <div className='breadcrumb-center' />
+        <Link
+          className='breadcrumb-right'
+          state={{ breadcrumbBlockClick: block }}
+          to={`/learn/${dasherize(superBlock)}`}
+        >
+          {block}
+        </Link>
+      </div>
       <b>{children}</b>
       {isCompleted ? (
         <GreenPass
diff --git a/client/src/templates/Challenges/components/__snapshots__/ChallengeTitle.test.js.snap b/client/src/templates/Challenges/components/__snapshots__/ChallengeTitle.test.js.snap
index e9e63f5679..531de8e5a0 100644
--- a/client/src/templates/Challenges/components/__snapshots__/ChallengeTitle.test.js.snap
+++ b/client/src/templates/Challenges/components/__snapshots__/ChallengeTitle.test.js.snap
@@ -4,19 +4,30 @@ exports[`<ChallengeTitle/> renders correctly 1`] = `
 <div
   className="challenge-title-wrap"
 >
-  <a
-    href="/learn/undefined"
-  />
-   &gt;&gt; 
-  <a
-    href="/learn/undefined"
-    state={
-      Object {
-        "breadcrumbBlockClick": undefined,
+  <div
+    className="challenge-title-breadcrumbs"
+  >
+    <a
+      className="breadcrumb-left"
+      href="/learn/undefined"
+    >
+      <span
+        className="ellipsis"
+      />
+    </a>
+    <div
+      className="breadcrumb-center"
+    />
+    <a
+      className="breadcrumb-right"
+      href="/learn/undefined"
+      state={
+        Object {
+          "breadcrumbBlockClick": undefined,
+        }
       }
-    }
-  />
-   &gt;&gt; 
+    />
+  </div>
   <b>
     title text
   </b>
diff --git a/client/src/templates/Challenges/components/challenge-title.css b/client/src/templates/Challenges/components/challenge-title.css
index 9b1a8d335a..9bbbff9248 100644
--- a/client/src/templates/Challenges/components/challenge-title.css
+++ b/client/src/templates/Challenges/components/challenge-title.css
@@ -1,4 +1,68 @@
 .challenge-title-wrap {
-  padding: 10px 15px;
   text-align: center;
 }
+
+.challenge-title-breadcrumbs {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  font-size: 16px;
+  margin-left: -10px;
+  margin-right: -10px;
+  border-bottom: 2px solid var(--secondary-color);
+  height: 25px;
+}
+
+.breadcrumb-left {
+  text-decoration: none;
+  min-width: 25px;
+  display: inline-block;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-height: 25px;
+  word-wrap: none;
+  white-space: nowrap;
+  flex-grow: 1;
+  flex-shrink: 2;
+  background-color: var(--quaternary-background);
+}
+
+.breadcrumb-center {
+  width: 0;
+  height: 0;
+  border-top: calc(23px / 2) solid transparent;
+  border-bottom: calc(23px / 2) solid transparent;
+  border-left: calc(23px / 2) solid var(--quaternary-background);
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+.breadcrumb-right {
+  text-decoration: none;
+  display: inline-block;
+  align-items: center;
+  justify-content: center;
+  max-height: 25px;
+  min-width: 50px;
+  flex-grow: 2;
+  flex-shrink: 1;
+  word-wrap: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-height: 20px;
+  white-space: nowrap;
+}
+
+.breadcrumb-rule {
+  margin: 5px -10px;
+}
+
+.breadcrumb-left:hover {
+  background-color: var(--quaternary-background);
+}
+
+.breadcrumb-right:hover {
+  background-color: rgba(0, 0, 0, 0);
+}