diff --git a/code/core/src/manager/components/sidebar/ChecklistWidget.tsx b/code/core/src/manager/components/sidebar/ChecklistWidget.tsx
index b6c10e201d9b..865aaf3ffced 100644
--- a/code/core/src/manager/components/sidebar/ChecklistWidget.tsx
+++ b/code/core/src/manager/components/sidebar/ChecklistWidget.tsx
@@ -191,7 +191,7 @@ export const ChecklistWidget = () => {
 
   return (
     <CollapsibleWithMargin collapsed={!hasItems || !loaded}>
-      <HoverCard outlineAnimation="rainbow">
+      <HoverCard id="storybook-checklist-widget" outlineAnimation="rainbow">
         <Collapsible
           collapsed={!hasItems}
           disabled={!hasItems}
diff --git a/code/core/src/manager/components/sidebar/Sidebar.stories.tsx b/code/core/src/manager/components/sidebar/Sidebar.stories.tsx
index c099238e1816..25b623802eb7 100644
--- a/code/core/src/manager/components/sidebar/Sidebar.stories.tsx
+++ b/code/core/src/manager/components/sidebar/Sidebar.stories.tsx
@@ -8,7 +8,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import type { IndexHash } from 'storybook/manager-api';
 import { ManagerContext } from 'storybook/manager-api';
-import { expect, fn, userEvent, within } from 'storybook/test';
+import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
 
 import { initialState } from '../../../shared/checklist-store/checklistData.state';
 import {
@@ -182,7 +182,18 @@ const refsEmpty = {
   },
 };
 
-export const Simple: Story = {};
+const waitForChecklistWidget = async () => {
+  await waitFor(
+    () =>
+      expect(document.getElementById('storybook-checklist-widget')?.checkVisibility()).toBe(true),
+    { timeout: 5000 }
+  );
+  await wait(300); // wait for expand animation
+};
+
+export const Simple: Story = {
+  play: waitForChecklistWidget,
+};
 
 export const SimpleInProduction: Story = {
   args: {
@@ -200,6 +211,7 @@ export const SimpleInProduction: Story = {
 export const Mobile: Story = {
   decorators: [mobileLayoutDecorator],
   globals: { sb_theme: 'light', viewport: { value: 'mobile1' } },
+  play: waitForChecklistWidget,
 };
 
 export const Loading: Story = {
@@ -219,12 +231,14 @@ export const Empty: Story = {
   args: {
     index: {},
   },
+  play: waitForChecklistWidget,
 };
 
 export const EmptyMobile: Story = {
   args: Empty.args,
   decorators: [mobileLayoutDecorator],
   globals: { sb_theme: 'light', viewport: { value: 'mobile1' } },
+  play: waitForChecklistWidget,
 };
 
 export const EmptyIndex: Story = {
@@ -235,18 +249,21 @@ export const EmptyIndex: Story = {
       v: 6,
     },
   },
+  play: waitForChecklistWidget,
 };
 
 export const IndexError: Story = {
   args: {
     indexError,
   },
+  play: waitForChecklistWidget,
 };
 
 export const WithRefs: Story = {
   args: {
     refs,
   },
+  play: waitForChecklistWidget,
 };
 
 export const WithRefsNarrow: Story = {
@@ -264,7 +281,7 @@ export const WithRefsNarrow: Story = {
         narrow: {
           name: 'narrow',
           styles: {
-            width: '400px',
+            width: '230px',
             height: '800px',
           },
         },
@@ -273,7 +290,7 @@ export const WithRefsNarrow: Story = {
     chromatic: {
       modes: {
         narrow: {
-          viewport: 400,
+          viewport: 230,
         },
       },
     },
@@ -283,12 +300,14 @@ export const WithRefsNarrow: Story = {
       value: 'narrow',
     },
   },
+  play: waitForChecklistWidget,
 };
 
 export const WithRefsMobile: Story = {
   args: WithRefs.args,
   decorators: [mobileLayoutDecorator],
   globals: { sb_theme: 'light', viewport: { value: 'mobile1' } },
+  play: waitForChecklistWidget,
 };
 
 export const LoadingWithRefs: Story = {
@@ -316,6 +335,7 @@ export const WithRefEmpty: Story = {
     ...Empty.args,
     refs: refsEmpty,
   },
+  play: waitForChecklistWidget,
 };
 
 export const StatusesCollapsed: Story = {
@@ -349,6 +369,7 @@ export const StatusesCollapsed: Story = {
       return acc;
     }, {} as StatusesByStoryIdAndTypeId),
   },
+  play: waitForChecklistWidget,
 };
 
 export const StatusesOpen: Story = {
@@ -380,6 +401,7 @@ export const StatusesOpen: Story = {
       } satisfies StatusesByStoryIdAndTypeId;
     }, {} as StatusesByStoryIdAndTypeId),
   },
+  play: waitForChecklistWidget,
 };
 
 export const Searching: Story = {
@@ -394,7 +416,7 @@ export const Searching: Story = {
     ),
   ],
   play: async ({ canvasElement, step }) => {
-    await step('wait 2000ms', () => wait(2000));
+    await waitForChecklistWidget();
     const canvas = await within(canvasElement);
     const search = await canvas.findByPlaceholderText('Find components');
     userEvent.clear(search);
@@ -473,6 +495,7 @@ export const Scrolled: Story = {
     );
   },
   play: async ({ canvasElement, step }) => {
+    await waitForChecklistWidget();
     const canvas = await within(canvasElement);
     const scrollable = await canvasElement.querySelector('[data-radix-scroll-area-viewport]');
     await step('expand component', async () => {
diff --git a/code/core/src/manager/settings/Checklist/Checklist.tsx b/code/core/src/manager/settings/Checklist/Checklist.tsx
index d19423de2069..2fea864a1b49 100644
--- a/code/core/src/manager/settings/Checklist/Checklist.tsx
+++ b/code/core/src/manager/settings/Checklist/Checklist.tsx
@@ -34,7 +34,7 @@ const Sections = styled.ol(({ theme }) => ({
 
   '& > li': {
     background: theme.background.content,
-    border: `1px solid ${theme.color.border}`,
+    border: `1px solid ${theme.base === 'dark' ? theme.color.darker : theme.color.border}`,
     borderRadius: 8,
   },
 }));
@@ -47,7 +47,7 @@ const Items = styled.ol(({ theme }) => ({
   padding: 0,
 
   '& > li:not(:last-child)': {
-    boxShadow: `inset 0 -1px 0 ${theme.color.border}`,
+    boxShadow: `inset 0 -1px 0 ${theme.base === 'dark' ? theme.color.darker : theme.color.border}`,
   },
 
   '& > li:last-child': {
@@ -159,7 +159,7 @@ const ItemContent = styled.div(({ theme }) => ({
     listStyleType: 'disc',
 
     'li::marker': {
-      color: theme.color.medium,
+      color: theme.color.mediumdark,
     },
   },
 }));
@@ -170,9 +170,9 @@ const StatusIcon = styled.div(({ theme }) => ({
   minHeight: 16,
   minWidth: 16,
   margin: 0,
-  background: theme.background.app,
+  background: theme.base === 'dark' ? theme.color.darkest : theme.background.app,
   borderRadius: 9,
-  outline: `1px solid ${theme.color.border}`,
+  outline: `1px solid ${theme.base === 'dark' ? theme.color.darker : theme.color.border}`,
   outlineOffset: -1,
 }));
 const Checked = styled(StatusPassIcon)<{ 'data-visible'?: boolean }>(