OpenPecha · 10kalden · May 4, 2026 · Mar 11, 2026 · Mar 12, 2026
diff --git a/src/course-home/outline-tab/SidebarCards.scss b/src/course-home/outline-tab/SidebarCards.scss
@@ -0,0 +1,44 @@
+.course-sidebar-card {
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  padding: 0 0 0.75rem;
+}
+
+.course-sidebar-card h2.h4 {
+  display: flex;
+  align-items: center;
+  margin: 0 0 0.5rem 0;
+  font-weight: var(--pgn-typography-font-weight-bold);
+  padding-left: 0.5rem;
+  border-left: 4px solid var(--pgn-color-primary-500);
+}
+
+.course-sidebar-card ul.list-unstyled {
+  margin: 0;
+}
+
+.course-sidebar-card ul.list-unstyled li a {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0;
+}
+
+.course-sidebar-card ul.list-unstyled li a:hover {
+  text-decoration: underline;
+}
+
+.course-sidebar-card ul.list-unstyled li a .svg-inline--fa {
+  margin-right: 0.5rem;
+  color: var(--pgn-color-primary-500);
+}
+
+/* Dates card tweaks */
+#courseHome-dates ol.list-unstyled {
+  margin: 0;
+}
+
+#courseHome-dates .date-summary-text {
+  line-height: 1.25rem;
+}
diff --git a/src/course-home/outline-tab/section-outline/SectionOutline.scss b/src/course-home/outline-tab/section-outline/SectionOutline.scss
@@ -0,0 +1,36 @@
+#courseHome-outline {
+  margin: 0; /* already list-unstyled, ensure tight rhythm */
+}
+
+#courseHome-outline > li > .pgn_collapsible {
+  border: 1px solid #d7d3d1;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+#courseHome-outline > li > .pgn_collapsible .collapsible-trigger {
+  padding: var(--pgn-spacing-spacer-3-5) var(--pgn-spacing-spacer-4) var(--pgn-spacing-spacer-3-5) var(--pgn-spacing-spacer-5);
+}
+
+#courseHome-outline > li > .pgn_collapsible .collapsible-trigger:hover {
+  background-color: var(--pgn-color-light-500);
+}
+
+#courseHome-outline > li > .pgn_collapsible .collapsible-icon {
+  margin-inline-start: initial;
+}
+
+/* Sequence list item separators inside a section */
+#courseHome-outline .border-top.border-light {
+  border-color: #eee !important;
+}
+
+/* Clamp long titles to two lines */
+.section-title,
+.sequence-title {
+  display: -webkit-box;
+  line-clamp: 2;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
diff --git a/src/course-home/outline-tab/section-outline/SectionTitle.tsx b/src/course-home/outline-tab/section-outline/SectionTitle.tsx
@@ -34,8 +34,8 @@ const SectionTitle: React.FC<Props> = ({ complete, hideFromTOC, title }) => {
           />
         )}
       </div>
-      <div className="col-7 ml-3 p-0 font-weight-bold text-dark-500">
-        <span className="align-middle col-6">{title}</span>
+      <div className="col ml-3 p-0 font-weight-bold text-dark-500">
+        <span className="align-middle section-title">{title}</span>
         <span className="sr-only">
           , {intl.formatMessage(complete ? messages.completedSection : messages.incompleteSection)}
         </span>

