diff --git a/apps/comments-ui/src/components/content/CTABox.tsx b/apps/comments-ui/src/components/content/CTABox.tsx
index bfd37492dc..3b71e48dd9 100644
--- a/apps/comments-ui/src/components/content/CTABox.tsx
+++ b/apps/comments-ui/src/components/content/CTABox.tsx
@@ -33,12 +33,12 @@ const CTABox: React.FC<Props> = ({isFirst, isPaid}) => {
             <p className="mb-[28px] w-full px-0 text-center font-sans text-[16px] leading-normal text-neutral-600 dark:text-[rgba(255,255,255,0.85)] sm:max-w-screen-sm sm:px-8">
                 Become a {isPaid && 'paid'} member of <span className="font-semibold">{publication}</span> to start commenting.
             </p>
-            <button className="font-san mb-[12px] inline-block rounded px-5 py-[14px] font-medium leading-none text-white transition-all hover:opacity-90" style={buttonStyle} type="button" onClick={handleSignUpClick}>
+            <button className="font-san mb-[12px] inline-block rounded px-5 py-[14px] font-medium leading-none text-white transition-all hover:opacity-90" data-testid="signup-button" style={buttonStyle} type="button" onClick={handleSignUpClick}>
                 {(isPaid && member) ? 'Upgrade now' : 'Sign up now'}
             </button>
             {!member && (<p className="text-center font-sans text-sm text-[rgba(0,0,0,0.4)] dark:text-[rgba(255,255,255,0.5)]">
                 <span className='mr-1 inline-block text-[15px]'>Already a member?</span>
-                <button className="rounded-md text-sm font-semibold transition-all hover:opacity-90" style={linkStyle} type="button" onClick={handleSignInClick}>Sign in</button>
+                <button className="rounded-md text-sm font-semibold transition-all hover:opacity-90" data-testid="signin-button" style={linkStyle} type="button" onClick={handleSignInClick}>Sign in</button>
             </p>)}
         </section>
     );
diff --git a/apps/comments-ui/src/index.tsx b/apps/comments-ui/src/index.tsx
index 9c01cffcab..41f28a5506 100644
--- a/apps/comments-ui/src/index.tsx
+++ b/apps/comments-ui/src/index.tsx
@@ -56,7 +56,7 @@ function getSiteData(scriptTag: HTMLElement) {
     const postId = dataset.postId;
     const colorScheme = dataset.colorScheme;
     const avatarSaturation = dataset.avatarSaturation ? parseInt(dataset.avatarSaturation) : undefined;
-    const accentColor = dataset.accentColor;
+    const accentColor = dataset.accentColor ?? '#000000';
     const commentsEnabled = dataset.commentsEnabled;
     const title = dataset.title === 'null' ? null : dataset.title;
     const showCount = dataset.count === 'true';
diff --git a/apps/comments-ui/test/e2e/options.test.ts b/apps/comments-ui/test/e2e/options.test.ts
index 59502a840a..9936880da4 100644
--- a/apps/comments-ui/test/e2e/options.test.ts
+++ b/apps/comments-ui/test/e2e/options.test.ts
@@ -215,5 +215,66 @@ test.describe('Options', async () => {
             expect(saturation).toBe(1);
         });
     });
+
+    test.describe('Accent color', () => {
+        test('Uses default accent color', async ({page}) => {
+            const mockedApi = new MockedApi({});
+            mockedApi.addComment();
+
+            const {frame} = await initialize({
+                mockedApi,
+                page,
+                publication: 'Publisher Weekly'
+            });
+
+            const signupButton = await frame.getByTestId('signup-button');
+
+            // Get computed background color
+            const color = await signupButton.evaluate((node) => {
+                const style = window.getComputedStyle(node);
+                return style.getPropertyValue('background-color');
+            });
+            expect(color).toBe('rgb(0, 0, 0)');
+
+            const signinButton = await frame.getByTestId('signin-button');
+
+            // Get computed text color
+            const textColor = await signinButton.evaluate((node) => {
+                const style = window.getComputedStyle(node);
+                return style.getPropertyValue('color');
+            });
+            expect(textColor).toBe('rgb(0, 0, 0)');
+        });
+
+        test('Uses accentColor option', async ({page}) => {
+            const mockedApi = new MockedApi({});
+            mockedApi.addComment();
+
+            const {frame} = await initialize({
+                mockedApi,
+                page,
+                publication: 'Publisher Weekly',
+                accentColor: 'rgb(255, 211, 100)'
+            });
+
+            const signupButton = await frame.getByTestId('signup-button');
+
+            // Get computed background color
+            const color = await signupButton.evaluate((node) => {
+                const style = window.getComputedStyle(node);
+                return style.getPropertyValue('background-color');
+            });
+            expect(color).toBe('rgb(255, 211, 100)');
+
+            const signinButton = await frame.getByTestId('signin-button');
+
+            // Get computed text color
+            const textColor = await signinButton.evaluate((node) => {
+                const style = window.getComputedStyle(node);
+                return style.getPropertyValue('color');
+            });
+            expect(textColor).toBe('rgb(255, 211, 100)');
+        });
+    });
 });