diff --git a/injected/entry-points/integration.js b/injected/entry-points/integration.js
index b3fb82c42d..7972a2d739 100644
--- a/injected/entry-points/integration.js
+++ b/injected/entry-points/integration.js
@@ -33,6 +33,7 @@ function generateConfig() {
                 'cookie',
                 'webCompat',
                 'apiManipulation',
+                'duckPlayer',
             ],
         },
     };
diff --git a/injected/integration-test/duckplayer-mobile-drawer.spec.js b/injected/integration-test/duckplayer-mobile-drawer.spec.js
new file mode 100644
index 0000000000..dbdd7874fc
--- /dev/null
+++ b/injected/integration-test/duckplayer-mobile-drawer.spec.js
@@ -0,0 +1,192 @@
+import { expect, test } from '@playwright/test';
+import { DuckplayerOverlays } from './page-objects/duckplayer-overlays.js';
+
+test.describe('Duck Player - Drawer UI variant', () => {
+    test.describe('Video Player overlays', () => {
+        test("Selecting 'watch here' on mobile", async ({ page }, workerInfo) => {
+            const overlays = DuckplayerOverlays.create(page, workerInfo);
+            await overlays.reducedMotion();
+
+            // Given drawer overlay variant is set
+            await overlays.withRemoteConfig({ json: 'overlays-drawer.json' });
+
+            // And my setting is 'always ask'
+            await overlays.userSettingIs('always ask');
+            await overlays.gotoPlayerPage();
+
+            // watch here = overlays removed
+            await overlays.mobile.choosesWatchHere();
+            await overlays.mobile.overlayIsRemoved();
+            await overlays.pixels.sendsPixels([
+                { pixelName: 'overlay', params: {} },
+                { pixelName: 'play.do_not_use', params: { remember: '0' } },
+            ]);
+        });
+        test("Selecting 'watch here' on mobile + remember", async ({ page }, workerInfo) => {
+            const overlays = DuckplayerOverlays.create(page, workerInfo);
+            await overlays.reducedMotion();
+
+            // Given drawer overlay variant is set
+            await overlays.withRemoteConfig({ json: 'overlays-drawer.json' });
+
+            // And my setting is 'always ask'
+            await overlays.userSettingIs('always ask');
+            await overlays.gotoPlayerPage();
+
+            // watch here = overlays removed
+            await overlays.mobile.selectsRemember();
+            await overlays.mobile.choosesWatchHere();
+            await overlays.mobile.overlayIsRemoved();
+            await overlays.pixels.sendsPixels([
+                { pixelName: 'overlay', params: {} },
+                { pixelName: 'play.do_not_use', params: { remember: '1' } },
+            ]);
+            await overlays.userSettingWasUpdatedTo('disabled');
+        });
+        test("Selecting 'watch in duckplayer' on mobile", async ({ page }, workerInfo) => {
+            const overlays = DuckplayerOverlays.create(page, workerInfo);
+            await overlays.reducedMotion();
+
+            // Given drawer overlay variant is set
+            await overlays.withRemoteConfig({ json: 'overlays-drawer.json' });
+
+            // And my setting is 'always ask'
+            await overlays.userSettingIs('always ask');
+            await overlays.gotoPlayerPage();
+
+            await overlays.mobile.choosesDuckPlayer();
+            await overlays.pixels.sendsPixels([
+                { pixelName: 'overlay', params: {} },
+                { pixelName: 'play.use', params: { remember: '0' } },
+            ]);
+            await overlays.userSettingWasUpdatedTo('always ask');
+        });
+        test("Selecting 'watch in duckplayer' on mobile + remember", async ({ page }, workerInfo) => {
+            const overlays = DuckplayerOverlays.create(page, workerInfo);
+            await overlays.reducedMotion();
+
+            // Given drawer overlay variant is set
+            await overlays.withRemoteConfig({ json: 'overlays-drawer.json' });
+
+            // And my setting is 'always ask'
+            await overlays.userSettingIs('always ask');
+            await overlays.gotoPlayerPage();
+
+            await overlays.mobile.selectsRemember();
+            await overlays.mobile.choosesDuckPlayer();
+            await overlays.pixels.sendsPixels([
+                { pixelName: 'overlay', params: {} },
+                { pixelName: 'play.use', params: { remember: '1' } },
+            ]);
+            await overlays.userSettingWasUpdatedTo('enabled');
+        });
+        test('Clicking on video thumbnail dismisses overlay', async ({ page }, workerInfo) => {
+            const overlays = DuckplayerOverlays.create(page, workerInfo);
+            await overlays.reducedMotion();
+
+            // Given drawer overlay variant is set
+            await overlays.withRemoteConfig({ json: 'overlays-drawer.json' });
+
+            // And my setting is 'always ask'
+            await overlays.userSettingIs('always ask');
+            await overlays.gotoPlayerPage();
+
+            await overlays.mobile.clicksOnVideoThumbnail();
+            await overlays.pixels.sendsPixels([
+                { pixelName: 'overlay', params: {} },
+                { pixelName: 'play.do_not_use.thumbnail', params: {} },
+            ]);
+            await overlays.userSettingWasNotUpdated();
+        });
+        test('Clicking on drawer backdrop dismisses overlay', async ({ page }, workerInfo) => {
+            const overlays = DuckplayerOverlays.create(page, workerInfo);
+            await overlays.reducedMotion();
+
+            // Given drawer overlay variant is set
+            await overlays.withRemoteConfig({ json: 'overlays-drawer.json' });
+
+            // And my setting is 'always ask'
+            await overlays.userSettingIs('always ask');
+            await overlays.gotoPlayerPage();
+
+            await overlays.mobile.clicksOnDrawerBackdrop();
+            await overlays.pixels.sendsPixels([
+                { pixelName: 'overlay', params: {} },
+                { pixelName: 'play.do_not_use', params: {} },
+            ]);
+            await overlays.userSettingWasNotUpdated();
+        });
+        test('opens info', async ({ page }, workerInfo) => {
+            const overlays = DuckplayerOverlays.create(page, workerInfo);
+            await overlays.reducedMotion();
+
+            // Given drawer overlay variant is set
+            await overlays.withRemoteConfig({ json: 'overlays-drawer.json' });
+
+            // And my setting is 'always ask'
+            await overlays.userSettingIs('always ask');
+            await overlays.gotoPlayerPage();
+            await overlays.mobile.opensInfo();
+        });
+    });
+
+    /**
+     * Use this test in `--headed` mode to cycle through every language
+     */
+    test.describe.skip('Translated Overlays', () => {
+        const items = [
+            'bg',
+            'cs',
+            'da',
+            'de',
+            'el',
+            'en',
+            'es',
+            'et',
+            'fi',
+            'fr',
+            'hr',
+            'hu',
+            'it',
+            'lt',
+            'lv',
+            'nb',
+            'nl',
+            'pl',
+            'pt',
+            'ro',
+            'ru',
+            'sk',
+            'sl',
+            'sv',
+            'tr',
+        ];
+        // const items = ['en']
+        for (const locale of items) {
+            test(`testing UI ${locale}`, async ({ page }, workerInfo) => {
+                // console.log(workerInfo.project.use.viewport.height)
+                // console.log(workerInfo.project.use.viewport.width)
+                const overlays = DuckplayerOverlays.create(page, workerInfo);
+                await overlays.withRemoteConfig({ json: 'overlays-drawer.json', locale });
+                await overlays.userSettingIs('always ask');
+                await overlays.gotoPlayerPage();
+                await page.locator('ddg-video-drawer-mobile').nth(0).waitFor();
+                await page.locator('.html5-video-player').screenshot({ path: `screens/se-2/${locale}.png` });
+            });
+        }
+    });
+
+    /**
+     * Use `npm run playwright-screenshots` to run this test only.
+     */
+    test.describe('Overlay screenshot @screenshots', () => {
+        test("testing Overlay UI 'en'", async ({ page }, workerInfo) => {
+            const overlays = DuckplayerOverlays.create(page, workerInfo);
+            await overlays.withRemoteConfig({ json: 'overlays-drawer.json', locale: 'en' });
+            await overlays.userSettingIs('always ask');
+            await overlays.gotoPlayerPage();
+            await page.locator('ddg-video-drawer-mobile').nth(0).waitFor();
+            await expect(page.locator('ddg-video-drawer-mobile')).toHaveScreenshot('drawer.png', { maxDiffPixels: 20 });
+        });
+    });
+});
diff --git a/injected/integration-test/duckplayer-mobile-drawer.spec.js-snapshots/drawer-android-darwin.png b/injected/integration-test/duckplayer-mobile-drawer.spec.js-snapshots/drawer-android-darwin.png
new file mode 100644
index 0000000000..da4b5f3729
Binary files /dev/null and b/injected/integration-test/duckplayer-mobile-drawer.spec.js-snapshots/drawer-android-darwin.png differ
diff --git a/injected/integration-test/duckplayer-mobile-drawer.spec.js-snapshots/drawer-ios-darwin.png b/injected/integration-test/duckplayer-mobile-drawer.spec.js-snapshots/drawer-ios-darwin.png
new file mode 100644
index 0000000000..e46b0bc218
Binary files /dev/null and b/injected/integration-test/duckplayer-mobile-drawer.spec.js-snapshots/drawer-ios-darwin.png differ
diff --git a/injected/integration-test/page-objects/duckplayer-overlays.js b/injected/integration-test/page-objects/duckplayer-overlays.js
index 7e91d54e4a..313445cbbc 100644
--- a/injected/integration-test/page-objects/duckplayer-overlays.js
+++ b/injected/integration-test/page-objects/duckplayer-overlays.js
@@ -38,6 +38,7 @@ const uiSettings = {
 const configFiles = /** @type {const} */ ([
     'overlays.json',
     'overlays-live.json',
+    'overlays-drawer.json',
     'disabled.json',
     'thumbnail-overlays-disabled.json',
     'click-interceptions-disabled.json',
@@ -90,6 +91,10 @@ export class DuckplayerOverlays {
         });
     }
 
+    async reducedMotion() {
+        await this.page.emulateMedia({ reducedMotion: 'reduce' });
+    }
+
     /**
      * @param {object} params
      * @param {'default' | 'cookie_banner'} [params.variant]
@@ -472,6 +477,17 @@ export class DuckplayerOverlays {
         ]);
     }
 
+    /**
+     * @return {Promise<void>}
+     */
+    async userSettingWasNotUpdated() {
+        const messages = await this.collector.outgoingMessages();
+        // @ts-expect-error - Subscription is missing method property
+        const setUserValuesMessages = messages.filter((message) => message.payload?.method === 'setUserValues');
+
+        expect(setUserValuesMessages.length).toBe(0);
+    }
+
     /**
      * Helper for creating an instance per platform
      * @param {import("@playwright/test").Page} page
@@ -536,6 +552,16 @@ class DuckplayerOverlaysMobile {
         await page.getByRole('link', { name: 'Turn On Duck Player' }).click();
     }
 
+    async clicksOnVideoThumbnail() {
+        const { page } = this.overlays;
+        await page.locator('ddg-video-thumbnail-overlay-mobile .bg').click({ force: true });
+    }
+
+    async clicksOnDrawerBackdrop() {
+        const { page } = this.overlays;
+        await page.locator('ddg-video-drawer-mobile .ddg-mobile-drawer-background').click({ position: { x: 10, y: 10 } });
+    }
+
     async selectsRemember() {
         const { page } = this.overlays;
         await page.getByRole('switch').click();
diff --git a/injected/integration-test/test-pages/duckplayer/config/overlays-drawer.json b/injected/integration-test/test-pages/duckplayer/config/overlays-drawer.json
new file mode 100644
index 0000000000..56d234a446
--- /dev/null
+++ b/injected/integration-test/test-pages/duckplayer/config/overlays-drawer.json
@@ -0,0 +1,62 @@
+{
+  "unprotectedTemporary": [],
+  "features": {
+    "duckPlayer": {
+      "state": "enabled",
+      "exceptions": [],
+      "settings": {
+        "overlays": {
+          "youtube": {
+            "state": "disabled",
+            "selectors": {
+              "thumbLink": "a[href^='/watch']",
+              "excludedRegions": [
+                "#playlist",
+                "ytd-movie-renderer",
+                "ytd-grid-movie-renderer"
+              ],
+              "videoElement": "#player video",
+              "videoElementContainer": "#player .html5-video-player",
+              "hoverExcluded": [".an-overlay-causing-breakage"],
+              "clickExcluded": [".an-overlay-causing-breakage"],
+              "allowedEventTargets": [],
+              "drawerContainer": "body"
+            },
+            "thumbnailOverlays": {
+              "state": "enabled"
+            },
+            "clickInterception": {
+              "state": "enabled"
+            },
+            "videoOverlays": {
+              "state": "enabled"
+            },
+            "videoDrawer": {
+              "state": "enabled"
+            }
+          },
+          "serpProxy": {
+            "state": "disabled"
+          }
+        },
+        "domains": [
+          {
+            "domain": "localhost",
+            "patchSettings": [
+              {
+                "op": "replace",
+                "path": "/overlays/youtube/state",
+                "value": "enabled"
+              },
+              {
+                "op": "replace",
+                "path": "/overlays/serpProxy/state",
+                "value": "enabled"
+              }
+            ]
+          }
+        ]
+      }
+    }
+  }
+}
diff --git a/injected/integration-test/test-pages/duckplayer/pages/player.html b/injected/integration-test/test-pages/duckplayer/pages/player.html
index 2dfa7c3f58..e3321beaa0 100644
--- a/injected/integration-test/test-pages/duckplayer/pages/player.html
+++ b/injected/integration-test/test-pages/duckplayer/pages/player.html
@@ -154,13 +154,23 @@
 </template>
 <script>
     (async () => {
+        settingsFiles = {
+            default: '/duckplayer/config/overlays.json',
+            drawer: '/duckplayer/config/overlays-drawer.json',
+        }
+
         if (!new URLSearchParams(location.search).has('preview')) {
             return;
         }
         const platformName = new URLSearchParams(window.location.search).get('platform') || 'macos';
         const locale = new URLSearchParams(window.location.search).get('locale') || 'en';
+        const settingsId = new URLSearchParams(window.location.search).get('config') || 'default';
+
         await import("/build/contentScope.js").catch(console.error)
-        const overlays = await fetch('/duckplayer/config/overlays.json').then(x => x.json())
+
+        const settingsFile = settingsFiles[settingsId] || settingsFiles.default;
+        const overlays = await fetch(settingsFile).then(x => x.json())
+
         document.dispatchEvent(new CustomEvent('content-scope-init-args', {
             detail: {
                 debug: true,
diff --git a/injected/playwright.config.js b/injected/playwright.config.js
index d843d7a27d..6a7b86caeb 100644
--- a/injected/playwright.config.js
+++ b/injected/playwright.config.js
@@ -37,13 +37,14 @@ export default defineConfig({
         },
         {
             name: 'ios',
-            testMatch: ['integration-test/duckplayer-mobile.spec.js'],
+            testMatch: ['integration-test/duckplayer-mobile.spec.js', 'integration-test/duckplayer-mobile-drawer.spec.js'],
             use: { injectName: 'apple-isolated', platform: 'ios', ...devices['iPhone 13'] },
         },
         {
             name: 'android',
             testMatch: [
                 'integration-test/duckplayer-mobile.spec.js',
+                'integration-test/duckplayer-mobile-drawer.spec.js',
                 'integration-test/web-compat-android.spec.js',
                 'integration-test/message-bridge-android.spec.js',
             ],
diff --git a/injected/src/features/duckplayer/assets/info-solid.svg b/injected/src/features/duckplayer/assets/info-solid.svg
new file mode 100644
index 0000000000..a647330670
--- /dev/null
+++ b/injected/src/features/duckplayer/assets/info-solid.svg
@@ -0,0 +1,10 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#Info-Solid-16_svg__a)">
+    <path fill="#000" fill-rule="evenodd" d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.483 3.645c-.743 0-1.196.598-1.196 1.152 0 .67.51.89.963.89.831 0 1.181-.628 1.181-1.138 0-.642-.51-.904-.948-.904m.43 2.9-1.827.296c-.055.442-.136.89-.218 1.343-.157.877-.32 1.78-.32 2.723 0 .937.56 1.448 1.447 1.448 1.011 0 1.185-.635 1.224-1.21-.839.121-1.023-.257-.886-1.148s.58-3.451.58-3.451Z" clip-rule="evenodd"/>
+  </g>
+  <defs>
+    <clipPath id="Info-Solid-16_svg__a">
+      <path fill="#fff" d="M0 0h16v16H0z"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/injected/src/features/duckplayer/assets/mobile-video-drawer.css b/injected/src/features/duckplayer/assets/mobile-video-drawer.css
new file mode 100644
index 0000000000..df1c8ebc89
--- /dev/null
+++ b/injected/src/features/duckplayer/assets/mobile-video-drawer.css
@@ -0,0 +1,376 @@
+/* -- VIDEO PLAYER OVERLAY */
+:host {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    top: 0;
+    z-index: 10010;
+    --title-size: 16px;
+    --title-line-height: 20px;
+    --title-gap: 16px;
+    --button-gap: 6px;
+    --logo-size: 32px;
+    --logo-gap: 8px;
+    --gutter: 16px;
+}
+/* iphone 15 */
+@media screen and (min-width: 390px) {
+    :host {
+        --title-size: 20px;
+        --title-line-height: 25px;
+        --button-gap: 16px;
+        --logo-size: 40px;
+        --logo-gap: 12px;
+        --title-gap: 16px;
+    }
+}
+/* iphone 15 Pro Max */
+@media screen and (min-width: 430px) {
+    :host {
+        --title-size: 22px;
+        --title-gap: 24px;
+        --button-gap: 20px;
+        --logo-gap: 16px;
+    }
+}
+/* small landscape */
+@media screen and (min-width: 568px) {
+}
+/* large landscape */
+@media screen and (min-width: 844px) {
+    :host {
+        --title-gap: 30px;
+        --button-gap: 24px;
+        --logo-size: 48px;
+    }
+}
+
+
+:host * {
+    font-family: system, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
+:root *, :root *:after, :root *:before {
+    box-sizing: border-box;
+}
+
+.ddg-mobile-drawer-overlay {
+    --overlay-background: rgba(0, 0, 0, 0.6);
+    --drawer-background: #fafafa;
+    --drawer-color: rgba(0, 0, 0, 0.84);
+    --button-background: rgba(0, 0, 0, 0.06);
+    --button-color: rgba(0, 0, 0, 0.84);
+    --button-accent-background: #3969ef;
+    --button-accent-color: #fff;
+    --switch-off-background: #888;
+    --switch-on-background: #3969ef;
+    --switch-thumb-background: #fff;
+    --info-color: #000;
+
+    --drawer-padding-block: 24px;
+    --drawer-padding-inline: 16px;
+    --drawer-buffer: 48px;
+
+    height: 100%;
+    position: absolute;
+    width: 100%;
+}
+
+@media (prefers-color-scheme: dark) {
+    .ddg-mobile-drawer-overlay {
+        --drawer-background: #333;
+        --drawer-color: rgba(255, 255, 255, 0.84);
+        --button-background: rgba(255, 255, 255, 0.18);
+        --button-color: #fff;
+        --button-accent-background: #7295f6;
+        --button-accent-color: rgba(0, 0, 0, 0.84);
+        --switch-off-background: #888;
+        --switch-on-background: #7295f6;
+        --switch-thumb-background: #fff;
+        --info-color: rgba(255, 255, 255, 0.84);
+    }
+}
+
+.ddg-mobile-drawer-background {
+    background: var(--overlay-background);
+    bottom: 0;
+    left: 0;
+    opacity: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+}
+
+.ddg-mobile-drawer {
+    background: var(--drawer-background);
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    bottom: -100vh;
+    box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, 0.10), 0px -20px 40px 0px rgba(0, 0, 0, 0.08);
+    box-sizing: border-box;
+    color: var(--drawer-color);
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    left: 0;
+    position: fixed;
+    width: 100%;
+
+    /* Apply safe-area padding as fallback in case media query below gets removed in the future */
+    padding-top: var(--drawer-padding-block);
+    padding-right: calc(var(--drawer-padding-inline) + env(safe-area-inset-right));
+    padding-bottom: calc(var(--drawer-padding-block) + var(--drawer-buffer));
+    padding-left: calc(var(--drawer-padding-inline) + env(safe-area-inset-left));
+}
+
+/* Apply a blanket 18% inline padding on viewports wider than 700px */
+@media screen and (min-width: 700px) {
+    .ddg-mobile-drawer {
+        padding-left: 18%;
+        padding-right: 18%;
+    }
+}
+
+/* ANIMATIONS */
+
+.animateIn .ddg-mobile-drawer-background {
+    animation: fade-in 300ms ease-out 100ms 1 both;
+}
+
+.animateOut .ddg-mobile-drawer-background {
+    animation: fade-out 300ms ease-out 10ms 1 both;
+}
+
+.animateIn .ddg-mobile-drawer {
+    animation: slide-in 300ms cubic-bezier(0.34, 1.3, 0.64, 1) 100ms 1 both;
+}
+
+.animateOut .ddg-mobile-drawer {
+    animation: slide-out 300ms cubic-bezier(0.36, 0, 0.66, -0.3) 100ms 1 both;
+}
+
+@media (prefers-reduced-motion) {
+    .animateIn *,
+    .animateOut * {
+        animation-duration: 0s !important;
+    }
+}
+
+@keyframes fade-in {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes fade-out {
+    0% {
+        opacity: 1;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}
+
+@keyframes slide-in {
+    0% {
+        bottom: -100vh;
+    }
+
+    100% {
+        bottom: calc(-1 * var(--drawer-buffer));
+    }
+}
+
+@keyframes slide-out {
+    0% {
+        bottom: calc(-1 * var(--drawer-buffer));
+    }
+
+    100% {
+        bottom: -100vh;
+    }
+}
+
+.heading {
+    align-items: center;
+    display: flex;
+    gap: 12px;
+    margin-bottom: 4px;
+}
+
+.logo {
+    flex: 0 0 32px;
+    height: 32px;
+    width: 32px;
+}
+
+.title {
+    flex: 1 1 auto;
+    font-size: 19px;
+    font-weight: 700;
+    line-height: calc(24 / 19);
+}
+
+.info {
+    align-self: start;
+    flex: 0 0 16px;
+    height: 32px;
+    position: relative;
+    width: 16px;
+}
+
+/* BUTTONS */
+
+.buttons {
+    gap: 8px;
+    display: flex;
+}
+
+.button {
+    flex: 1 1 50%;
+    margin: 0;
+    appearance: none;
+    background: none;
+    box-shadow: none;
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--button-background);
+    color: var(--button-color);
+    text-decoration: none;
+    line-height: 20px;
+    padding: 12px 16px;
+    font-size: 15px;
+    font-weight: 600;
+    border-radius: 8px;
+}
+
+.info-button {
+    appearance: none;
+    background: none;
+    border: 0;
+    height: 40px;
+    margin: 0;
+    padding: 12px;
+    position: absolute;
+    right: calc(-1 * var(--drawer-padding-inline));
+    top: calc(-1 * var(--drawer-padding-block));
+    width: 40px;
+}
+
+.info-button svg {
+    display: block;
+    width: 16px;
+    height: 16px;
+}
+
+.info-button svg path {
+    fill: var(--info-color);
+}
+
+.open {
+    background: var(--button-accent-background);
+    color: var(--button-accent-color);
+    text-align: center;
+    width: 100%;
+
+    @media screen and (min-width: 568px) {
+        flex: inherit;
+        padding-left: 24px;
+        padding-right: 24px;
+    }
+}
+
+/* REMEMBER ME */
+
+.remember {
+    height: 40px;
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 8px;
+}
+
+.remember-label {
+    display: flex;
+    align-items: center;
+    flex: 1;
+}
+
+.remember-text {
+    display: block;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: calc(18 / 14);
+}
+.remember-checkbox {
+    margin-left: auto;
+    display: flex;
+}
+
+/* SWITCH */
+
+.switch {
+    margin: 0;
+    padding: 0;
+    width: 52px;
+    height: 32px;
+    border: 0;
+    box-shadow: none;
+    background: var(--switch-off-background);
+    border-radius: 32px;
+    position: relative;
+    transition: all .3s;
+}
+
+.switch:active .thumb {
+    scale: 1.15;
+}
+
+.thumb {
+    width: 24px;
+    height: 24px;
+    border-radius: 100%;
+    background: var(--switch-thumb-background);
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    pointer-events: none;
+    transition: .2s left ease-in-out;
+}
+
+.switch[aria-checked="true"] .thumb {
+    left: calc(100% - 32px + 4px);
+}
+.switch[aria-checked="true"] {
+    background: var(--switch-on-background);
+}
+
+.ios-switch {
+    width: 51px;
+    height: 31px;
+}
+
+.ios-switch .thumb {
+    top: 2px;
+    left: 2px;
+    width: 27px;
+    height: 27px;
+    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.25);
+}
+
+.ios-switch:active .thumb {
+    scale: 1;
+}
+
+.ios-switch[aria-checked="true"] .thumb {
+    left: calc(100% - 32px + 3px);
+}
diff --git a/injected/src/features/duckplayer/assets/mobile-video-thumbnail-overlay.css b/injected/src/features/duckplayer/assets/mobile-video-thumbnail-overlay.css
new file mode 100644
index 0000000000..405c319fb7
--- /dev/null
+++ b/injected/src/features/duckplayer/assets/mobile-video-thumbnail-overlay.css
@@ -0,0 +1,96 @@
+/* -- VIDEO PLAYER OVERLAY */
+:host {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 10000;
+    --title-size: 16px;
+    --title-line-height: 20px;
+    --title-gap: 16px;
+    --button-gap: 6px;
+    --logo-size: 32px;
+    --logo-gap: 8px;
+    --gutter: 16px;
+}
+/* iphone 15 */
+@media screen and (min-width: 390px) {
+    :host {
+        --title-size: 20px;
+        --title-line-height: 25px;
+        --button-gap: 16px;
+        --logo-size: 40px;
+        --logo-gap: 12px;
+        --title-gap: 16px;
+    }
+}
+/* iphone 15 Pro Max */
+@media screen and (min-width: 430px) {
+    :host {
+        --title-size: 22px;
+        --title-gap: 24px;
+        --button-gap: 20px;
+        --logo-gap: 16px;
+    }
+}
+/* small landscape */
+@media screen and (min-width: 568px) {
+}
+/* large landscape */
+@media screen and (min-width: 844px) {
+    :host {
+        --title-gap: 30px;
+        --button-gap: 24px;
+        --logo-size: 48px;
+    }
+}
+
+
+:host * {
+    font-family: system, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
+:root *, :root *:after, :root *:before {
+    box-sizing: border-box;
+}
+
+.ddg-video-player-overlay {
+    width: 100%;
+    height: 100%;
+    padding-left: var(--gutter);
+    padding-right: var(--gutter);
+
+    @media screen and (min-width: 568px) {
+        padding: 0;
+    }
+}
+
+.bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    color: white;
+    background: rgba(0, 0, 0, 0.6);
+    background-position: center;
+    text-align: center;
+}
+
+.logo {
+    content: " ";
+    position: absolute;
+    display: block;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: transparent;
+    background-image: url('data:image/svg+xml,<svg width="90" height="64" viewBox="0 0 90 64" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M88.119 9.88293C87.0841 6.01134 84.0348 2.96133 80.1625 1.92639C73.1438 0.0461578 44.9996 0.0461578 44.9996 0.0461578C44.9996 0.0461578 16.8562 0.0461578 9.83751 1.92639C5.96518 2.96133 2.91592 6.01134 1.88097 9.88293C0 16.9023 0 31.5456 0 31.5456C0 31.5456 0 46.1896 1.88097 53.2083C2.91592 57.0799 5.96518 60.1306 9.83751 61.1648C16.8562 63.0458 44.9996 63.0458 44.9996 63.0458C44.9996 63.0458 73.1438 63.0458 80.1625 61.1648C84.0348 60.1306 87.0841 57.0799 88.119 53.2083C90 46.1896 90 31.5456 90 31.5456C90 31.5456 90 16.9023 88.119 9.88293Z" fill="%23FF0000"/><path fill-rule="evenodd" clip-rule="evenodd" d="M36.8184 45.3313L60.2688 31.792L36.8184 18.2512V45.3313Z" fill="%23FFFFFE"/></svg>');
+    background-size: 90px 64px;
+    background-position: center center;
+    background-repeat: no-repeat;
+}
diff --git a/injected/src/features/duckplayer/components/ddg-video-drawer-mobile.js b/injected/src/features/duckplayer/components/ddg-video-drawer-mobile.js
new file mode 100644
index 0000000000..1dff9bedc6
--- /dev/null
+++ b/injected/src/features/duckplayer/components/ddg-video-drawer-mobile.js
@@ -0,0 +1,221 @@
+import mobilecss from '../assets/mobile-video-drawer.css';
+import dax from '../assets/dax.svg';
+import info from '../assets/info-solid.svg';
+import { createPolicy, html, trustedUnsafe } from '../../../dom-utils.js';
+import { DDGVideoThumbnailOverlay } from './ddg-video-thumbnail-overlay-mobile';
+
+/**
+ * @typedef {ReturnType<import("../text").overlayCopyVariants>} TextVariants
+ * @typedef {TextVariants[keyof TextVariants]} Text
+ */
+
+/**
+ * The custom element that we use to present our UI elements
+ * over the YouTube player
+ */
+export class DDGVideoDrawerMobile extends HTMLElement {
+    static CUSTOM_TAG_NAME = 'ddg-video-drawer-mobile';
+    static OPEN_INFO = 'open-info';
+    static OPT_IN = 'opt-in';
+    static OPT_OUT = 'opt-out';
+    static DISMISS = 'dismiss';
+    static THUMBNAIL_CLICK = 'thumbnail-click';
+    static DID_EXIT = 'did-exit';
+
+    policy = createPolicy();
+    /** @type {boolean} */
+    testMode = false;
+    /** @type {Text | null} */
+    text = null;
+    /** @type {HTMLElement | null} */
+    container;
+    /** @type {HTMLElement | null} */
+    drawer;
+    /** @type {HTMLElement | null} */
+    overlay;
+
+    /** @type {'idle'|'animating'} */
+    animationState = 'idle';
+
+    connectedCallback() {
+        this.createMarkupAndStyles();
+    }
+
+    createMarkupAndStyles() {
+        const shadow = this.attachShadow({ mode: this.testMode ? 'open' : 'closed' });
+        const style = document.createElement('style');
+        style.innerText = mobilecss;
+        const overlayElement = document.createElement('div');
+        const content = this.mobileHtml();
+        overlayElement.innerHTML = this.policy.createHTML(content);
+        shadow.append(style, overlayElement);
+        this.setupEventHandlers(overlayElement);
+        this.animateOverlay('in');
+    }
+
+    /**
+     * @returns {string}
+     */
+    mobileHtml() {
+        if (!this.text) {
+            console.warn('missing `text`. Please assign before rendering');
+            return '';
+        }
+        const svgIcon = trustedUnsafe(dax);
+        const infoIcon = trustedUnsafe(info);
+
+        return html`
+            <div class="ddg-mobile-drawer-overlay">
+                <div class="ddg-mobile-drawer-background"></div>
+                <div class="ddg-mobile-drawer">
+                    <div class="heading">
+                        <div class="logo">${svgIcon}</div>
+                        <div class="title">${this.text.title}</div>
+                        <div class="info">
+                            <button class="info-button" type="button" aria-label="Open Information Modal">${infoIcon}</button>
+                        </div>
+                    </div>
+                    <div class="buttons">
+                        <button class="button cancel ddg-vpo-cancel" type="button">${this.text.buttonOptOut}</button>
+                        <a class="button open ddg-vpo-open" href="#">${this.text.buttonOpen}</a>
+                    </div>
+                    <div class="remember">
+                        <div class="remember-label">
+                            <span class="remember-text"> ${this.text.rememberLabel} </span>
+                            <span class="remember-checkbox">
+                                <input id="remember" type="checkbox" name="ddg-remember" hidden />
+                                <button role="switch" aria-checked="false" class="switch ios-switch">
+                                    <span class="thumb"></span>
+                                </button>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `.toString();
+    }
+
+    /**
+     *
+     * @param {'in'|'out'} direction
+     */
+    animateOverlay(direction) {
+        if (!this.overlay) return;
+        this.animationState = 'animating';
+
+        switch (direction) {
+            case 'in':
+                this.overlay.classList.remove('animateOut');
+                this.overlay.classList.add('animateIn');
+                break;
+            case 'out':
+                this.overlay.classList.remove('animateIn');
+                this.overlay.classList.add('animateOut');
+                break;
+        }
+    }
+
+    /**
+     * @param {() => void} callback
+     */
+    onAnimationEnd(callback) {
+        if (this.animationState !== 'animating') callback();
+
+        this.overlay?.addEventListener(
+            'animationend',
+            () => {
+                callback();
+            },
+            { once: true },
+        );
+    }
+
+    /**
+     * @param {HTMLElement} [container]
+     * @returns
+     */
+    setupEventHandlers(container) {
+        if (!container) {
+            console.warn('Error setting up drawer component');
+            return;
+        }
+
+        const switchElem = container.querySelector('[role=switch]');
+        const infoButton = container.querySelector('.info-button');
+        const remember = container.querySelector('input[name="ddg-remember"]');
+        const cancelElement = container.querySelector('.ddg-vpo-cancel');
+        const watchInPlayer = container.querySelector('.ddg-vpo-open');
+        const background = container.querySelector('.ddg-mobile-drawer-background');
+        const overlay = container.querySelector('.ddg-mobile-drawer-overlay');
+        const drawer = container.querySelector('.ddg-mobile-drawer');
+
+        if (
+            !cancelElement ||
+            !watchInPlayer ||
+            !switchElem ||
+            !infoButton ||
+            !background ||
+            !overlay ||
+            !drawer ||
+            !(remember instanceof HTMLInputElement)
+        ) {
+            return console.warn('missing elements');
+        }
+
+        this.container = container;
+        this.overlay = /** @type {HTMLElement} */ (overlay);
+        this.drawer = /** @type {HTMLElement} */ (drawer);
+
+        infoButton.addEventListener('click', () => {
+            this.dispatchEvent(new Event(DDGVideoDrawerMobile.OPEN_INFO));
+        });
+
+        switchElem.addEventListener('pointerdown', () => {
+            const current = switchElem.getAttribute('aria-checked');
+            if (current === 'false') {
+                switchElem.setAttribute('aria-checked', 'true');
+                remember.checked = true;
+            } else {
+                switchElem.setAttribute('aria-checked', 'false');
+                remember.checked = false;
+            }
+        });
+
+        cancelElement.addEventListener('click', (e) => {
+            if (!e.isTrusted) return;
+            e.preventDefault();
+            e.stopImmediatePropagation();
+            this.animateOverlay('out');
+            this.dispatchEvent(new CustomEvent(DDGVideoDrawerMobile.OPT_OUT, { detail: { remember: remember.checked } }));
+        });
+
+        background.addEventListener('click', (e) => {
+            if (!e.isTrusted || e.target !== background) return;
+            e.preventDefault();
+            e.stopImmediatePropagation();
+            this.animateOverlay('out');
+
+            const mouseEvent = /** @type {MouseEvent} */ (e);
+            let eventName = DDGVideoDrawerMobile.DISMISS;
+            for (const element of document.elementsFromPoint(mouseEvent.clientX, mouseEvent.clientY)) {
+                if (element.tagName === DDGVideoThumbnailOverlay.CUSTOM_TAG_NAME.toUpperCase()) {
+                    eventName = DDGVideoDrawerMobile.THUMBNAIL_CLICK;
+                    break;
+                }
+            }
+
+            this.dispatchEvent(new CustomEvent(eventName));
+        });
+
+        watchInPlayer.addEventListener('click', (e) => {
+            if (!e.isTrusted) return;
+            e.preventDefault();
+            e.stopImmediatePropagation();
+            this.dispatchEvent(new CustomEvent(DDGVideoDrawerMobile.OPT_IN, { detail: { remember: remember.checked } }));
+        });
+
+        overlay.addEventListener('animationend', () => {
+            this.animationState = 'idle';
+        });
+    }
+}
diff --git a/injected/src/features/duckplayer/components/ddg-video-thumbnail-overlay-mobile.js b/injected/src/features/duckplayer/components/ddg-video-thumbnail-overlay-mobile.js
new file mode 100644
index 0000000000..f13911248f
--- /dev/null
+++ b/injected/src/features/duckplayer/components/ddg-video-thumbnail-overlay-mobile.js
@@ -0,0 +1,46 @@
+import mobilecss from '../assets/mobile-video-thumbnail-overlay.css';
+import { createPolicy, html } from '../../../dom-utils.js';
+
+/**
+ * @typedef {ReturnType<import("../text").overlayCopyVariants>} TextVariants
+ * @typedef {TextVariants[keyof TextVariants]} Text
+ */
+
+/**
+ * The custom element that we use to present our UI elements
+ * over the YouTube player
+ */
+export class DDGVideoThumbnailOverlay extends HTMLElement {
+    static CUSTOM_TAG_NAME = 'ddg-video-thumbnail-overlay-mobile';
+
+    policy = createPolicy();
+    /** @type {boolean} */
+    testMode = false;
+
+    connectedCallback() {
+        this.createMarkupAndStyles();
+    }
+
+    createMarkupAndStyles() {
+        const shadow = this.attachShadow({ mode: this.testMode ? 'open' : 'closed' });
+        const style = document.createElement('style');
+        style.innerText = mobilecss;
+        const container = document.createElement('div');
+        const content = this.mobileHtml();
+        container.innerHTML = this.policy.createHTML(content);
+        shadow.append(style, container);
+        this.container = container;
+    }
+
+    /**
+     * @returns {string}
+     */
+    mobileHtml() {
+        return html`
+            <div class="ddg-video-player-overlay">
+                <div class="bg ddg-vpo-bg"></div>
+                <div class="logo"></div>
+            </div>
+        `.toString();
+    }
+}
diff --git a/injected/src/features/duckplayer/components/index.js b/injected/src/features/duckplayer/components/index.js
index 730b22e9ec..4ab9f52e7e 100644
--- a/injected/src/features/duckplayer/components/index.js
+++ b/injected/src/features/duckplayer/components/index.js
@@ -1,6 +1,8 @@
 import { DDGVideoOverlay } from './ddg-video-overlay.js';
 import { customElementsDefine, customElementsGet } from '../../../captured-globals.js';
 import { DDGVideoOverlayMobile } from './ddg-video-overlay-mobile.js';
+import { DDGVideoThumbnailOverlay } from './ddg-video-thumbnail-overlay-mobile.js';
+import { DDGVideoDrawerMobile } from './ddg-video-drawer-mobile.js';
 
 /**
  * Register custom elements in this wrapper function to be called only when we need to
@@ -14,4 +16,10 @@ export function registerCustomElements() {
     if (!customElementsGet(DDGVideoOverlayMobile.CUSTOM_TAG_NAME)) {
         customElementsDefine(DDGVideoOverlayMobile.CUSTOM_TAG_NAME, DDGVideoOverlayMobile);
     }
+    if (!customElementsGet(DDGVideoDrawerMobile.CUSTOM_TAG_NAME)) {
+        customElementsDefine(DDGVideoDrawerMobile.CUSTOM_TAG_NAME, DDGVideoDrawerMobile);
+    }
+    if (!customElementsGet(DDGVideoThumbnailOverlay.CUSTOM_TAG_NAME)) {
+        customElementsDefine(DDGVideoThumbnailOverlay.CUSTOM_TAG_NAME, DDGVideoThumbnailOverlay);
+    }
 }
diff --git a/injected/src/features/duckplayer/overlay-messages.js b/injected/src/features/duckplayer/overlay-messages.js
index a394f6e25b..6f9ab8f928 100644
--- a/injected/src/features/duckplayer/overlay-messages.js
+++ b/injected/src/features/duckplayer/overlay-messages.js
@@ -156,7 +156,8 @@ export class Pixel {
      * @param {{name: "overlay"}
      *   | {name: "play.use", remember: "0" | "1"}
      *   | {name: "play.use.thumbnail"}
-     *   | {name: "play.do_not_use", remember: "0" | "1"}} input
+     *   | {name: "play.do_not_use", remember: "0" | "1"}
+     *   | {name: "play.do_not_use.thumbnail"}} input
      */
     constructor(input) {
         this.input = input;
@@ -176,6 +177,8 @@ export class Pixel {
             case 'play.do_not_use': {
                 return { remember: this.input.remember };
             }
+            case 'play.do_not_use.thumbnail':
+                return {};
             default:
                 throw new Error('unreachable');
         }
diff --git a/injected/src/features/duckplayer/video-overlay.js b/injected/src/features/duckplayer/video-overlay.js
index fc391f2c82..e308ce2486 100644
--- a/injected/src/features/duckplayer/video-overlay.js
+++ b/injected/src/features/duckplayer/video-overlay.js
@@ -25,12 +25,14 @@
  *   - if the user previously clicked 'watch here + remember', just add the small dax
  *   - otherwise, stop the video playing + append our overlay
  */
-import { SideEffects, VideoParams } from './util.js';
+import { SideEffects, VideoParams, appendImageAsBackground } from './util.js';
 import { DDGVideoOverlay } from './components/ddg-video-overlay.js';
 import { OpenInDuckPlayerMsg, Pixel } from './overlay-messages.js';
 import { IconOverlay } from './icon-overlay.js';
 import { mobileStrings } from './text.js';
 import { DDGVideoOverlayMobile } from './components/ddg-video-overlay-mobile.js';
+import { DDGVideoThumbnailOverlay } from './components/ddg-video-thumbnail-overlay-mobile.js';
+import { DDGVideoDrawerMobile } from './components/ddg-video-drawer-mobile.js';
 
 /**
  * Handle the switch between small & large overlays
@@ -177,8 +179,9 @@ export class VideoOverlay {
              * Don't continue until we've been able to find the HTML elements that we inject into
              */
             const videoElement = document.querySelector(this.settings.selectors.videoElement);
-            const playerContainer = document.querySelector(this.settings.selectors.videoElementContainer);
-            if (!videoElement || !playerContainer) {
+            const targetElement = document.querySelector(this.settings.selectors.videoElementContainer);
+
+            if (!videoElement || !targetElement) {
                 return null;
             }
 
@@ -217,50 +220,120 @@ export class VideoOverlay {
 
                 // if we get here, we're trying to prevent the video playing
                 this.stopVideoFromPlaying();
-                this.appendOverlayToPage(playerContainer, params);
+
+                if (this.environment.layout === 'mobile') {
+                    if (this.shouldShowDrawerVariant()) {
+                        const drawerTargetElement = document.querySelector(/** @type {string} */ (this.settings.selectors.drawerContainer));
+                        if (drawerTargetElement) {
+                            return this.appendMobileDrawer(targetElement, drawerTargetElement, params);
+                        }
+                    }
+
+                    return this.appendMobileOverlay(targetElement, params);
+                }
+
+                return this.appendDesktopOverlay(targetElement, params);
             }
         }
     }
 
+    shouldShowDrawerVariant() {
+        return this.settings.videoDrawer?.state === 'enabled' && this.settings.selectors.drawerContainer;
+    }
+
+    /**
+     * @param {Element} targetElement
+     * @param {import("./util").VideoParams} params
+     */
+    appendMobileOverlay(targetElement, params) {
+        this.messages.sendPixel(new Pixel({ name: 'overlay' }));
+
+        this.sideEffects.add(`appending ${DDGVideoOverlayMobile.CUSTOM_TAG_NAME} to the page`, () => {
+            const elem = /** @type {DDGVideoOverlayMobile} */ (document.createElement(DDGVideoOverlayMobile.CUSTOM_TAG_NAME));
+            elem.testMode = this.environment.isTestMode();
+            elem.text = mobileStrings(this.environment.strings);
+            elem.addEventListener(DDGVideoOverlayMobile.OPEN_INFO, () => this.messages.openInfo());
+            elem.addEventListener(DDGVideoOverlayMobile.OPT_OUT, (/** @type {CustomEvent<{remember: boolean}>} */ e) => {
+                return this.mobileOptOut(e.detail.remember).catch(console.error);
+            });
+            elem.addEventListener(DDGVideoOverlayMobile.OPT_IN, (/** @type {CustomEvent<{remember: boolean}>} */ e) => {
+                return this.mobileOptIn(e.detail.remember, params).catch(console.error);
+            });
+            targetElement.appendChild(elem);
+
+            return () => {
+                document.querySelector(DDGVideoOverlayMobile.CUSTOM_TAG_NAME)?.remove();
+            };
+        });
+    }
+
     /**
      * @param {Element} targetElement
+     * @param {Element} drawerTargetElement
      * @param {import("./util").VideoParams} params
      */
-    appendOverlayToPage(targetElement, params) {
-        this.sideEffects.add(`appending ${DDGVideoOverlay.CUSTOM_TAG_NAME} or ${DDGVideoOverlayMobile.CUSTOM_TAG_NAME} to the page`, () => {
-            this.messages.sendPixel(new Pixel({ name: 'overlay' }));
-            const controller = new AbortController();
-            const { environment } = this;
-
-            if (this.environment.layout === 'mobile') {
-                const elem = /** @type {DDGVideoOverlayMobile} */ (document.createElement(DDGVideoOverlayMobile.CUSTOM_TAG_NAME));
-                elem.testMode = this.environment.isTestMode();
-                elem.text = mobileStrings(this.environment.strings);
-                elem.addEventListener(DDGVideoOverlayMobile.OPEN_INFO, () => this.messages.openInfo());
-                elem.addEventListener(DDGVideoOverlayMobile.OPT_OUT, (/** @type {CustomEvent<{remember: boolean}>} */ e) => {
+    appendMobileDrawer(targetElement, drawerTargetElement, params) {
+        this.messages.sendPixel(new Pixel({ name: 'overlay' }));
+
+        this.sideEffects.add(
+            `appending ${DDGVideoDrawerMobile.CUSTOM_TAG_NAME} and ${DDGVideoThumbnailOverlay.CUSTOM_TAG_NAME} to the page`,
+            () => {
+                const thumbnailOverlay = /** @type {DDGVideoThumbnailOverlay} */ (
+                    document.createElement(DDGVideoThumbnailOverlay.CUSTOM_TAG_NAME)
+                );
+                thumbnailOverlay.testMode = this.environment.isTestMode();
+                targetElement.appendChild(thumbnailOverlay);
+
+                const drawer = /** @type {DDGVideoDrawerMobile} */ (document.createElement(DDGVideoDrawerMobile.CUSTOM_TAG_NAME));
+                drawer.testMode = this.environment.isTestMode();
+                drawer.text = mobileStrings(this.environment.strings);
+                drawer.addEventListener(DDGVideoDrawerMobile.OPEN_INFO, () => this.messages.openInfo());
+                drawer.addEventListener(DDGVideoDrawerMobile.OPT_OUT, (/** @type {CustomEvent<{remember: boolean}>} */ e) => {
                     return this.mobileOptOut(e.detail.remember).catch(console.error);
                 });
-                elem.addEventListener(DDGVideoOverlayMobile.OPT_IN, (/** @type {CustomEvent<{remember: boolean}>} */ e) => {
-                    return this.mobileOptIn(e.detail.remember, params).catch(console.error);
+                drawer.addEventListener(DDGVideoDrawerMobile.DISMISS, () => {
+                    return this.mobileOptOut(false).catch(console.error); // Dismissal should not persist user's choice. Ignore remember-me value.
                 });
-                targetElement.appendChild(elem);
-            } else {
-                const elem = new DDGVideoOverlay({
-                    environment,
-                    params,
-                    ui: this.ui,
-                    manager: this,
+                drawer.addEventListener(DDGVideoDrawerMobile.THUMBNAIL_CLICK, () => {
+                    return this.videoThumbnailClick();
                 });
-                targetElement.appendChild(elem);
-            }
+                drawer.addEventListener(DDGVideoDrawerMobile.OPT_IN, (/** @type {CustomEvent<{remember: boolean}>} */ e) => {
+                    return this.mobileOptIn(e.detail.remember, params).catch(console.error);
+                });
+                drawerTargetElement.appendChild(drawer);
+
+                if (thumbnailOverlay.container) {
+                    this.appendThumbnail(thumbnailOverlay.container);
+                }
+
+                return () => {
+                    document.querySelector(DDGVideoThumbnailOverlay.CUSTOM_TAG_NAME)?.remove();
+                    drawer?.onAnimationEnd(() => {
+                        document.querySelector(DDGVideoDrawerMobile.CUSTOM_TAG_NAME)?.remove();
+                    });
+                };
+            },
+        );
+    }
+
+    /**
+     * @param {Element} targetElement
+     * @param {import("./util").VideoParams} params
+     */
+    appendDesktopOverlay(targetElement, params) {
+        this.messages.sendPixel(new Pixel({ name: 'overlay' }));
+
+        this.sideEffects.add(`appending ${DDGVideoOverlay.CUSTOM_TAG_NAME} to the page`, () => {
+            const elem = new DDGVideoOverlay({
+                environment: this.environment,
+                params,
+                ui: this.ui,
+                manager: this,
+            });
+            targetElement.appendChild(elem);
 
-            /**
-             * To cleanup just find and remove the element
-             */
             return () => {
                 document.querySelector(DDGVideoOverlay.CUSTOM_TAG_NAME)?.remove();
-                document.querySelector(DDGVideoOverlayMobile.CUSTOM_TAG_NAME)?.remove();
-                controller.abort();
             };
         });
     }
@@ -296,6 +369,17 @@ export class VideoOverlay {
         });
     }
 
+    /**
+     * @param {HTMLElement} overlayElement
+     */
+    appendThumbnail(overlayElement) {
+        const params = VideoParams.forWatchPage(this.environment.getPlayerPageHref());
+        const videoId = params?.id;
+
+        const imageUrl = this.environment.getLargeThumbnailSrc(videoId);
+        appendImageAsBackground(overlayElement, '.ddg-vpo-bg', imageUrl);
+    }
+
     /**
      * If the checkbox was checked, this action means that we want to 'always'
      * use the private player
@@ -424,6 +508,13 @@ export class VideoOverlay {
         this.destroy();
     }
 
+    videoThumbnailClick() {
+        const pixel = new Pixel({ name: 'play.do_not_use.thumbnail' });
+        this.messages.sendPixel(pixel);
+
+        return this.destroy();
+    }
+
     /**
      * Remove elements, event listeners etc
      */
diff --git a/package-lock.json b/package-lock.json
index fe405b9c65..21fd8f4038 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -39,7 +39,7 @@
       },
       "devDependencies": {
         "@canvas/image-data": "^1.0.0",
-        "@duckduckgo/privacy-configuration": "github:duckduckgo/privacy-configuration#main",
+        "@duckduckgo/privacy-configuration": "github:duckduckgo/privacy-configuration#e159899e1301fb36c76fd60126f9840a70dd2c3a",
         "@fingerprintjs/fingerprintjs": "^4.5.1",
         "@types/chrome": "^0.0.308",
         "@types/jasmine": "^5.1.7",
@@ -250,8 +250,8 @@
     },
     "node_modules/@duckduckgo/privacy-configuration": {
       "version": "1.0.0",
-      "resolved": "git+ssh://git@github.com/duckduckgo/privacy-configuration.git#d0a9295dc20c270c0799e7289d05b404a8f55b9f",
-      "integrity": "sha512-9QDuYwCyHQbJL9KUz1edsYDLEZwtryT/54m3CHn18jm4o1Z59KR+Wexk08HoSK3ibh5St5Tlie+Da8Tnze7MFg==",
+      "resolved": "git+ssh://git@github.com/duckduckgo/privacy-configuration.git#e159899e1301fb36c76fd60126f9840a70dd2c3a",
+      "integrity": "sha512-qfShbMTeteTOW3SR4XSNJk8+rVEIymzLnNvfKR59V3cLRPUi/Leki8zeSG54rsEV/4clSie0Nzf+QWvIdxYy8A==",
       "dev": true,
       "license": "Apache 2.0",
       "dependencies": {