diff --git a/special-pages/pages/new-tab/app/components/App.js b/special-pages/pages/new-tab/app/components/App.js
index d39c23115..fa41764f8 100644
--- a/special-pages/pages/new-tab/app/components/App.js
+++ b/special-pages/pages/new-tab/app/components/App.js
@@ -28,7 +28,7 @@ export function App({ children }) {
 
     return (
         <div class={cn(styles.layout)} ref={wrapperRef} data-drawer-visibility={visibility}>
-            <main class={cn(styles.main)}>
+            <main class={cn(styles.main)} data-customizer-kind={customizerKind}>
                 <div class={styles.tube} data-platform={platformName}>
                     <WidgetList />
                     <CustomizerMenuPositionedFixed>
diff --git a/special-pages/pages/new-tab/app/components/App.module.css b/special-pages/pages/new-tab/app/components/App.module.css
index 27eadf021..0569e5b0a 100644
--- a/special-pages/pages/new-tab/app/components/App.module.css
+++ b/special-pages/pages/new-tab/app/components/App.module.css
@@ -44,9 +44,12 @@ body:has([data-reset-layout="true"]) .tube {
 }
 
 .main {
-    overflow: hidden;
-    height: 100vh;
+    &[data-customizer-kind="drawer"] {
+        overflow: hidden;
+        height: 100vh;
+    }
 }
+
 .active {}
 
 .aside {
diff --git a/special-pages/pages/new-tab/app/components/Icons.module.css b/special-pages/pages/new-tab/app/components/Icons.module.css
index 97ae7c49d..084256dc7 100644
--- a/special-pages/pages/new-tab/app/components/Icons.module.css
+++ b/special-pages/pages/new-tab/app/components/Icons.module.css
@@ -1,5 +1,6 @@
 .chevronButton {
-    &:hover .chevronCircle {
+    transition: all .3s;
+    .chevronCircle {
         fill: black;
         fill-opacity: 0.06;
 
@@ -10,11 +11,6 @@
     }
 }
 
-.chevronCircle {
-    transition: all .3s;
-    fill-opacity: 0;
-}
-
 .chevronArrow {
     @media screen and (prefers-color-scheme: dark) {
         fill: white;
diff --git a/special-pages/pages/new-tab/app/components/ShowHide.module.css b/special-pages/pages/new-tab/app/components/ShowHide.module.css
index 0295d16b2..cd4a74908 100644
--- a/special-pages/pages/new-tab/app/components/ShowHide.module.css
+++ b/special-pages/pages/new-tab/app/components/ShowHide.module.css
@@ -19,6 +19,23 @@
         border-radius: 50%;
         padding-inline: 0;
 
+        svg rect {
+            fill-opacity: 0;
+        }
+
+        &:hover {
+            transition: all 0.3s ease-in;
+            svg rect {
+                fill: black;
+                fill-opacity: 0.06;
+    
+                @media screen and (prefers-color-scheme: dark) {
+                    fill: white;
+                    fill-opacity: 0.12;
+                }
+            }
+        } 
+
         &:focus-visible {
             box-shadow: var(--focus-ring);
         }
diff --git a/special-pages/pages/new-tab/app/customizer/components/Customizer.module.css b/special-pages/pages/new-tab/app/customizer/components/Customizer.module.css
index 03ed7b108..0e1d53cf9 100644
--- a/special-pages/pages/new-tab/app/customizer/components/Customizer.module.css
+++ b/special-pages/pages/new-tab/app/customizer/components/Customizer.module.css
@@ -27,6 +27,7 @@
     padding: var(--sp-2) var(--sp-3);
     cursor: pointer;
     display: flex;
+    align-items: center;
     gap: calc(6 * var(--px-in-rem));
     color: var(--ntp-text-normal);
 
diff --git a/special-pages/pages/new-tab/app/index.js b/special-pages/pages/new-tab/app/index.js
index 4386859c0..5239a2233 100644
--- a/special-pages/pages/new-tab/app/index.js
+++ b/special-pages/pages/new-tab/app/index.js
@@ -69,14 +69,14 @@ export async function init(root, messaging, telemetry, baseEnvironment) {
         messaging.reportPageException({ message });
     };
 
+    // install global side effects that are not specific to any widget
+    installGlobalSideEffects(environment, settings);
+
     // return early if we're in the 'components' view.
     if (environment.display === 'components') {
         return renderComponents(root, environment, settings, strings);
     }
 
-    // install global side effects that are not specific to any widget
-    installGlobalSideEffects(environment, settings);
-
     // Resolve the entry points for each selected widget
     const entryPoints = await resolveEntryPoints(init.widgets, didCatch);
 
diff --git a/special-pages/pages/new-tab/app/next-steps/components/NextSteps.module.css b/special-pages/pages/new-tab/app/next-steps/components/NextSteps.module.css
index d2acb8fa1..21ca36c21 100644
--- a/special-pages/pages/new-tab/app/next-steps/components/NextSteps.module.css
+++ b/special-pages/pages/new-tab/app/next-steps/components/NextSteps.module.css
@@ -21,8 +21,9 @@
 }
 
 .title {
+    font-size: var(--body-font-size);
     font-weight: 590;
-    line-height: var(--sp-4);
+    line-height: var(--body-line-height);
     letter-spacing: -0.08px;
     color: var(--ntp-text-normal);
     margin-bottom: var(--sp-1);
@@ -131,15 +132,18 @@
 
     div {
         background-color: var(--ntp-color-primary);
-        font-size: calc(11 * var(--px-in-rem));
         height: calc(20 * var(--px-in-rem));
-        line-height: normal;
-        font-weight: 600;
-        letter-spacing: 0.06px;
-        color: var(--ntp-text-on-primary);
         display: flex;
         align-items: center;
         justify-content: center;
+        
+        h2 {
+            color: var(--ntp-text-on-primary);
+            letter-spacing: 0.06px;
+            font-weight: 600;
+            line-height: normal;
+            font-size: calc(11 * var(--px-in-rem));
+        }
     }
 }
 
@@ -160,7 +164,6 @@
 :root:has(body[data-platform-name="windows"]) {
     .nextStepsCard .title {
         font-weight: 700;
-        line-height: calc(20 * var(--px-in-rem));
         letter-spacing: normal;
     }
 }
\ No newline at end of file
diff --git a/special-pages/pages/new-tab/app/next-steps/components/NextStepsCard.js b/special-pages/pages/new-tab/app/next-steps/components/NextStepsCard.js
index a769ada96..9e8103e48 100644
--- a/special-pages/pages/new-tab/app/next-steps/components/NextStepsCard.js
+++ b/special-pages/pages/new-tab/app/next-steps/components/NextStepsCard.js
@@ -17,7 +17,7 @@ export function NextStepsCard({ type, dismiss, action }) {
     return (
         <div class={styles.card}>
             <img src={`./icons/${message.icon}-128.svg`} alt="" class={styles.icon} />
-            <p class={styles.title}>{message.title}</p>
+            <h3 class={styles.title}>{message.title}</h3>
             <p class={styles.description}>{message.summary}</p>
             <button class={styles.btn} onClick={() => action(message.id)}>
                 {message.actionText}
diff --git a/special-pages/pages/new-tab/app/next-steps/components/NextStepsGroup.js b/special-pages/pages/new-tab/app/next-steps/components/NextStepsGroup.js
index 4e76c3460..d8f1b19ff 100644
--- a/special-pages/pages/new-tab/app/next-steps/components/NextStepsGroup.js
+++ b/special-pages/pages/new-tab/app/next-steps/components/NextStepsGroup.js
@@ -79,7 +79,7 @@ export function NextStepsBubbleHeader() {
                 />
             </svg>
             <div>
-                <p>{text}</p>
+                <h2>{text}</h2>
             </div>
             <svg xmlns="http://www.w3.org/2000/svg" width="10" height="20" viewBox="0 0 10 20" fill="none">
                 <path
diff --git a/special-pages/pages/new-tab/app/next-steps/integrations-tests/next-steps.spec.js b/special-pages/pages/new-tab/app/next-steps/integrations-tests/next-steps.spec.js
index 3e3056101..8d677b66c 100644
--- a/special-pages/pages/new-tab/app/next-steps/integrations-tests/next-steps.spec.js
+++ b/special-pages/pages/new-tab/app/next-steps/integrations-tests/next-steps.spec.js
@@ -54,7 +54,7 @@ test.describe('newtab NextSteps cards', () => {
         // expand the section
         await page.getByLabel('Show More', { exact: true }).click();
 
-        await expect(page.locator('p').filter({ hasText: 'Block Cookie Pop-ups' })).toBeVisible();
+        await expect(page.locator('h3').filter({ hasText: 'Block Cookie Pop-ups' })).toBeVisible();
         await page.getByRole('button', { name: 'Try DuckPlayer' }).click();
         await ntp.mocks.waitForCallCount({ method: 'nextSteps_action', count: 1 });
     });
diff --git a/special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.js b/special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.js
index f18c37dc9..daa72bc01 100644
--- a/special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.js
+++ b/special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.js
@@ -103,8 +103,8 @@ export function Heading({ expansion, trackerCompanies, onToggle, buttonAttrs = {
             <span className={styles.headingIcon}>
                 <img src="./icons/shield.svg" alt="Privacy Shield" />
             </span>
-            {none && <p className={styles.title}>{t('stats_noRecent')}</p>}
-            {some && <p className={styles.title}>{alltimeTitle}</p>}
+            {none && <h2 className={styles.title}>{t('stats_noRecent')}</h2>}
+            {some && <h2 className={styles.title}>{alltimeTitle}</h2>}
             {recent > 0 && (
                 <span className={styles.widgetExpander}>
                     <ShowHideButton
diff --git a/special-pages/pages/new-tab/app/remote-messaging-framework/components/RemoteMessagingFramework.js b/special-pages/pages/new-tab/app/remote-messaging-framework/components/RemoteMessagingFramework.js
index d8339b466..88c97b3f2 100644
--- a/special-pages/pages/new-tab/app/remote-messaging-framework/components/RemoteMessagingFramework.js
+++ b/special-pages/pages/new-tab/app/remote-messaging-framework/components/RemoteMessagingFramework.js
@@ -1,9 +1,11 @@
-import { h } from 'preact';
+import { h, Fragment } from 'preact';
 import cn from 'classnames';
 import styles from './RemoteMessagingFramework.module.css';
 import { useContext } from 'preact/hooks';
 import { RMFContext } from '../RMFProvider.js';
 import { DismissButton } from '../../components/DismissButton';
+import { Button } from '../../../../../shared/components/Button/Button';
+import { usePlatformName } from '../../settings.provider';
 
 /**
  * @import { RMFMessage } from "../../../../../types/new-tab"
@@ -16,6 +18,8 @@ import { DismissButton } from '../../components/DismissButton';
 
 export function RemoteMessagingFramework({ message, primaryAction, secondaryAction, dismiss }) {
     const { id, messageType, titleText, descriptionText } = message;
+    const platform = usePlatformName();
+
     return (
         <div id={id} class={cn(styles.root, messageType !== 'small' && message.icon && styles.icon)}>
             {messageType !== 'small' && message.icon && (
@@ -24,28 +28,45 @@ export function RemoteMessagingFramework({ message, primaryAction, secondaryActi
                 </span>
             )}
             <div class={styles.content}>
-                <p class={styles.title}>{titleText}</p>
+                <h2 class={styles.title}>{titleText}</h2>
                 <p class={styles.description}>{descriptionText}</p>
                 {messageType === 'big_two_action' && (
                     <div class={styles.btnRow}>
-                        {primaryAction && message.primaryActionText.length > 0 && (
-                            <button class={cn(styles.btn, styles.primary)} onClick={() => primaryAction(id)}>
-                                {message.primaryActionText}
-                            </button>
-                        )}
-                        {secondaryAction && message.secondaryActionText.length > 0 && (
-                            <button class={cn(styles.btn, styles.secondary)} onClick={() => secondaryAction(id)}>
-                                {message.secondaryActionText}
-                            </button>
+                        {platform === 'windows' ? (
+                            <Fragment>
+                                {primaryAction && message.primaryActionText.length > 0 && (
+                                    <Button variant={'accentBrand'} onClick={() => primaryAction(id)}>
+                                        {message.primaryActionText}
+                                    </Button>
+                                )}
+                                {secondaryAction && message.secondaryActionText.length > 0 && (
+                                    <Button variant={'standard'} onClick={() => secondaryAction(id)}>
+                                        {message.secondaryActionText}
+                                    </Button>
+                                )}
+                            </Fragment>
+                        ) : (
+                            <Fragment>
+                                {secondaryAction && message.secondaryActionText.length > 0 && (
+                                    <Button variant={'standard'} onClick={() => secondaryAction(id)}>
+                                        {message.secondaryActionText}
+                                    </Button>
+                                )}
+                                {primaryAction && message.primaryActionText.length > 0 && (
+                                    <Button variant={'accentBrand'} onClick={() => primaryAction(id)}>
+                                        {message.primaryActionText}
+                                    </Button>
+                                )}
+                            </Fragment>
                         )}
                     </div>
                 )}
             </div>
             {messageType === 'big_single_action' && message.primaryActionText && primaryAction && (
                 <div class={styles.btnBlock}>
-                    <button class={cn(styles.btn)} onClick={() => primaryAction(id)}>
+                    <Button variant="standard" onClick={() => primaryAction(id)}>
                         {message.primaryActionText}
-                    </button>
+                    </Button>
                 </div>
             )}
             <DismissButton className={styles.dismissBtn} onClick={() => dismiss(id)} />
diff --git a/special-pages/pages/new-tab/app/remote-messaging-framework/components/RemoteMessagingFramework.module.css b/special-pages/pages/new-tab/app/remote-messaging-framework/components/RemoteMessagingFramework.module.css
index 02fbe91e8..3d79daa0b 100644
--- a/special-pages/pages/new-tab/app/remote-messaging-framework/components/RemoteMessagingFramework.module.css
+++ b/special-pages/pages/new-tab/app/remote-messaging-framework/components/RemoteMessagingFramework.module.css
@@ -31,17 +31,18 @@
 
 .content {
     flex-grow: 1;
-    font-size: calc(14 * var(--px-in-rem));
 }
 
 .title {
+    font-size: var(--body-font-size);
     font-weight: var(--title-2-font-weight);
     line-height: normal;
     margin-bottom: var(--sp-1);
 }
 
 .description {
-    line-height: 1.25rem;
+    font-size: var(--body-font-size);
+    line-height: var(--body-line-height);
 }
 
 .btnBlock {
@@ -56,96 +57,6 @@
     gap: calc(10 * var(--px-in-rem));
 }
 
-.btn {
-    padding-left: var(--sp-3);
-    padding-right: var(--sp-3);
-    height: var(--sp-8);
-    background-color: var(--color-black-at-6);
-    border-width: 0;
-    border-radius: var(--border-radius-sm);
-    text-wrap: nowrap;
-
-    &:hover {
-        background-color: var(--color-black-at-9);
-        cursor: pointer;
-    }
-
-    &:active {
-        background-color: var(--color-black-at-12);
-    }
-
-    &:disabled {
-        color: var(--color-black-at-84);
-    }
-
-    &:disabled:hover {
-        cursor: not-allowed;
-        background-color: var(--color-white-at-6);
-    }
-
-    &:focus-visible {
-        outline: none;
-        box-shadow: var(--focus-ring);
-    }
-
-    @media screen and (prefers-color-scheme: dark) {
-        color: var(--color-white-at-84);
-        background-color: var(--color-white-at-12);
-
-        &:hover {
-            background-color: var(--color-white-at-18);
-        }
-
-        &:active {
-            background-color: var(--color-white-at-24);
-        }
-
-        &:disabled {
-            color: var(--color-white-at-12);
-            opacity: 0.8;
-        }
-
-        &:disabled:hover {
-            cursor: not-allowed;
-            background-color: var(--color-white-at-12);
-        }
-    }
-}
-
-
-.primary {
-    background-color: var(--ddg-color-primary);
-    color: var(--color-white);
-    position: relative;
-
-
-    &:hover {
-        background-color: var(--color-blue-60);
-    }
-
-    &:active {
-        background-color: var(--color-blue-70);
-    }
-
-    @media screen and (prefers-color-scheme: dark) {
-        color: var(--color-black-at-84);
-        background-color: var(--color-blue-20);
-
-        &:hover {
-            background-color: var(--color-blue-30);
-        }
-
-        &:active {
-            background-color: var(--color-blue-40);
-        }
-
-        &:disabled {
-            background-color: var(--color-white-at-36);
-            color: var(--color-black-at-84);
-        }
-    }
-}
-
 .dismissBtn {
     position: absolute;
     top: 0.5rem;
diff --git a/special-pages/pages/new-tab/app/styles/base.css b/special-pages/pages/new-tab/app/styles/base.css
index cf2c81832..f850543ab 100644
--- a/special-pages/pages/new-tab/app/styles/base.css
+++ b/special-pages/pages/new-tab/app/styles/base.css
@@ -64,6 +64,11 @@ li {
     margin: 0;
     padding: 0;
 }
+
+button {
+    text-wrap: nowrap;
+}
+
 .sr-only {
     position: absolute;
     width: 1px;
diff --git a/special-pages/shared/components/Button/Button.js b/special-pages/shared/components/Button/Button.js
index a900ec371..7441d59a9 100644
--- a/special-pages/shared/components/Button/Button.js
+++ b/special-pages/shared/components/Button/Button.js
@@ -5,7 +5,7 @@ import styles from './Button.module.css';
 /**
  * @param {object} props
  * @param {string} [props.className]
- * @param {'primary'|'standard'|'accent'|'ghost'} [props.variant]
+ * @param {'primary'|'standard'|'accent'|'accentBrand'|'ghost'} [props.variant]
  * @param {'button'|'submit'|'reset'} [props.type]
  * @param {import("preact").ComponentChild} props.children
  * @param {import("preact").JSX.MouseEventHandler<EventTarget>} [props.onClick]
diff --git a/special-pages/shared/components/Button/Button.module.css b/special-pages/shared/components/Button/Button.module.css
index 032c15f32..7e46168b4 100644
--- a/special-pages/shared/components/Button/Button.module.css
+++ b/special-pages/shared/components/Button/Button.module.css
@@ -3,6 +3,7 @@
     background: var(--button-bg);
     color: var(--button-text);
     cursor: pointer;
+    position: relative;
 }
 
 /* macOS Base Style */
@@ -128,7 +129,8 @@ body:not([data-platform-name]) {
         /* TODO: No difference on hover according to Figma(?) */
     }
 
-    &.accent {
+    &.accent, 
+    &.accentBrand {
         --button-bg: var(--macos-control-accent-branded-background-rest);
         --button-text: var(--color-white);
         --button-shadow: var(--macos-control-accent-shadow);
@@ -218,3 +220,99 @@ body:not([data-platform-name]) {
     }
 }
 
+/* Windows Implementation */
+[data-platform-name="windows"] {
+    .button {
+        /* this is the focus ring used on NTP widgets */
+    --focus-ring: 0px 0px 0px 1px var(--color-white), 0px 0px 0px 3px var(--color-black);
+
+        border-radius: var(--border-radius-sm);
+        height: var(--sp-8);
+        border-width: 0;
+        padding-inline: var(--sp-3);
+
+        &:focus-visible {
+            outline: none;
+            box-shadow: var(--focus-ring);
+        }
+
+    &.standard {
+        background-color: var(--color-black-at-6);
+        border-width: 0;
+
+        &:hover {
+            background-color: var(--color-black-at-9);
+            cursor: pointer;
+        }
+
+        &:active {
+            background-color: var(--color-black-at-12);
+        }
+
+        &:disabled {
+            color: var(--color-black-at-84);
+        }
+
+        &:disabled:hover {
+            cursor: not-allowed;
+            background-color: var(--color-white-at-6);
+        }
+    }
+
+    &.accentBrand {
+        background-color: var(--ddg-color-primary);
+        color: var(--color-white);
+
+        &:hover {
+            background-color: var(--color-blue-60);
+        }
+
+        &:active {
+            background-color: var(--color-blue-70);
+        }    
+    }
+
+    @media screen and (prefers-color-scheme: dark) {
+        --focus-ring: 0px 0px 0px 1px var(--color-black), 0px 0px 0px 3px var(--color-white);
+
+        &.standard {
+            color: var(--color-white-at-84);
+            background-color: var(--color-white-at-12);
+    
+            &:hover {
+                background-color: var(--color-white-at-18);
+            }
+    
+            &:active {
+                background-color: var(--color-white-at-24);
+            }
+    
+            &:disabled {
+                color: var(--color-white-at-12);
+                opacity: 0.8;
+            }
+    
+            &:disabled:hover {
+                background-color: var(--color-white-at-12);
+            }
+        }
+
+        &.accentBrand {
+            color: var(--color-black-at-84);
+            background-color: var(--color-blue-20);
+    
+            &:hover {
+                background-color: var(--color-blue-30);
+            }
+    
+            &:active {
+                background-color: var(--color-blue-40);
+            }
+    
+            &:disabled {
+                background-color: var(--color-white-at-36);
+                color: var(--color-black-at-84);
+            }
+        }
+    }
+}}