diff --git a/packages/components/src/accordion/accordion.stories.tsx b/packages/components/src/accordion/accordion.stories.tsx
new file mode 100644
index 00000000..27ffe8f3
--- /dev/null
+++ b/packages/components/src/accordion/accordion.stories.tsx
@@ -0,0 +1,76 @@
+import { Basketball, Collaboration, Play, Unicorn } from '../emoji'
+import { Accordion } from './accordion'
+import { AccordionItem } from './accordionItem'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof Accordion> = {
+  component: Accordion,
+  argTypes: {},
+  args: {
+    numberOfNewMessages: 3,
+    title: 'Welcome',
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/IBmFKgGL1B4GzqD8LQTw6n/Design-System-for-Web?node-id=14849%3A172544&t=4BeIzudVkio0c6Px-4',
+    },
+  },
+}
+
+type Story = StoryObj<typeof Accordion>
+
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        <AccordionItem
+          key="welcome"
+          icon={<Unicorn hasBackground />}
+          title={'# welcome'}
+          channelStatus="withMessages"
+          numberOfMessages={1}
+          isSelected
+          onPress={() => {
+            // do nothing
+          }}
+        />
+        <AccordionItem
+          key="general"
+          icon={<Basketball hasBackground />}
+          title={'# general'}
+          channelStatus="withMentions"
+          numberOfMessages={2}
+          onPress={() => {
+            // do nothing
+          }}
+          mb={8}
+        />
+        <AccordionItem
+          key="lounge"
+          icon={<Collaboration hasBackground />}
+          title={'# lounge'}
+          numberOfMessages={0}
+          onPress={() => {
+            // do nothing
+          }}
+          mb={8}
+        />
+        <AccordionItem
+          key="random"
+          icon={<Play hasBackground />}
+          title={'# random'}
+          channelStatus="muted"
+          numberOfMessages={0}
+          onPress={() => {
+            // do nothing
+          }}
+          mb={8}
+        />
+      </>
+    ),
+  },
+}
+
+export default meta
diff --git a/packages/components/src/composer/composer.stories.tsx b/packages/components/src/composer/composer.stories.tsx
new file mode 100644
index 00000000..aa99681f
--- /dev/null
+++ b/packages/components/src/composer/composer.stories.tsx
@@ -0,0 +1,23 @@
+import { Composer } from './composer'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof Composer> = {
+  component: Composer,
+  argTypes: {},
+  args: {},
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/qSIh8wh9EVdY8S2sZce15n/Composer-for-Web?node-id=7131%3A360528&t=11hKj5jyWVroXgdu-4',
+    },
+  },
+}
+
+type Story = StoryObj<typeof Composer>
+
+export const Default: Story = {
+  args: {},
+}
+
+export default meta
diff --git a/packages/components/src/topbar/topbar.stories.tsx b/packages/components/src/topbar/topbar.stories.tsx
new file mode 100644
index 00000000..42695894
--- /dev/null
+++ b/packages/components/src/topbar/topbar.stories.tsx
@@ -0,0 +1,54 @@
+import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport'
+
+import { Topbar } from './topbar'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta: Meta<typeof Topbar> = {
+  title: 'Navigation/Topbar',
+  component: Topbar,
+  argTypes: {},
+  parameters: {
+    viewport: {
+      viewports: MINIMAL_VIEWPORTS,
+    },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/qSIh8wh9EVdY8S2sZce15n/Composer-for-Web?node-id=7213%3A553827&t=11hKj5jyWVroXgdu-4',
+    },
+  },
+}
+
+type Story = StoryObj<typeof Topbar>
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
+export const Default: Story = {
+  args: {
+    title: '# channel',
+    description: 'This is a channel description',
+  },
+}
+
+export const WithMembersSelected: Story = {
+  args: {
+    ...Default.args,
+    membersVisisble: true,
+  },
+}
+
+export const WithGoBack: Story = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'mobile2',
+    },
+  },
+  args: {
+    ...Default.args,
+    goBack: () => {
+      // do nothing
+    },
+  },
+}
+
+export default meta