diff --git a/cms/static/images/close-icon.svg b/cms/static/images/close-icon.svg
new file mode 100644
index 000000000000..0c47cbf3cf65
--- /dev/null
+++ b/cms/static/images/close-icon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z" fill="#00262B"/>
+</svg>
diff --git a/cms/static/images/external-link-icon.svg b/cms/static/images/external-link-icon.svg
new file mode 100644
index 000000000000..89ccf223e706
--- /dev/null
+++ b/cms/static/images/external-link-icon.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.1678 12.6678H3.83347V3.33347H8.50063V2H2.5V14.0013H14.5013V8.00063H13.1678V12.6678ZM9.8341 2V3.33347H12.2277L5.67367 9.88749L6.61376 10.8276L13.1678 4.27357V6.66715H14.5013V2H9.8341Z" fill="#00262B"/>
+</svg>
diff --git a/cms/static/sass/_build-v1.scss b/cms/static/sass/_build-v1.scss
index 2a32c688e5a1..4f3564b76c85 100644
--- a/cms/static/sass/_build-v1.scss
+++ b/cms/static/sass/_build-v1.scss
@@ -55,6 +55,7 @@
 @import 'elements/uploaded-assets'; // layout for asset tables
 @import 'elements/creative-commons';
 @import 'elements/tooltip';
+@import 'elements/feature-anouncement';
 
 // +Base - Specific Views
 // ====================
diff --git a/cms/static/sass/elements/_feature-anouncement.scss b/cms/static/sass/elements/_feature-anouncement.scss
new file mode 100644
index 000000000000..697f9368910f
--- /dev/null
+++ b/cms/static/sass/elements/_feature-anouncement.scss
@@ -0,0 +1,43 @@
+// studio - elements - announcement bar
+// ====================================
+
+.announcement-bar {
+    position: relative;
+    background: #03c7e8;
+    text-align: center;
+    color: $black;
+    padding: ($baseline*0.3) ($baseline*2.2);
+    font: 500 1.4rem/2rem $font-family-sans-serif;
+}
+
+.announcement-bar-link {
+    color: inherit;
+    text-decoration: underline;
+
+    &:hover,
+    &:focus {
+        color: inherit;
+        text-decoration: none;
+    }
+}
+
+.announcement-bar-icon {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.announcement-bar-close {
+    @include right(0);
+
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    background: transparent url('#{$static-path}/images/close-icon.svg') center;
+    width: ($baseline*1.2);
+    height: ($baseline*1.2);
+    border: none;
+
+    &:hover {
+        opacity: 0.7;
+    }
+}
diff --git a/cms/templates/base.html b/cms/templates/base.html
index 2e420568ef75..aab53ede6072 100644
--- a/cms/templates/base.html
+++ b/cms/templates/base.html
@@ -103,6 +103,8 @@
       <% online_help_token = self.online_help_token() if hasattr(self, 'online_help_token') else None %>
       <%include file="widgets/header.html" args="online_help_token=online_help_token" />
 
+      <%include file="widgets/feature-announcement.html" />
+
       <%
       banner_messages = list(PageLevelMessages.user_messages(request))
       %>
diff --git a/cms/templates/widgets/feature-announcement.html b/cms/templates/widgets/feature-announcement.html
new file mode 100644
index 000000000000..073320e0a879
--- /dev/null
+++ b/cms/templates/widgets/feature-announcement.html
@@ -0,0 +1,44 @@
+<!-- Feature Announcement bar -->
+<%page args="course=None" expression_filter="h" />
+<%namespace name='static' file='../static_content.html'/>
+<%! from django.utils.translation import gettext as _ %>
+
+<div class="announcement-bar is-hidden">
+    <div class="announcement-bar-content">
+        ${_("We’ve updated the library authoring experience with a fresh new look!")}
+        <a href="https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/course_components/libraries.html"
+           class="announcement-bar-link"
+           target="_blank">${_("Learn more")}</a>
+        <img class="announcement-bar-icon" src="${static.url('images/external-link-icon.svg')}" alt="${_('External link icon')}">
+    </div>
+    <button type="button" class="announcement-bar-close">
+        <span class="sr-only">${_("Close")}</span>
+    </button>
+</div>
+
+<script>
+    var $announcementBar = $('.announcement-bar');
+    var onLearnMoreAnalyticEvent = 'Learn more about the Studio announcement bar';
+    var onCloseAnalyticEvent = 'Close the Studio announcement bar';
+
+    $.cookie('openedx-studio-announcement')
+        ? $announcementBar.remove()
+        : $announcementBar.removeClass('is-hidden');
+
+    function closeBarAndFireAnalyticsEvent(message) {
+        $announcementBar.hide();
+        $.cookie('openedx-studio-announcement', 'false');
+
+        % if settings.CMS_SEGMENT_KEY:
+            window.analytics.track(message);
+        % endif
+    }
+
+    $('.announcement-bar-link').on('click', function () {
+        closeBarAndFireAnalyticsEvent(onLearnMoreAnalyticEvent);
+    });
+
+    $('.announcement-bar-close').on('click', function () {
+        closeBarAndFireAnalyticsEvent(onCloseAnalyticEvent);
+    });
+</script>