diff --git a/tutor/specs/components/__snapshots__/tutor-layout.spec.js.snap b/tutor/specs/components/__snapshots__/tutor-layout.spec.js.snap
index 04b55a3d1a..e6d87e1579 100644
--- a/tutor/specs/components/__snapshots__/tutor-layout.spec.js.snap
+++ b/tutor/specs/components/__snapshots__/tutor-layout.spec.js.snap
@@ -15,7 +15,7 @@ exports[`Tutor Layout renders and matches snapshot 1`] = `
                       <TutorLayout>
                         <MobXProvider topNavbar={{...}} courseContext={{...}} bottomNavbar={{...}} setSecondaryTopControls={[Function: setSecondaryTopControls] { isMobxAction: true }}>
                           <styled.div hasNavbar={true}>
-                            <div className=\\"sc-ieebsP eYGqFg\\">
+                            <div className=\\"sc-dJjZJu dnIMEJ\\">
                               <Navbar area=\\"header\\" context={{...}} isDocked={false} className=\\"\\">
                                 <styled.nav area=\\"header\\" shouldHideNavbar={[undefined]} isDocked={false} className=\\"tutor-navbar nav-\\">
                                   <nav className=\\"sc-gsDJrp djLbyF tutor-navbar nav-\\">
@@ -28,7 +28,7 @@ exports[`Tutor Layout renders and matches snapshot 1`] = `
                                                 <LinkAnchor onClick={[undefined]} className=\\"brand\\" aria-label=\\"dashboard\\" href=\\"/courses\\" navigate={[Function: navigate]}>
                                                   <a className=\\"brand\\" aria-label=\\"dashboard\\" href=\\"/courses\\" onClick={[Function: onClick]}>
                                                     <styled.svg viewBox=\\"0 0 264.62 40.7\\">
-                                                      <svg viewBox=\\"0 0 264.62 40.7\\" className=\\"sc-ksdxAp gxpANX\\">
+                                                      <svg viewBox=\\"0 0 264.62 40.7\\" className=\\"sc-hBURRC dGZWDW\\">
                                                         <defs>
                                                           <style />
                                                         </defs>
