diff --git a/src/app/client/src/app/modules/learn/components/course-consumption/course-consumption-header/course-consumption-header.component.html b/src/app/client/src/app/modules/learn/components/course-consumption/course-consumption-header/course-consumption-header.component.html
index 8c3f033a5a9..0fb039bf29e 100644
--- a/src/app/client/src/app/modules/learn/components/course-consumption/course-consumption-header/course-consumption-header.component.html
+++ b/src/app/client/src/app/modules/learn/components/course-consumption/course-consumption-header/course-consumption-header.component.html
@@ -25,7 +25,7 @@
     </div>
     <div class="ml-8 textbook__heading">
       <!-- Textbook title -->
-      <h5 class="textbook__title sb-color-primary font-weight-bold mb-0" tabindex="0">{{courseHierarchy?.name}}
+      <h5 class="sb-color-primary font-weight-bold mb-0 sb__ellipsis" tabindex="0">{{courseHierarchy?.name}}
       </h5>
       <!-- Textbook Rating with share icon -->
       <div class="textbook__rating d-flex flex-ai-center">
diff --git a/src/app/client/src/app/modules/shared-feature/components/content-player/content-player.component.html b/src/app/client/src/app/modules/shared-feature/components/content-player/content-player.component.html
index 3fbd77edd90..ed22f2be461 100644
--- a/src/app/client/src/app/modules/shared-feature/components/content-player/content-player.component.html
+++ b/src/app/client/src/app/modules/shared-feature/components/content-player/content-player.component.html
@@ -3,45 +3,46 @@
 <!--CC-Player Content Header -->
   <div [ngClass]="layoutConfiguration ? 'sb-back-actionbar' : 'sb-bg-white cc-player__btn-back'" class="relative position mt-0" [ngClass]="{'header-block': isFullScreenView}">
     <div class="ui container py-0 px-0 d-flex flex-ai-center">
-
-      <button type="button" (click)="goBack()" [ngClass]="layoutConfiguration ? 'sb-btn-round' : ''" class="sb-btn sb-btn-normal sb-btn-link sb-btn-link-primary sb-left-icon-btn px-0"
-      tabindex="0" attr.aria-label="{{resourceService?.frmelmnts?.btn?.back}}">
-      <i class="icon-svg icon-svg--xxs icon-back mr-4"><svg class="icon icon-svg--primary">
-          <use xlink:href="assets/images/sprite.svg#arrow-long-left"></use>
-        </svg></i>
-     <span>{{resourceService?.frmelmnts?.btn?.back}}</span>
-    </button>
-
-      <div class="content-header__content w-100 ml-16" *ngIf="contentData">
-        <div class="d-flex flex-dc flex-basis-1 mr-32 min-w-0 content-header__content__title">
-          <div class="content-header__title font-weight-bold ellipsis text-left"  tabindex="0" role="heading" aria-level="2">{{contentData.name}}</div>
-          <div class="content-header__info mt-4">
-            <span class="fnormal" *ngIf="contentData?.subject">{{contentData?.subject}}</span>
-            <span class="dot-divider" *ngIf="contentData.gradeLevel"></span>
-            <span class="fnormal" *ngIf="contentData?.gradeLevel">{{contentData?.gradeLevel}}</span>
+      <div class="w-100 d-flex flex-ai-center flex-w-wrap flex-jc-space-between" *ngIf="contentData">
+        <div class="d-flex flex-ai-center">
+          <button type="button" (click)="goBack()" [ngClass]="layoutConfiguration ? 'sb-btn-round' : ''" class="sb-btn sb-btn-normal sb-btn-link sb-btn-link-primary sb-left-icon-btn px-0"
+          tabindex="0" attr.aria-label="{{resourceService?.frmelmnts?.btn?.back}}">
+          <i class="icon-svg icon-svg--xxs icon-back mr-4"><svg class="icon icon-svg--primary">
+              <use xlink:href="assets/images/sprite.svg#arrow-long-left"></use>
+            </svg></i>
+         <span>{{resourceService?.frmelmnts?.btn?.back}}</span>
+        </button>
+        <div class="textbook__details d-flex ml-16 flex-basis-1 flex-ai-center">
+          <div class="textbook__heading">
+            <h5 class="sb-color-primary font-weight-bold mb-0 sb__ellipsis" tabindex="0" role="heading" aria-level="2">{{contentData.name}}</h5>
+            <div class="content-header__info mt-4">
+              <span class="fnormal" *ngIf="contentData?.subject">{{contentData?.subject}}</span>
+              <span class="dot-divider" *ngIf="contentData.gradeLevel"></span>
+              <span class="fnormal" *ngIf="contentData?.gradeLevel">{{contentData?.gradeLevel}}</span>
+            </div>
           </div>
         </div>
+      </div>
+        <div class="d-flex flex-ai-end flex-w-wrap content-header__buttons ml-auto">
+          <a href="javascript:void(0)" tabindex="0" (click)="onShareLink();sharelinkModal=true;" class="sb-btn sb-btn-normal sb-btn-outline-primary mr-8">
+              <i class="blue share alternate icon"></i>
+              {{resourceService?.frmelmnts?.lbl?.share}}
+          </a>
 
-        <div class="d-flex flex-ai-end flex-w-wrap content-header__buttons">
-            <a href="javascript:void(0)" tabindex="0" (click)="onShareLink();sharelinkModal=true;" class="sb-btn sb-btn-normal sb-btn-outline-primary mr-8">
-                <i class="blue share alternate icon"></i>
-                {{resourceService?.frmelmnts?.lbl?.share}}
-            </a>
-
-            <button type="button" *ngIf='!isDesktopApp && permissionService?.permissionAvailable ' appPermission [permission]="['CONTENT_CREATOR', 'CONTENT_REVIEWER']"
-            tabindex="0" (click)="copyContent(contentData)" appTelemetryInteract [telemetryInteractEdata]="copyContentInteractEdata" [telemetryInteractObject]="objectInteract"
-           class="sb-btn sb-btn-normal sb-btn-outline-primary mr-8">
-            <i class="blue clone outline icon"></i> {{resourceService?.frmelmnts?.lbl?.copy}}
-            </button>
-
+          <button type="button" *ngIf='!isDesktopApp && permissionService?.permissionAvailable ' appPermission [permission]="['CONTENT_CREATOR', 'CONTENT_REVIEWER']"
+          tabindex="0" (click)="copyContent(contentData)" appTelemetryInteract [telemetryInteractEdata]="copyContentInteractEdata" [telemetryInteractObject]="objectInteract"
+         class="sb-btn sb-btn-normal sb-btn-outline-primary mr-8">
+          <i class="blue clone outline icon"></i> {{resourceService?.frmelmnts?.lbl?.copy}}
+          </button>
 
-            <div class="certified-course__btn" *ngIf="isGroupAdmin">
-                <button class="sb-btn sb-btn-secondary sb-btn-normal ml-auto textbook__addbtn" 
-                appAddToGroup [identifier]="contentData?.identifier" [pageId]="contentData?.primaryCategory.toLowerCase()">
-                {{resourceService?.frmelmnts?.lbl?.AddtoGroup}}</button>
-            </div>
-        </div>
 
+          <div class="certified-course__btn" *ngIf="isGroupAdmin">
+              <button class="sb-btn sb-btn-secondary sb-btn-normal ml-auto textbook__addbtn" 
+              appAddToGroup [identifier]="contentData?.identifier" [pageId]="contentData?.primaryCategory.toLowerCase()">
+              {{resourceService?.frmelmnts?.lbl?.AddtoGroup}}</button>
+          </div>
+      </div>
+        
       </div>
     </div>
   </div>