diff --git a/src/course-home/outline-tab/SidebarCards.scss b/src/course-home/outline-tab/SidebarCards.scss
new file mode 100644
index 0000000000..0fbe19a3e8
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..d954f37685
--- /dev/null
+++ 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
index 69c4ddfd98..766c6b309d 100644
--- 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
index ec035dfa28..69e1062f1e 100644
--- 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
index fa28a6433a..5b6e93e998 100644
--- 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
index 8c609531b9..19c77745ba 100644
--- 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
index a3a7e13944..cdf3ffd7f4 100644
--- 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
index 9c2a12ef8c..4c54c429ea 100644
--- 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
index e1230ab500..3a48eb7893 100644
--- 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
index 3cddd84c6a..f81b0dca75 100644
--- 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
index 11c730fd4c..89da09ca09 100644
--- 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
index 87775ea1c3..7102f18428 100644
--- 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
index 60cb7942f0..936daaba4e 100644
--- 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
index 2c0af873bf..f4618b8a5c 100644
--- 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
index 264f930f0f..7d03f94241 100644
--- 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
diff --git a/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.scss b/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.scss
index a574f02736..594d3500aa 100644
--- a/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.scss
+++ b/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.scss
@@ -1,8 +1,29 @@
+@keyframes outlineSidebarSlideIn {
+    from {
+        opacity: 0;
+        transform: translateX(-1.5rem);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
 .outline-sidebar-wrapper {
     width: 32.125rem;
     max-width: 100%;
     position: relative;
     flex-shrink: 0;
+    animation: outlineSidebarSlideIn 0.25s ease-out;
+
+    &.fixed-top {
+        position: fixed;
+    }
+}
+
+.outline-sidebar {
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
 .outline-sidebar {
@@ -13,7 +34,15 @@
 }
 
 .outline-sidebar-heading-wrapper {
-    border: 1px solid #d7d3d1;
+    &.collapsed {
+        border: none;
+    }
+
+    &:not(.collapsed) {
+        border: 1px solid #d7d3d1;
+        border-top-left-radius: 8px;
+        border-top-right-radius: 8px;
+    }
 
     &.sticky {
         position: sticky;
@@ -30,6 +59,8 @@
 .course-sidebar-section {
     background: var(--pgn-color-white);
     border: 1px solid #d7d3d1;
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
 
     button {
         line-height: 1.75rem;
@@ -43,14 +74,56 @@
 
 .outline-sidebar-toggle-btn {
     font-size: 1.5rem;
+    will-change: transform, box-shadow;
 
     .collapsed & {
         transform: scale(-1, 1);
+
+        &:hover {
+            transform: scale(-1, 1) translateY(-1px);
+        }
+
+        &:active {
+            transform: scale(-1, 1) translateY(0);
+        }
+    }
+
+    &:hover {
+        background-color: #E8F4FD !important;
+        border-color: #0A7EBF !important;
+        box-shadow: 0 4px 12px rgba(10, 126, 191, 0.2) !important;
+        transform: translateY(-1px);
+    }
+
+    &:active {
+        transform: translateY(0);
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
     }
 }
 
 #outline-sidebar-outline {
     margin-top: -1px;
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+    overflow: hidden;
+
+    &.sequence-level {
+        border-left: 1px solid #d7d3d1;
+        border-right: 1px solid #d7d3d1;
+        border-bottom: 1px solid #d7d3d1;
+
+        & > li > .pgn_collapsible {
+            border-left: none !important;
+            border-right: none !important;
+            border-bottom: 1px solid #d7d3d1;
+            /* Optionally remove top border radius so it fully merges */
+            border-radius: 0;
+        }
+
+        & > li:last-child > .pgn_collapsible {
+            border-bottom: none !important;
+        }
+    }
 
     @media (--pgn-size-breakpoint-min-width-xl) {
         margin-bottom: 0;
@@ -85,6 +158,10 @@
     .collapsible-body {
         padding: 0;
 
+        ol {
+            margin-bottom: 0;
+        }
+
         ol li > a {
             padding: var(--pgn-spacing-spacer-3-5) var(--pgn-spacing-spacer-4) var(--pgn-spacing-spacer-3-5) var(--pgn-spacing-spacer-5-5);
 
diff --git a/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTrigger.jsx b/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTrigger.jsx
index abccd14aed..82f4891916 100644
--- a/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTrigger.jsx
+++ b/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTrigger.jsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { IconButton } from '@openedx/paragon';
+import { IconButton, OverlayTrigger, Tooltip } from '@openedx/paragon';
 import { MenuOpen as MenuOpenIcon } from '@openedx/paragon/icons';
 
 import { useCourseOutlineSidebar } from './hooks';
@@ -25,17 +25,35 @@ const CourseOutlineTrigger = ({ isMobileView }) => {
   }
 
   return (
-    <div className={classNames('outline-sidebar-heading-wrapper bg-light-200 collapsed align-self-start', {
-      'flex-shrink-0 mr-4 p-2.5': isDisplayForDesktopView,
+    <div className={classNames('outline-sidebar-heading-wrapper collapsed align-self-start', {
+      'flex-shrink-0 mr-4': isDisplayForDesktopView,
       'p-0': isDisplayForMobileView,
     })}
     >
-      <IconButton
-        alt={intl.formatMessage(messages.toggleCourseOutlineTrigger)}
-        className="outline-sidebar-toggle-btn flex-shrink-0 text-dark bg-light-200 rounded-0"
-        iconAs={MenuOpenIcon}
-        onClick={handleToggleCollapse}
-      />
+      <OverlayTrigger
+        placement="right"
+        overlay={(
+          <Tooltip id="course-outline-tooltip">
+            {intl.formatMessage(messages.toggleCourseOutlineTrigger)}
+          </Tooltip>
+        )}
+      >
+        <IconButton
+          alt={intl.formatMessage(messages.toggleCourseOutlineTrigger)}
+          className="outline-sidebar-toggle-btn flex-shrink-0"
+          iconAs={MenuOpenIcon}
+          onClick={handleToggleCollapse}
+          style={{
+            backgroundColor: '#FFFFFF',
+            border: '1px solid #E5E5E5',
+            borderRadius: '8px',
+            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+            padding: '0.75rem',
+            transition: 'all 0.2s ease',
+            color: '#093055',
+          }}
+        />
+      </OverlayTrigger>
     </div>
   );
 };
diff --git a/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarSequence.jsx b/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarSequence.jsx
index 56e990e58a..320326e86f 100644
--- a/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarSequence.jsx
+++ b/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarSequence.jsx
@@ -91,7 +91,7 @@ const SidebarSequence = ({
         open={open}
         onToggle={() => setOpen(!open)}
       >
-        <ol className="list-unstyled">
+        <ol className="list-unstyled mb-0">
           {unitIds.map((unitId, index) => (
             <SidebarUnit
               key={unitId}
diff --git a/src/courseware/course/sidebar/sidebars/course-outline/messages.ts b/src/courseware/course/sidebar/sidebars/course-outline/messages.ts
index a16aa0eea3..7254e94d36 100644
--- a/src/courseware/course/sidebar/sidebars/course-outline/messages.ts
+++ b/src/courseware/course/sidebar/sidebars/course-outline/messages.ts
@@ -8,7 +8,7 @@ const messages = defineMessages({
   },
   toggleCourseOutlineTrigger: {
     id: 'courseOutline.toggle.button',
-    defaultMessage: 'Toggle course outline tray',
+    defaultMessage: 'Course outline',
     description: 'Button for the learner to toggle the sidebar',
   },
   courseOutlineTitle: {
diff --git a/src/courseware/course/sidebar/sidebars/discussions/Discussions.scss b/src/courseware/course/sidebar/sidebars/discussions/Discussions.scss
index 350356f732..2e6f6c4374 100644
--- a/src/courseware/course/sidebar/sidebars/discussions/Discussions.scss
+++ b/src/courseware/course/sidebar/sidebars/discussions/Discussions.scss
@@ -1,4 +1,6 @@
 .discussions-sidebar-frame {
+    border-radius: 8px;
+    
     @media (--pgn-size-breakpoint-max-width-xl) {
         max-height: calc(100vh - 65px);
     }
diff --git a/src/courseware/course/sidebar/sidebars/discussions/DiscussionsTrigger.jsx b/src/courseware/course/sidebar/sidebars/discussions/DiscussionsTrigger.jsx
index 52dc6a8c0c..2a69951f78 100644
--- a/src/courseware/course/sidebar/sidebars/discussions/DiscussionsTrigger.jsx
+++ b/src/courseware/course/sidebar/sidebars/discussions/DiscussionsTrigger.jsx
@@ -17,6 +17,7 @@ export const ID = WIDGETS.DISCUSSIONS;
 
 const DiscussionsTrigger = ({
   onClick,
+  isActive,
 }) => {
   const intl = useIntl();
   const {
@@ -44,14 +45,19 @@ const DiscussionsTrigger = ({
   }
 
   return (
-    <SidebarTriggerBase onClick={onClick} ariaLabel={intl.formatMessage(messages.openDiscussionsTrigger)}>
-      <Icon src={Forum} className="m-0 m-auto" style={{ color: '#093055' }} />
+    <SidebarTriggerBase
+      onClick={onClick}
+      ariaLabel={intl.formatMessage(messages.openDiscussionsTrigger)}
+      isActive={isActive}
+    >
+      <Icon src={Forum} className="m-0 m-auto" style={{ color: isActive ? '#FFFFFF' : '#093055' }} />
     </SidebarTriggerBase>
   );
 };
 
 DiscussionsTrigger.propTypes = {
   onClick: PropTypes.func.isRequired,
+  isActive: PropTypes.bool,
 };
 
 export default DiscussionsTrigger;
diff --git a/src/courseware/course/sidebar/sidebars/notifications/NotificationIcon.jsx b/src/courseware/course/sidebar/sidebars/notifications/NotificationIcon.jsx
index 19254591f6..a412c249e2 100644
--- a/src/courseware/course/sidebar/sidebars/notifications/NotificationIcon.jsx
+++ b/src/courseware/course/sidebar/sidebars/notifications/NotificationIcon.jsx
@@ -10,11 +10,17 @@ import messages from '../../../messages';
 const NotificationIcon = ({
   status,
   notificationColor,
+  isActive,
 }) => {
   const intl = useIntl();
   return (
     <>
-      <Icon src={Notifications} className="m-0 m-auto" style={{ color: '#093055' }} alt={intl.formatMessage(messages.openNotificationTrigger)} />
+      <Icon
+        src={Notifications}
+        className="m-0 m-auto"
+        style={{ color: isActive ? '#FFFFFF' : '#093055' }}
+        alt={intl.formatMessage(messages.openNotificationTrigger)}
+      />
       {status === 'active'
         ? (
           <span
@@ -33,11 +39,13 @@ const NotificationIcon = ({
 
 NotificationIcon.defaultProps = {
   status: null,
+  isActive: false,
 };
 
 NotificationIcon.propTypes = {
   status: PropTypes.string,
   notificationColor: PropTypes.string.isRequired,
+  isActive: PropTypes.bool,
 };
 
 export default NotificationIcon;
diff --git a/src/courseware/course/sidebar/sidebars/notifications/NotificationTrigger.jsx b/src/courseware/course/sidebar/sidebars/notifications/NotificationTrigger.jsx
index 4b2037be5b..10420711cb 100644
--- a/src/courseware/course/sidebar/sidebars/notifications/NotificationTrigger.jsx
+++ b/src/courseware/course/sidebar/sidebars/notifications/NotificationTrigger.jsx
@@ -13,6 +13,7 @@ export const ID = WIDGETS.NOTIFICATIONS;
 
 const NotificationTrigger = ({
   onClick,
+  isActive,
 }) => {
   const intl = useIntl();
   const {
@@ -48,14 +49,19 @@ const NotificationTrigger = ({
   });
 
   return (
-    <SidebarTriggerBase onClick={onClick} ariaLabel={intl.formatMessage(messages.openNotificationTrigger)}>
-      <NotificationIcon status={notificationStatus} notificationColor="bg-danger-500" />
+    <SidebarTriggerBase
+      onClick={onClick}
+      ariaLabel={intl.formatMessage(messages.openNotificationTrigger)}
+      isActive={isActive}
+    >
+      <NotificationIcon status={notificationStatus} notificationColor="bg-danger-500" isActive={isActive} />
     </SidebarTriggerBase>
   );
 };
 
 NotificationTrigger.propTypes = {
   onClick: PropTypes.func.isRequired,
+  isActive: PropTypes.bool,
 };
 
 export default NotificationTrigger;
diff --git a/src/index.scss b/src/index.scss
index 69e29e2174..b42307de99 100755
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,7 +1,11 @@
 @use "@openedx/paragon/styles/css/core/custom-media-breakpoints" as paragonCustomMediaBreakpoints;
 
+@import "~@edx/brand/paragon/fonts";
+@import "~@edx/brand/paragon/variables";
 @import "~@edx/frontend-component-footer/dist/footer";
 @import "~@edx/frontend-component-header/dist/index";
+@import "~@edx/brand/paragon/overrides";
+@import "~@edx/brand/paragon/learning-mfe";
 
 
 #root {
@@ -13,6 +17,7 @@
   
   main {
     flex-grow: 1;
+    padding-bottom: 350px;
   }
   #main-content {
     flex-grow: 1;
@@ -80,9 +85,13 @@
 }
 
 .sequence {
+  transition: width 0.25s ease-out, flex-basis 0.25s ease-out;
+
   @media (--pgn-size-breakpoint-min-width-sm) {
     border: solid 1px #eaeaea;
-    border-radius: 4px;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
   }
 }
 
@@ -289,20 +298,42 @@
 }
 
 .unit-container {
-  padding-top: 0;
+  padding-top: 1.5rem;
   padding-bottom: 2rem;
   max-width: 1024px;
   margin-left: auto;
   margin-right: auto;
+  background-color: #FFFFFF;
 
   @media (--pgn-size-breakpoint-min-width-sm) {
-    padding-left: var(--pgn-spacing-grid-gutter-width);
-    padding-right: var(--pgn-spacing-grid-gutter-width);
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
   }
 
   @media (min-width: 830px) {
-    padding-left: 40px;
-    padding-right: 40px;
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    color: #1A1A1A;
+    font-weight: 600;
+    margin-bottom: 1rem;
+  }
+
+  h1 {
+    font-size: 1.75rem;
+    line-height: 2.25rem;
+  }
+
+  p {
+    line-height: 1.6;
+    color: #4A4A4A;
+    margin-bottom: 1rem;
+  }
+
+  .problem, .xblock {
+    margin-bottom: 1.5rem;
   }
 }
 
@@ -343,6 +374,15 @@
     gap: var(--pgn-spacing-spacer-base);
   }
 
+  .sequence-bottom-nav-buttons {
+    gap: 5px;
+
+    @media (--pgn-size-breakpoint-max-width-xs) {
+      flex-direction: column;
+      gap: var(--pgn-spacing-spacer-base);
+    }
+  }
+
   .previous-button,
   .next-button {
     border-radius: 4px;
@@ -374,6 +414,17 @@
   max-width: 100%;
   gap: 5px;
   justify-content: flex-end;
+  padding-top: var(--pgn-spacing-spacer-3);
+
+  .outline-trigger-mobile {
+    @media (--pgn-size-breakpoint-min-width-sm) {
+      margin-left: -2rem;
+    }
+
+    @media (min-width: 830px) {
+      margin-left: -2.4rem;
+    }
+  }
 
   .next-button,
   .previous-button {
@@ -451,6 +502,10 @@
   height: 56px !important;
 }
 
+.course-outline-tab [data-testid="start-resume-card"] .pgn__card-header-content {
+  margin-top: 20px;
+}
+
 @media (--pgn-size-breakpoint-max-width-xs) {
   .course-outline-tab .pgn__card {
     .pgn__card-header {
diff --git a/src/plugin-slots/CourseHomeSectionOutlineSlot/index.tsx b/src/plugin-slots/CourseHomeSectionOutlineSlot/index.tsx
index ff188513f8..ebc71cdbc5 100644
--- a/src/plugin-slots/CourseHomeSectionOutlineSlot/index.tsx
+++ b/src/plugin-slots/CourseHomeSectionOutlineSlot/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { PluginSlot } from '@openedx/frontend-plugin-framework';
 import Section from '@src/course-home/outline-tab/section-outline/Section';
+import '../../course-home/outline-tab/section-outline/SectionOutline.scss';
 
 interface Props {
   expandAll: boolean;
diff --git a/src/plugin-slots/UnitTitleSlot/index.jsx b/src/plugin-slots/UnitTitleSlot/index.jsx
index d21ef42eb0..22e05cecfd 100644
--- a/src/plugin-slots/UnitTitleSlot/index.jsx
+++ b/src/plugin-slots/UnitTitleSlot/index.jsx
@@ -24,11 +24,13 @@ const UnitTitleSlot = ({
         renderUnitNavigation,
       }}
     >
-      <div className="d-flex justify-content-between">
-        <div className="mb-0">
+      <div className="d-flex flex-column-reverse flex-xl-row align-items-start align-items-xl-center justify-content-between">
+        <div className="mb-0 mt-3 mt-xl-0">
           <h3 className="h3">{unit.title}</h3>
         </div>
-        {renderUnitNavigation(true)}
+        <div className="w-100">
+          {renderUnitNavigation(true)}
+        </div>
       </div>
       <p className="sr-only">{formatMessage(messages.headerPlaceholder)}</p>
       <BookmarkButton