diff --git a/components/brave_new_tab_ui/components/toggle/style.ts b/components/brave_new_tab_ui/components/toggle/style.ts
index 672e942602d4..0620c16a85db 100644
--- a/components/brave_new_tab_ui/components/toggle/style.ts
+++ b/components/brave_new_tab_ui/components/toggle/style.ts
@@ -75,14 +75,17 @@ const transform = (p: Props) => {
 const transformBullet = (p: Props) => `${transform(p).x}, calc(-50% - ${transform(p).y})`
 
 export const StyledBullet = styled('label')<Props>`
-  box-sizing: border-box;
-  position: relative;
-  border-radius: 50%;
-  transition: all .4s ease;
-  transform: ${p => `translate(${transformBullet(p)})`};
-  width: ${p => p.size === 'small' ? '16px' : '20px'};
-  height: ${p => p.size === 'small' ? '16px' : '20px'};
-  background-color: ${p => p.disabled && 'rgba(235,236,240,0.8)' || p.checked ? '#fb542b' : '#ebecf0'};
-  display: block;
-  box-shadow: 0 3px 3px rgba(0,0,0,0.05);
-`
+   box-sizing: border-box;
+   position: relative;
+   border-radius: 50%;
+   transition: all .4s ease;
+   transform: ${p => `translate(${transformBullet(p)})`};
+   width: ${p => p.size === 'small' ? '16px' : '20px'};
+   height: ${p => p.size === 'small' ? '16px' : '20px'};
+   background-color: ${p => {
+    if (p.disabled) return 'rgba(235,236,240,0.8)'
+    return p.checked ? '#fb542b' : '#ebecf0'
+   }};
+   display: block;
+   box-shadow: 0 3px 3px rgba(0,0,0,0.05);
+ `