diff --git a/src/containers/LearnerDashboardHeader/GreetingBanner.jsx b/src/containers/LearnerDashboardHeader/GreetingBanner.jsx
index bd7d4cf..bba78c1 100644
--- a/src/containers/LearnerDashboardHeader/GreetingBanner.jsx
+++ b/src/containers/LearnerDashboardHeader/GreetingBanner.jsx
@@ -1,7 +1,9 @@
 import React from 'react';
-import { getConfig } from '@edx/frontend-platform';
 
+import { getConfig } from '@edx/frontend-platform';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { Image } from '@edx/paragon';
+
 import messages from './messages';
 
 export const GreetingBanner = () => {
@@ -15,15 +17,18 @@ export const GreetingBanner = () => {
   } else {
     greetMessage = messages.goodMorning;
   }
+  console.log({ config: getConfig() });
 
   return (
     <div className="d-flex p-5 align-items-center justify-content-center">
-      <img
+      <Image
+        style={{ width: '148px' }}
         className="d-block"
-        src={getConfig().LOGO_URL}
+        src={getConfig().LOGO_WHITE_URL}
         alt={getConfig().SITE_NAME}
       />
-      <h1 className="text-center text-white">
+      <div className="greetings-slash-container bg-brand-500" />
+      <h1 className="text-center text-accent-b">
         <FormattedMessage {...greetMessage} />
       </h1>
     </div>
diff --git a/src/containers/LearnerDashboardHeader/index.jsx b/src/containers/LearnerDashboardHeader/index.jsx
index 02daff0..46bef23 100644
--- a/src/containers/LearnerDashboardHeader/index.jsx
+++ b/src/containers/LearnerDashboardHeader/index.jsx
@@ -8,8 +8,9 @@ import { Button } from '@edx/paragon';
 import AuthenticatedUserDropdown from './AuthenticatedUserDropdown';
 
 import GreetingBanner from './GreetingBanner';
-import messages from './messages';
 import ConfirmEmailBanner from './ConfirmEmailBanner';
+import messages from './messages';
+import './index.scss';
 
 export const LearnerDashboardHeader = () => {
   const { authenticatedUser } = useContext(AppContext);
diff --git a/src/containers/LearnerDashboardHeader/index.scss b/src/containers/LearnerDashboardHeader/index.scss
new file mode 100644
index 0000000..0f1e7f8
--- /dev/null
+++ b/src/containers/LearnerDashboardHeader/index.scss
@@ -0,0 +1,6 @@
+.greetings-slash-container {
+  height: 8px;
+  width: 120px;
+  transform-origin: center;
+  transform: rotate(-70deg);
+}
diff --git a/src/containers/LearnerDashboardHeader/messages.js b/src/containers/LearnerDashboardHeader/messages.js
index 94d1c53..aba74eb 100644
--- a/src/containers/LearnerDashboardHeader/messages.js
+++ b/src/containers/LearnerDashboardHeader/messages.js
@@ -34,17 +34,17 @@ const messages = defineMessages({
 
   goodMorning: {
     id: 'greeting.morning',
-    defaultMessage: 'Good Morning',
+    defaultMessage: 'Good Morning!',
     description: 'Good Morning',
   },
   goodAfternoon: {
     id: 'greeting.afternoon',
-    defaultMessage: 'Good Afternoon',
+    defaultMessage: 'Good Afternoon!',
     description: 'Good Afternoon',
   },
   goodEvening: {
     id: 'greeting.evening',
-    defaultMessage: 'Good Evening',
+    defaultMessage: 'Good Evening!',
     description: 'Good Evening',
   },
   switchToProgram: {