@@ -214,7 +214,7 @@ exports[`Tutor Layout renders and matches snapshot 1`] = `
                                 </Observer>
                               </inject(CourseNagModal)>
                               <styled.div className=\\"\\" hasFooter={false} hasNavbar={true}>
-                                <div className=\\"sc-dJjZJu eARDFU\\">
+                                <div className=\\"sc-hGPAah cdJMum\\">
                                   <Memo(wrappedComponent) app={[undefined]} />
                                   <p>
                                     hi i am body
diff --git a/tutor/specs/e2e/soc3e.e2e.ts b/tutor/specs/e2e/soc3e.e2e.ts
index a6222ffb5a..0f0582babe 100644
--- a/tutor/specs/e2e/soc3e.e2e.ts
+++ b/tutor/specs/e2e/soc3e.e2e.ts
@@ -6,19 +6,22 @@ describe('Soc3e Announcement and Launch', () => {
         await setTimeouts()
         await loginAs('reviewteacher')
         await visitPage(page, '/course/1')
-        await page.waitForNavigation()
+        await page.waitForSelector('css=.course-page')
         await disableTours(page)
         await page.evaluate(() => {
             const offering = window._MODELS.courses.get(1).offering
             offering.os_book_id = offering.SOC2E_BOOK_ID
             offering.appearance_code = 'intro_sociology'
+            window._MODELS.offerings.get(2).os_book_id = ''
+            window._MODELS.offerings.get(2).is_available = false
             window._MODELS.settings.set('soc3eBannerDismissed', null)
+            window._MODELS.settings.set('soc3eOverlayViewedAt', null)
         })
     })
 
     it('displays a banner on a Sociology 2e dashboard before 3e is available', async () => {
         // Don't display it when Soc3e doesn't exist
-        await expect(page).not.toHaveText('Introduction to Sociology 3e')
+        await expect(page).not.toHaveSelector('testEl=sociology-3e-banner', { timeout: 30 })
 
         // Display it when Soc3e exists but is not yet available
         await page.evaluate(() => {
@@ -27,12 +30,29 @@ describe('Soc3e Announcement and Launch', () => {
             offering.is_available = false
         })
 
-        await expect(page).toHaveText('Introduction to Sociology 3e')
+        await expect(page).toHaveSelector('testEl=sociology-3e-banner')
 
         // Don't display it when Soc3e exists and is available
         await page.evaluate(() => {
             window._MODELS.offerings.get(2).is_available = true
         })
-        await expect(page).not.toHaveText('Introduction to Sociology 3e')
+        await expect(page).not.toHaveSelector('testEl=sociology-3e-banner')
+    })
+
+    it('displays an overlay on a Sociology 2e offering and dashboard when 3e is available', async () => {
+        await page.evaluate(() => {
+            const offering = window._MODELS.offerings.get(2)
+            offering.os_book_id = offering.SOC3E_BOOK_ID
+            offering.is_available = true
+        })
+        await expect(page).toHaveSelector('testEl=sociology-3e-overlay')
+        await page.click('testEl=soc3e-close-overlay')
+        await expect(page).not.toHaveSelector('testEl=sociology-3e-overlay', { timeout: 10 })
+        await page.evaluate(() => {
+            const date = new Date()
+            date.setDate(date.getDate() - 120)
+            window._MODELS.settings.set('soc3eOverlayViewedAt', date)
+        })
+        await expect(page).toHaveSelector('testEl=sociology-3e-overlay')
     })
 })
diff --git a/tutor/src/components/tours/custom/drop-any.tsx b/tutor/src/components/tours/custom/drop-any.tsx
index a8256aa4f3..6f9c02ce87 100644
--- a/tutor/src/components/tours/custom/drop-any.tsx
+++ b/tutor/src/components/tours/custom/drop-any.tsx
@@ -71,7 +71,7 @@ const DropQuestionRelocated = (props: any) => {
                     <li>Click <Icon type="minus-circle" /></li>
                 </ol>
             </div>
-        </StyledGreenTooltip >
+        </StyledGreenTooltip>
     )
 }
 
diff --git a/tutor/src/components/tours/step.js b/tutor/src/components/tours/step.js
index cb0fa5d0ea..52c933128e 100644
--- a/tutor/src/components/tours/step.js
+++ b/tutor/src/components/tours/step.js
@@ -2,9 +2,8 @@ import {
     React, PropTypes, observer,
 } from 'vendor';
 import Spotlight from './spotlight';
-import Floater from 'react-floater';
 import STEPS from './custom';
-import { colors } from 'theme';
+import TutorTooltip from '../tutor-tooltip';
 
 @observer
 export default class TourStep extends React.Component {
@@ -14,55 +13,18 @@ export default class TourStep extends React.Component {
         ride: PropTypes.object.isRequired,
     }
 
-    styles = {
-        floater: {
-            maxWidth: '100%',
-        },
-        container: {
-            padding: 0,
-            borderRadius: '4px',
-        },
-        options: {
-            zIndex: 1501,
-        },
-    };
-
-    classNameStyles = {
-        green: {
-            arrow: {
-                color: colors.secondary,
-                spread: 16,
-                length: 10,
-            },
-        },
-        greenNoBody: {
-            arrow: {
-                color: colors.secondary,
-                spread: 16,
-                length: 10,
-                margin: 20,
-            },
-            container: {
-                minHeight: 0,
-                padding: 0,
-            },
-        },
-    };
-
-
     render() {
         const { step, ride } = this.props;
         const Step = STEPS[step.customComponent || 'Standard'];
-        const styles = { ...this.styles, ...this.classNameStyles[step.className] };
 
         const tip = (
-            <Floater
+            <TutorTooltip
                 open={true}
                 debug={ride.context.emitDebugInfo}
                 autoOpen={true}
                 key={step.anchor_id}
                 target={step.target}
-                styles={styles}
+                variant={step.variant}
                 disableAnimation={true}
                 placement={step.placement}
                 content={<Step step={step} ride={ride} />}
diff --git a/tutor/src/components/tutor-tooltip.tsx b/tutor/src/components/tutor-tooltip.tsx
new file mode 100644
index 0000000000..73e3343ac6
--- /dev/null
+++ b/tutor/src/components/tutor-tooltip.tsx
@@ -0,0 +1,158 @@
+import { React, styled, css, observer } from 'vendor'
+import { Icon } from 'shared'
+import { colors } from '../theme'
+import Floater from 'react-floater'
+import { omit, merge } from 'lodash'
+
+const floaterStyles = {
+    default: {
+        floater: {
+            maxWidth: '100%',
+        },
+        container: {
+            padding: 0,
+            borderRadius: '4px',
+        },
+        options: {
+            zIndex: 1501,
+        },
+    },
+    gray: {
+        arrow: {
+            color: colors.neutral.std,
+            spread: 16,
+            length: 10,
+        },
+        container: {
+            padding: 0,
+            borderRadius: '4px',
+        },
+    },
+    green: {
+        arrow: {
+            color: colors.secondary,
+            spread: 16,
+            length: 10,
+        },
+        container: {
+            minHeight: 0,
+            padding: 0,
+        },
+    },
+    greenNoBody: {
+        arrow: {
+            color: colors.secondary,
+            spread: 16,
+            length: 10,
+            margin: 20,
+        },
+        container: {
+            minHeight: 0,
+            padding: 0,
+        },
+    },
+};
+
+const StyledContent = styled.div<TutorTooltipProps>`
+    .header {
+        ${(props: TutorTooltipProps) => props.variant === Variants.Green && css`
+            background: ${colors.secondary};
+        `}
+        ${(props: TutorTooltipProps) => props.variant === Variants.Gray && css`
+            background: ${colors.neutral.std};
+        `}
+        color: #fff;
+        padding: 10px 20px;
+        font-size: 1.6rem;
+        line-height: 2rem;
+        letter-spacing: -0.64px;
+        position: relative;
+
+        .close {
+            position: absolute;
+            right: 0;
+            top: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.2);
+            background-blend-mode: multiply;
+            min-width: 4rem;
+            color: #fff;
+        }
+
+        button {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+
+            svg {
+                margin: 0;
+                width: 11px;
+                color: #fff;
+            }
+        }
+    }
+
+
+    .body {
+        ${(props: TutorTooltipProps) => props.variant === Variants.Gray && css`
+            background: ${colors.neutral.lighter};
+        `}
+
+        font-size: 1.4rem;
+        line-height: 2rem;
+        padding: 16px 20px 24px;
+        background: #fff;
+        max-width: 272px;
+        letter-spacing: -0.4px;
+    }
+`
+
+enum Variants {
+    Gray = 'gray',
+    Green = 'green',
+}
+
+interface TutorTooltipProps {
+    variant?: Variants
+    header?: string
+    body?: any
+    children: any
+    open?: boolean
+    autoOpen?: boolean
+    onClose?(): any
+    styles?: any
+    disableFlip?: boolean
+    placement?: any
+    offset?: number
+}
+
+const TutorTooltip = observer((props: TutorTooltipProps) => {
+    const { header, body, onClose, variant, styles } = props
+    const customStyles = merge(floaterStyles[variant || 'default'], styles)
+    const floaterProps = omit(props, ['styles', 'variant', 'header', 'body'])
+
+    const content = (
+        <StyledContent variant={variant}>
+            <div className="header">
+                {header}
+                <button onClick={onClose} aria-label="Close" className="close">
+                    <Icon type="close" />
+                </button>
+            </div>
+            <div className="body">
+                {body}
+            </div>
+        </StyledContent>
+    )
+    return (
+        <Floater
+            content={content}
+            styles={customStyles}
+            {...floaterProps}
+        />
+    )
+})
+
+export default TutorTooltip
+export { Variants }
diff --git a/tutor/src/models/course/information.ts b/tutor/src/models/course/information.ts
index 7355b6423b..99e8c0b514 100644
--- a/tutor/src/models/course/information.ts
+++ b/tutor/src/models/course/information.ts
@@ -87,4 +87,6 @@ export const CourseInformation = {
 
     openstaxSubjects: 'https://openstax.org/subjects/view-all',
 
+    soc3eFaq: 'https://openstax.secure.force.com/help/articles/FAQ/Introduction-to-Sociology-3e-Frequently-Asked-Questions',
+
 };
diff --git a/tutor/src/models/course/offerings.ts b/tutor/src/models/course/offerings.ts
index a02ef0c543..a7bf9f5705 100644
--- a/tutor/src/models/course/offerings.ts
+++ b/tutor/src/models/course/offerings.ts
@@ -32,12 +32,16 @@ export class OfferingsMap extends Map<ID, Offering> {
         return this.available.where(c => c.appearance_code == 'biology_2e');
     }
 
+    @computed get sociology3e() {
+        return this.available.where(c => c.isSociology3e)
+    }
+
     @computed get soc3eExists() {
         return this.where(c => c.isSociology3e).any
     }
 
     @computed get soc3eAvailable() {
-        return this.available.where(c => c.isSociology3e).any
+        return this.sociology3e.any
     }
 
     @action bootstrap(items: OfferingData[]) {
diff --git a/tutor/src/screens/my-courses/dashboard/index.tsx b/tutor/src/screens/my-courses/dashboard/index.tsx
index eafbcc963f..6a14656cbb 100644
--- a/tutor/src/screens/my-courses/dashboard/index.tsx
+++ b/tutor/src/screens/my-courses/dashboard/index.tsx
@@ -34,6 +34,7 @@ const StyledMyCoursesDashboard = styled.div`
         padding-top: 2.4rem;
         padding: 2.4rem 3.2rem 6.4rem;
         min-height: 40rem;