diff --git a/src/course-home/outline-tab/section-outline/SequenceTitle.tsx b/src/course-home/outline-tab/section-outline/SequenceTitle.tsx
@@ -25,8 +25,8 @@ const SequenceTitle: React.FC<Props> = ({
 }) => {
   const intl = useIntl();
   const courseId = useContextId();
-  const coursewareUrl = <Link to={`/course/${courseId}/${id}`}>{title}</Link>;
-  const displayTitle = showLink ? coursewareUrl : title;
+  const coursewareUrl = <Link className="sequence-title" to={`/course/${courseId}/${id}`}>{title}</Link>;
+  const displayTitle = showLink ? coursewareUrl : <span className="sequence-title">{title}</span>;
 
   return (
     <div className="row w-100 m-0">
@@ -50,7 +50,7 @@ const SequenceTitle: React.FC<Props> = ({
         )}
       </div>
       <div className="col-10 p-0 ml-3 text-break">
-        <span className="align-middle">{displayTitle}</span>
+        <span className="align-middle sequence-title">{displayTitle}</span>
         <span className="sr-only">
           , {intl.formatMessage(complete ? messages.completedAssignment : messages.incompleteAssignment)}
         </span>

diff --git a/src/course-home/outline-tab/widgets/CourseDates.jsx b/src/course-home/outline-tab/widgets/CourseDates.jsx
@@ -6,6 +6,7 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import DateSummary from '../DateSummary';
 import messages from '../messages';
 import { useModel } from '../../../generic/model-store';
+import '../SidebarCards.scss';
 
 const CourseDates = () => {
   const intl = useIntl();
@@ -27,7 +28,7 @@ const CourseDates = () => {
   }
 
   return (
-    <section className="mb-4">
+    <section className="mb-4 course-sidebar-card">
       <div id="courseHome-dates">
         <h2 className="h4">{intl.formatMessage(messages.dates)}</h2>
         <ol className="list-unstyled">

diff --git a/src/course-home/outline-tab/widgets/CourseHandouts.jsx b/src/course-home/outline-tab/widgets/CourseHandouts.jsx
@@ -6,6 +6,7 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import LmsHtmlFragment from '../LmsHtmlFragment';
 import messages from '../messages';
 import { useModel } from '../../../generic/model-store';
+import '../SidebarCards.scss';
 
 const CourseHandouts = () => {
   const intl = useIntl();
@@ -21,7 +22,7 @@ const CourseHandouts = () => {
   }
 
   return (
-    <section className="mb-4">
+    <section className="mb-4 course-sidebar-card">
       <h2 className="h4">{intl.formatMessage(messages.handouts)}</h2>
       <LmsHtmlFragment
         className="small"

diff --git a/src/course-home/outline-tab/widgets/CourseTools.jsx b/src/course-home/outline-tab/widgets/CourseTools.jsx
@@ -13,6 +13,7 @@ import { faNewspaper } from '@fortawesome/free-regular-svg-icons';
 import messages from '../messages';
 import { useModel } from '../../../generic/model-store';
 import LaunchCourseHomeTourButton from '../../../product-tours/newUserCourseHomeTour/LaunchCourseHomeTourButton';
+import '../SidebarCards.scss';
 
 const CourseTools = () => {
   const intl = useIntl();
@@ -63,7 +64,7 @@ const CourseTools = () => {
   };
 
   return (
-    <section className="mb-4">
+    <section className="mb-4 course-sidebar-card">
       <h2 className="h4">{intl.formatMessage(messages.tools)}</h2>
       <ul className="list-unstyled">
         {courseTools.map((courseTool) => (

diff --git a/src/course-tabs/CourseTabsNavigation.jsx b/src/course-tabs/CourseTabsNavigation.jsx
@@ -14,6 +14,14 @@ const CourseTabsNavigation = ({
   const intl = useIntl();
   const { show } = useCoursewareSearchState();
 
+  const getTabTitle = (slug, fallbackTitle) => {
+    const lookupSlug = slug === 'courseware' ? 'course' : slug;
+    if (messages[lookupSlug]) {
+      return intl.formatMessage(messages[lookupSlug]);
+    }
+    return fallbackTitle;
+  };
+
   return (
     <div id="courseTabsNavigation" className={classNames('course-tabs-navigation', className)}>
       <div className="container-xl">
@@ -29,7 +37,7 @@ const CourseTabsNavigation = ({
                   className={classNames('nav-item flex-shrink-0 nav-link', { active: slug === activeTabSlug })}
                   href={url}
                 >
-                  {title}
+                  {getTabTitle(slug, title)}
                 </a>
               ))}
             </Tabs>

diff --git a/src/course-tabs/messages.ts b/src/course-tabs/messages.ts
@@ -6,6 +6,46 @@ const messages = defineMessages({
     defaultMessage: 'Course Material',
     description: 'The accessible label for course tabs navigation',
   },
+  course: {
+    id: 'learn.course.tabs.course',
+    defaultMessage: 'Course',
+    description: 'Course tab title',
+  },
+  outline: {
+    id: 'learn.course.tabs.outline',
+    defaultMessage: 'Course',
+    description: 'Course outline tab title',
+  },
+  progress: {
+    id: 'learn.course.tabs.progress',
+    defaultMessage: 'Progress',
+    description: 'Progress tab title',
+  },
+  dates: {
+    id: 'learn.course.tabs.dates',
+    defaultMessage: 'Dates',
+    description: 'Dates tab title',
+  },
+  discussion: {
+    id: 'learn.course.tabs.discussion',
+    defaultMessage: 'Discussion',
+    description: 'Discussion tab title',
+  },
+  instructor: {
+    id: 'learn.course.tabs.instructor',
+    defaultMessage: 'Instructor',
+    description: 'Instructor tab title',
+  },
+  bookmarks: {
+    id: 'learn.course.tabs.bookmarks',
+    defaultMessage: 'Bookmarks',
+    description: 'Bookmarks tab title',
+  },
+  wiki: {
+    id: 'learn.course.tabs.wiki',
+    defaultMessage: 'Wiki',
+    description: 'Wiki tab title',
+  },
 });
 
 export default messages;
diff --git a/src/courseware/course/sequence/sequence-navigation/UnitNavigation.jsx b/src/courseware/course/sequence/sequence-navigation/UnitNavigation.jsx
@@ -90,25 +90,23 @@ const UnitNavigation = ({
       {isAtTop && (
         <div className="d-flex align-items-center justify-content-between w-100">
           {/* Course Outline Trigger on left side */}
-          <div className="mr-2">
+          <div className="mr-2 outline-trigger-mobile">
             <CourseOutlineTrigger isMobileView />
           </div>
           {/* Container for right-aligned triggers with spacing */}
-          <div className="d-flex align-items-center mr-2">
+          <div className="d-flex align-items-center">
             <SidebarTriggers className="mx-1" />
+            <div className="d-flex ml-2">
+              <div className="mr-2">{renderPreviousButton()}</div>
+              <div>{renderNextButton()}</div>
+            </div>
           </div>
         </div>
       )}
 
       {/* Navigation buttons area */}
-      <div className={classNames('d-flex align-items-center', { 'w-100 justify-content-between': !isAtTop })}>
-        {isAtTop ? (
-          /* Top navigation buttons aligned to the right */
-          <div className="d-flex ml-auto">
-            <div className="mr-2">{renderPreviousButton()}</div>
-            <div>{renderNextButton()}</div>
-          </div>
-        ) : (
+      <div className={classNames('d-flex align-items-center', { 'w-100 justify-content-between sequence-bottom-nav-buttons': !isAtTop })}>
+        {!isAtTop && (
           /* Bottom navigation buttons */
           <>
             {renderPreviousButton()}

diff --git a/src/courseware/course/sidebar/SidebarTriggers.jsx b/src/courseware/course/sidebar/SidebarTriggers.jsx
@@ -19,11 +19,10 @@ const SidebarTriggers = () => {
         const isActive = sidebarId === currentSidebar;
         return (
           <div
-            className={classNames({ 'ml-1': !isMobileView, 'mr-1': isMobileView, 'border-primary-700 sidebar-active': isActive })}
-            style={{ borderBottom: '2px solid', borderColor: isActive ? 'inherit' : 'transparent' }}
+            className={classNames({ 'ml-1': !isMobileView, 'mr-1': isMobileView, 'sidebar-active': isActive })}
             key={sidebarId}
           >
-            <Trigger onClick={() => toggleSidebar(sidebarId)} key={sidebarId} />
+            <Trigger onClick={() => toggleSidebar(sidebarId)} isActive={isActive} key={sidebarId} />
           </div>
         );
       })}

diff --git a/src/courseware/course/sidebar/common/SidebarBase.jsx b/src/courseware/course/sidebar/common/SidebarBase.jsx
@@ -36,8 +36,8 @@ const SidebarBase = ({
 
   return (
     <section
-      className={classNames('ml-0 border border-light-400 rounded-sm h-auto align-top zindex-0', {
-        'bg-white m-0 border-0 fixed-top vh-100 rounded-0': shouldDisplayFullScreen,
+      className={classNames('ml-0 border border-light-400 h-auto align-top zindex-0', {
+        'bg-white m-0 border-0 fixed-top vh-100': shouldDisplayFullScreen,
         'align-self-start': !shouldDisplayFullScreen,
         'd-none': currentSidebar !== sidebarId,
       }, className)}

diff --git a/src/courseware/course/sidebar/common/SidebarBase.scss b/src/courseware/course/sidebar/common/SidebarBase.scss
@@ -1,4 +1,19 @@
+@keyframes sidebarSlideInRight {
+    from {
+        opacity: 0;
+        transform: translateX(1.5rem);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
 #course-sidebar {
+    animation: sidebarSlideInRight 0.25s ease-out;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
     @media (--pgn-size-breakpoint-max-width-lg) {
         overflow-y: scroll;
         padding: 0 .625rem !important;

diff --git a/src/courseware/course/sidebar/common/TriggerBase.jsx b/src/courseware/course/sidebar/common/TriggerBase.jsx
@@ -1,17 +1,24 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import classNames from 'classnames';
 
 const SidebarTriggerBase = ({
   onClick,
   ariaLabel,
   children,
+  isActive,
 }) => (
   <button
-    className="border border-light-400 bg-transparent align-items-center align-content-center d-flex notification-btn rounded-lg"
+    className={classNames(
+      'border align-items-center align-content-center d-flex notification-btn rounded-lg',
+      {
+        'border-light-400 bg-transparent': !isActive,
+      },
+    )}
     type="button"
     onClick={onClick}
     aria-label={ariaLabel}
-    style={{ borderRadius: '0.5rem' }}
+    style={{ borderRadius: '0.5rem', backgroundColor: isActive ? '#093055' : undefined }}
   >
     <div className="icon-container d-flex position-relative align-items-center">
       {children}
@@ -23,6 +30,7 @@ SidebarTriggerBase.propTypes = {
   onClick: PropTypes.func.isRequired,
   ariaLabel: PropTypes.string.isRequired,
   children: PropTypes.element.isRequired,
+  isActive: PropTypes.bool,
 };
 
 export default SidebarTriggerBase;
diff --git a/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.jsx b/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.jsx
@@ -136,7 +136,7 @@ const CourseOutlineTray = () => {
     >
       <section className="outline-sidebar w-100">
         {sidebarHeading}
-        <ol id="outline-sidebar-outline" className="list-unstyled">
+        <ol id="outline-sidebar-outline" className={classNames('list-unstyled', { 'sequence-level': isDisplaySequenceLevel })}>
           {isDisplaySequenceLevel
             ? sequenceIds.map((sequenceId) => (
               <SidebarSequence