diff --git a/services/web/frontend/stories/editor-left-menu/sync-menu.stories.tsx b/services/web/frontend/stories/editor-left-menu/sync-menu.stories.tsx
new file mode 100644
index 0000000000..a33d3cd32f
--- /dev/null
+++ b/services/web/frontend/stories/editor-left-menu/sync-menu.stories.tsx
@@ -0,0 +1,35 @@
+import SyncMenu from '../../js/features/editor-left-menu/components/sync-menu'
+import { ScopeDecorator } from '../decorators/scope'
+import { useScope } from '../hooks/use-scope'
+
+export default {
+  title: 'Editor / Left Menu / Sync Menu',
+  component: SyncMenu,
+  decorators: [ScopeDecorator],
+}
+
+export const WriteAccess = () => {
+  window.metaAttributesCache.set('ol-anonymous', false)
+  useScope({
+    permissionsLevel: 'owner',
+  })
+
+  return (
+    <div id="left-menu" className="shown">
+      <SyncMenu />
+    </div>
+  )
+}
+
+export const ReadOnlyAccess = () => {
+  window.metaAttributesCache.set('ol-anonymous', false)
+  useScope({
+    permissionsLevel: 'readOnly',
+  })
+
+  return (
+    <div id="left-menu" className="shown">
+      <SyncMenu />
+    </div>
+  )
+}