+        position: relative;
         h3 {
             color: ${colors.neutral.std};
         }
diff --git a/tutor/src/screens/my-courses/dashboard/offering-block.tsx b/tutor/src/screens/my-courses/dashboard/offering-block.tsx
index 760882e5fd..84ddcd1a9a 100644
--- a/tutor/src/screens/my-courses/dashboard/offering-block.tsx
+++ b/tutor/src/screens/my-courses/dashboard/offering-block.tsx
@@ -9,7 +9,8 @@ import CreateACourse from './create-course'
 import CoursePreview from './preview-course'
 import ViewCourse from './view-course'
 import Resource from './resource'
-
+import Sociology3eOfferingTooltip from './sociology-3e-offering-tooltip'
+import Sociology3eOverlay from './sociology-3e-overlay'
 
 const sortByCourseEndsAt = (courseA: Course, courseB: Course) => {
     if (courseA.ends_at.isAfter(courseB.ends_at)) { return 1 }
@@ -191,6 +192,8 @@ const OfferingBlock: React.FC<OfferingBlockProps> = ({ offering, courses, swapOf
     return (
         <div className={cn('offering-container', { 'is-edit-mode': isEditMode })} data-offering-id={offering.id} data-test-id="offering-container">
             {editModeIcons}
+            <Sociology3eOverlay offering={offering} />
+            <Sociology3eOfferingTooltip offering={offering} />
             <h3>{offering.title}</h3>
             <Tabs
                 tabs={['current', 'past', 'resources']}
diff --git a/tutor/src/screens/my-courses/dashboard/sociology-3e-offering-tooltip.tsx b/tutor/src/screens/my-courses/dashboard/sociology-3e-offering-tooltip.tsx
new file mode 100644
index 0000000000..047783c8f1
--- /dev/null
+++ b/tutor/src/screens/my-courses/dashboard/sociology-3e-offering-tooltip.tsx
@@ -0,0 +1,58 @@
+import { React, useState, styled, observer } from 'vendor'
+import TutorTooltip, { Variants as TooltipVariants } from '../../../components/tutor-tooltip'
+import { Icon } from 'shared'
+import { Offering, currentOfferings } from '../../../models'
+import { CourseInformation } from '../../../models/course/information'
+
+const IconWrapper = styled.div`
+    float: right;
+`
+
+const StyledBody = styled.div`
+    line-height: 2rem;
+
+    cite.em {
+        font-weight: bold;
+    }
+`
+
+
+const Sociology3eOfferingTooltip = observer(({ offering }: { offering: Offering }) => {
+    if (!(offering.isSociology2e && currentOfferings.soc3eAvailable)) {
+        return null
+    }
+    const [showSoc3eTooltip, setShowSoc3eTooltip] = useState(false)
+
+    const body = (
+        <StyledBody>
+            A new addition is available -
+            <div><cite className="em">Introduction to Sociology 3e</cite>.</div>
+            <cite>Introduction to Sociology 2e</cite> is available only until Summer 2022.
+            <div>
+                <a target="_blank" href={CourseInformation.soc3eFaq}>Learn more</a>
+            </div>
+        </StyledBody>
+    )
+
+    return (
+        <IconWrapper>
+            <TutorTooltip
+                header={'New edition!'}
+                body={body}
+                open={showSoc3eTooltip}
+                autoOpen={false}
+                disableFlip={true}
+                variant={TooltipVariants.Gray}
+                offset={0}
+                onClose={() => setShowSoc3eTooltip(!showSoc3eTooltip)}
+            >
+                <Icon
+                    type="info-circle"
+                    onClick={() => setShowSoc3eTooltip(!showSoc3eTooltip)}
+                />
+            </TutorTooltip>
+        </IconWrapper>
+    )
+})
+
+export default Sociology3eOfferingTooltip
diff --git a/tutor/src/screens/my-courses/dashboard/sociology-3e-overlay.tsx b/tutor/src/screens/my-courses/dashboard/sociology-3e-overlay.tsx
new file mode 100644
index 0000000000..4cdf95fb38
--- /dev/null
+++ b/tutor/src/screens/my-courses/dashboard/sociology-3e-overlay.tsx
@@ -0,0 +1,142 @@
+import { React, styled, observer, useHistory } from 'vendor'
+import { Icon } from 'shared'
+import UiSettings from 'shared/model/ui-settings'
+import Theme, { breakpoint, colors } from '../../../theme'
+import { Offering, currentOfferings } from '../../../models'
+import Router from '../../../helpers/router'
+import { CourseInformation } from '../../../models/course/information'
+
+const DORMANT_TIME = 86400000 * 30 * 4
+
+interface StyledOverlayProps {
+    fullscreen?: boolean
+}
+
+const Overlay = styled.div<StyledOverlayProps>`
+    position: ${(props: StyledOverlayProps) => props.fullscreen ? 'fixed' : 'absolute'};
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: ${(props: StyledOverlayProps) => props.fullscreen ? Theme.zIndex.navbar + 1 : 1};
+    padding: ${(props: StyledOverlayProps) => props.fullscreen ? '12rem' : '6.4rem'} 8rem 2rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: position: ${(props: StyledOverlayProps) => props.fullscreen ? 'flex-start' : 'center'};
+    ${breakpoint.tablet`
+        padding: 12rem 3.2rem;
+    `}
+    ${breakpoint.mobile`
+        justify-content: flex-start;
+        padding: 12rem 2.4rem;
+    `}
+    color: #fff;
+    font-size: 2rem;
+    line-height: 3rem;
+    background-color: rgba(0,0,0,0.9);
+
+    h1 {
+       font-size: 3.6rem;
+       line-height: 4rem;
+       letter-spacing: -1.44px;
+
+       span {
+           color: #f5d019;
+       }
+    }
+
+    .text ul { padding-left: 30px; }
+
+    & .btn.create-soc3e {
+        background-color: #f5d019;
+        color: #000;
+        display: block;
+        width: 100%;
+        max-width: 590px;
+        ${breakpoint.mobile`
+            width: 100%;
+            font-size: 1.6rem;
+        `}
+        padding: 8px;
+        margin: 18px 0;
+        text-decoration: none;
+        border-radius: 2px;
+        border: 1px solid ${colors.neutral.pale};
+        font-size: 1.8rem;
+        line-height: 2.4rem;
+    }
+
+    .close-overlay {
+        border: 1px solid #fff;
+        border-radius: 50%;
+        background: transparent;
+        color: #fff;
+        position: absolute;
+        top: 34px;
+        right: 32px;
+        width: 40px;
+        height: 40px;
+        &:hover {
+            background: #fff;
+            color: #000;
+        }
+    }
+
+    .faq {
+        font-size: 1.6rem;
+        text-decoration: underline;
+        &, &:hover { color: #fff; }
+    }
+`
+
+const Sociology3eOverlay = observer(({ offering, fullscreen }: { offering: Offering, fullscreen?: boolean }) => {
+    if (!(offering.isSociology2e && currentOfferings.soc3eAvailable)) {
+        return null
+    }
+
+    const now = new Date().getTime()
+    const expiry = new Date(UiSettings.get('soc3eOverlayViewedAt'))?.getTime()
+
+    if (now < expiry) {
+        return null
+    }
+
+    const soc3eOfferingId = currentOfferings.sociology3e.array[0].id
+
+    const markAsViewed = (history?: any) => {
+        UiSettings.set('soc3eOverlayViewedAt', new Date().getTime() + DORMANT_TIME)
+        history?.push(Router.makePathname('createNewCourseFromOffering', { offeringId: soc3eOfferingId }))
+        return null
+    }
+
+    const history = useHistory()
+
+    return (
+        <Overlay fullscreen={fullscreen} data-test-id="sociology-3e-overlay">
+            <button
+                className="close-overlay"
+                aria-label="Close"
+                data-test-id="soc3e-close-overlay"
+                onClick={() => markAsViewed()}
+            >
+                <Icon type="close" />
+            </button>
+            <h1>New edition! <span>Introduction to Sociology 3e</span></h1>
+            <div className="text">
+                The new edition includes:
+                <ul>
+                    <li>Expanded coverage of cultures, race and ethnicity, and gender</li>
+                    <li>Relevant and contemporary narratives, examples, and events</li>
+                    <li>New and enriched ancillaries, multimedia, and assessments</li>
+                </ul>
+            </div>
+            <a className="btn create-soc3e" onClick={() => markAsViewed(history)}>
+                <b>Create a</b> Introduction to Sociology 3e <b>course</b>
+            </a>
+            <a className="faq" href={CourseInformation.soc3eFaq} target="_blank">Frequently Asked Questions</a>
+        </Overlay>
+    )
+})
+
+export default Sociology3eOverlay
diff --git a/tutor/src/screens/new-course/sociology-3e-nudge.tsx b/tutor/src/screens/new-course/sociology-3e-nudge.tsx
new file mode 100644
index 0000000000..ac76dde84d
--- /dev/null
+++ b/tutor/src/screens/new-course/sociology-3e-nudge.tsx
@@ -0,0 +1,39 @@
+import { React, styled } from 'vendor'
+import { colors } from '../../theme'
+
+const Text = styled.div`
+    margin-top: 8px;
+    line-height: 2rem;
+    color: ${colors.neutral.thin};
+
+    a {
+        text-decoration: underline;
+    }
+
+    cite {
+        font-weight: bold;
+    }
+`
+
+const Sociology3eNudge = ({ ux }: { ux: any }) => {
+    if (ux.displaySoc3eSoonNudge) {
+        return (
+            <Text>
+                A new edition <cite>Introduction to Sociology 3e</cite> will be available soon.&nbsp;
+                <a href="https://openstax.org/blog/what-makes-openstax-introduction-to-sociology-unique" target="_blank">Learn more</a>
+            </Text>
+        )
+    }
+
+    if (ux.displaySoc3eAvailableNudge) {
+        return (
+            <Text>
+                Introduction to Sociology 2e is available until Summer 2022. Upgrade to <cite>Introduction to Sociology 3e</cite>.
+            </Text>
+        )
+    }
+
+    return null;
+}
+
+export default Sociology3eNudge
diff --git a/tutor/src/screens/new-course/ux.js b/tutor/src/screens/new-course/ux.js
index 9737f89b9b..4010287b7b 100644
--- a/tutor/src/screens/new-course/ux.js
+++ b/tutor/src/screens/new-course/ux.js
@@ -186,6 +186,16 @@ export default class CourseBuilderUX extends BaseModel {
         return !!(result(this, `skip_${this.stage}`, false) && this.currentStageIndex < this.stages.length - 1);
     }
 
+    @computed get displaySoc3eSoonNudge() {
+        if (!this.offering) return false;
+        return this.offering.isSociology2e && currentOfferings.soc3eExists && !currentOfferings.soc3eAvailable;
+    }
+
+    @computed get displaySoc3eAvailableNudge() {
+        if (!this.offering) return false;
+        return this.offering.isSociology2e && currentOfferings.soc3eAvailable
+    }
+
     @action.bound
     afterCreate() {
         const c = this.newCourse.createdCourse;
diff --git a/tutor/src/screens/new-course/wizard.jsx b/tutor/src/screens/new-course/wizard.jsx
index 3621c7d14a..0a80b227b8 100644
--- a/tutor/src/screens/new-course/wizard.jsx
+++ b/tutor/src/screens/new-course/wizard.jsx
@@ -7,6 +7,7 @@ import CourseOfferingTitle from './offering-title';
 import OXFancyLoader from 'shared/components/staxly-animation';
 import BuilderUX from './ux';
 import * as Steps from './steps';
+import Sociology3eNudge from './sociology-3e-nudge';
 
 const componentFor = key => Steps[ key ];
 
@@ -66,7 +67,6 @@ Header.propTypes = {
     ux: PropTypes.object,
 };
 
-
 @withRouter
 @observer
 export default
@@ -111,6 +111,7 @@ class NewCourseWizard extends React.Component {
                         message={this.ux.isBuilding ? 'Building your course' : 'Loading…'}
                     />
                     {!this.ux.isBusy && <Component ux={this.ux} />}
+                    <Sociology3eNudge ux={this.ux} />
                 </Card.Body>
                 <Card.Footer>
                     <Footer ux={this.ux} />
diff --git a/tutor/src/screens/teacher-dashboard/index.jsx b/tutor/src/screens/teacher-dashboard/index.jsx
index f4716a3563..0d791aa8b4 100644
--- a/tutor/src/screens/teacher-dashboard/index.jsx
+++ b/tutor/src/screens/teacher-dashboard/index.jsx
@@ -13,6 +13,7 @@ import TeacherBecomesStudent from '../../components/buttons/teacher-become-stude
 import Dashboard from './dashboard';
 import CourseCalendarHeader from './header';
 import Sociology3eBanner from './sociology-3e-banner';
+import Sociology3eOverlay from '../my-courses/dashboard/sociology-3e-overlay';
 
 import './styles.scss';
 
@@ -197,6 +198,7 @@ class TeacherDashboardDateWrapper extends React.Component {
 
         return (
             <ScrollToTop>
+                <Sociology3eOverlay offering={this.course.offering} fullscreen={true} history={history} />
                 <TeacherDashboardWrapper
                     date={date}
                     course={this.course}
diff --git a/tutor/src/screens/teacher-dashboard/sociology-3e-banner.tsx b/tutor/src/screens/teacher-dashboard/sociology-3e-banner.tsx
index 816f1368a8..8c11ea0aa2 100644
--- a/tutor/src/screens/teacher-dashboard/sociology-3e-banner.tsx
+++ b/tutor/src/screens/teacher-dashboard/sociology-3e-banner.tsx
@@ -8,14 +8,14 @@ const NotificationBar = styled.div`
   font-size: 2rem;
 
   a {
-    &, &:hover { color: #fff; }
-    text-decoration: underline;
-    font-weight: bold;
+      &, &:hover { color: #fff; }
+      text-decoration: underline;
+      font-weight: bold;
   }
 
   .dismiss.ox-icon {
-    font-size: 2.33rem;
-    margin-top: 5px;
+      font-size: 2.33rem;
+      margin-top: 5px;
   }
 `;
 
@@ -33,7 +33,7 @@ const Sociology3eBanner = observer(({ course }: { course: Course }) => {
     }
 
     return (
-        <NotificationBar className="openstax-notifications-bar">
+        <NotificationBar className="openstax-notifications-bar" data-test-id="sociology-3e-banner">
             <div className="notification">
                 <div className="content">
                     A new edition&nbsp;<i>Introduction to Sociology 3e</i>&nbsp;will be available soon.&nbsp;<a href="https://openstax.org/blog/what-makes-openstax-introduction-to-sociology-unique" target="_blank">Learn more</a>
diff --git a/tutor/src/tours/drop-any.json b/tutor/src/tours/drop-any.json
index 9bb8c1fdb6..652ba14a0f 100644
--- a/tutor/src/tours/drop-any.json
+++ b/tutor/src/tours/drop-any.json
@@ -13,7 +13,7 @@
       "anchor_id": "drop-question-relocated-button",
       "position": "right-start",
       "spotlight": false,
-      "className": "green"
+      "variant": "green"
     }
   ]
 },
@@ -32,7 +32,7 @@
       "anchor_id": "drop-question-new",
       "position": "right-start",
       "spotlight": false,
-      "className": "greenNoBody"
+      "variant": "greenNoBody"
     }
   ]
 }]