diff --git a/.changeset/curly-clocks-warn.md b/.changeset/curly-clocks-warn.md
new file mode 100644
index 000000000..bb1f9d923
--- /dev/null
+++ b/.changeset/curly-clocks-warn.md
@@ -0,0 +1,6 @@
+---
+'@cypherock/cysync-ui': patch
+'@cypherock/cysync-desktop': patch
+---
+
+added and updated storybook ui components
diff --git a/packages/cysync-core/src/dialogs/HistoryDialog.tsx b/packages/cysync-core/src/dialogs/HistoryDialog.tsx
index 64a754dce..f0c3e86cd 100644
--- a/packages/cysync-core/src/dialogs/HistoryDialog.tsx
+++ b/packages/cysync-core/src/dialogs/HistoryDialog.tsx
@@ -40,6 +40,7 @@ import {
   useAppDispatch,
   useAppSelector,
 } from '~/store';
+
 import { LoaderDialog } from '../components';
 
 export interface IHistoryDialogProps {
diff --git a/packages/cysync-core/src/dialogs/Password/ChangePassword/context/index.tsx b/packages/cysync-core/src/dialogs/Password/ChangePassword/context/index.tsx
index 156413c6f..a5cad5db0 100644
--- a/packages/cysync-core/src/dialogs/Password/ChangePassword/context/index.tsx
+++ b/packages/cysync-core/src/dialogs/Password/ChangePassword/context/index.tsx
@@ -18,8 +18,8 @@ import {
   useAppSelector,
 } from '~/store';
 import { validatePassword } from '~/utils';
-
 import logger from '~/utils/logger';
+
 import { ChangePasswordSuccess, CreateNewPassword } from '../Dialogs';
 
 export interface ChangePasswordDialogContextInterface {
diff --git a/packages/cysync-core/src/dialogs/Password/RemovePassword/context/index.tsx b/packages/cysync-core/src/dialogs/Password/RemovePassword/context/index.tsx
index 8d8bdac6c..ce237301d 100644
--- a/packages/cysync-core/src/dialogs/Password/RemovePassword/context/index.tsx
+++ b/packages/cysync-core/src/dialogs/Password/RemovePassword/context/index.tsx
@@ -17,8 +17,8 @@ import {
   useAppDispatch,
   useAppSelector,
 } from '~/store';
-
 import logger from '~/utils/logger';
+
 import { ConfirmPassword, RemovePasswordSuccess } from '../Dialogs';
 
 export interface RemovePasswordDialogContextInterface {
diff --git a/packages/cysync-core/src/dialogs/Password/SetPassword/context/index.tsx b/packages/cysync-core/src/dialogs/Password/SetPassword/context/index.tsx
index 4270ebc0d..04e6d0ab6 100644
--- a/packages/cysync-core/src/dialogs/Password/SetPassword/context/index.tsx
+++ b/packages/cysync-core/src/dialogs/Password/SetPassword/context/index.tsx
@@ -18,8 +18,8 @@ import {
   useAppSelector,
 } from '~/store';
 import { validatePassword } from '~/utils';
-
 import logger from '~/utils/logger';
+
 import { AddPassword, SetPasswordSuccess } from '../Dialogs';
 
 export interface SetPasswordDialogContextInterface {
diff --git a/packages/cysync-core/src/dialogs/Send/Dialogs/Recipient.tsx b/packages/cysync-core/src/dialogs/Send/Dialogs/Recipient.tsx
index 4aa2935c4..8d7c10c40 100644
--- a/packages/cysync-core/src/dialogs/Send/Dialogs/Recipient.tsx
+++ b/packages/cysync-core/src/dialogs/Send/Dialogs/Recipient.tsx
@@ -19,11 +19,12 @@ import React, { useCallback, useEffect, useState } from 'react';
 
 import { LoaderDialog } from '~/components';
 import { selectLanguage, useAppSelector } from '~/store';
-
 import logger from '~/utils/logger';
-import { useSendDialog } from '../context';
+
 import { AddressAndAmountSection, FeeSection } from './Components';
 
+import { useSendDialog } from '../context';
+
 export const Recipient: React.FC = () => {
   const {
     onNext,
diff --git a/packages/ui/src/components/atoms/Divider.tsx b/packages/ui/src/components/atoms/Divider.tsx
index 8290236bd..7858bc517 100644
--- a/packages/ui/src/components/atoms/Divider.tsx
+++ b/packages/ui/src/components/atoms/Divider.tsx
@@ -11,7 +11,7 @@ interface DividerProps extends UtilsProps {
 
 const DividerStyle = styled.div<DividerProps>`
   width: ${({ variant, stroke }) =>
-    variant === 'vertical' ? `${stroke}px` : '100%'};
+    variant === 'vertical' ? `${stroke}px` : '24px'};
   height: ${({ variant, stroke }) =>
     variant === 'vertical' ? '24px' : `${stroke}px`};
   background: ${({ theme, background }) =>
diff --git a/packages/ui/src/components/atoms/Select.tsx b/packages/ui/src/components/atoms/Select.tsx
index a0a1cd2b0..ef4eb706f 100644
--- a/packages/ui/src/components/atoms/Select.tsx
+++ b/packages/ui/src/components/atoms/Select.tsx
@@ -36,5 +36,5 @@ export const SelectContainer: FC<SelectProps> = ({ children }) => (
 );
 
 SelectContainer.defaultProps = {
-  children: null,
+  children: undefined,
 };
diff --git a/packages/ui/src/components/molecules/index.ts b/packages/ui/src/components/molecules/index.ts
index 242f21b15..afc51b5fd 100644
--- a/packages/ui/src/components/molecules/index.ts
+++ b/packages/ui/src/components/molecules/index.ts
@@ -27,6 +27,7 @@ export * from './Milestone';
 export * from './Notification';
 export * from './Prefabs';
 export * from './ProgressBar';
+export * from './ProgressLine';
 export * from './Send';
 export * from './SideBar';
 export * from './SkeletonLoader';
diff --git a/packages/ui/src/stories/atoms/Chip.stories.tsx b/packages/ui/src/stories/atoms/Chip.stories.tsx
new file mode 100644
index 000000000..df75750b4
--- /dev/null
+++ b/packages/ui/src/stories/atoms/Chip.stories.tsx
@@ -0,0 +1,20 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import React from 'react';
+
+import { Chip } from '../../components';
+
+const meta: Meta<typeof Chip> = {
+  component: Chip,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: <span style={{ color: 'white' }}>Chip Box</span>,
+    p: 2,
+  },
+};
diff --git a/packages/ui/src/stories/atoms/Container.stories.tsx b/packages/ui/src/stories/atoms/Container.stories.tsx
new file mode 100644
index 000000000..d8c43d93d
--- /dev/null
+++ b/packages/ui/src/stories/atoms/Container.stories.tsx
@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { Container } from '../../components/atoms';
+
+const meta: Meta<typeof Container> = {
+  component: Container,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    $noFlex: true,
+    size: 'lg',
+    $bgColor: 'white',
+    p: '10',
+    children: (
+      <>
+        <div>This is the first container</div>
+        <div>This is the second container</div>
+      </>
+    ),
+  },
+};
+
+export const FlexGapContainer: Story = {
+  args: {
+    ...Default.args,
+    $noFlex: false,
+    gap: 32,
+  },
+};
+
+export const RoundedContainer: Story = {
+  args: {
+    ...Default.args,
+    p: '16',
+    $borderRadius: 8,
+    $width: '100%',
+  },
+};
diff --git a/packages/ui/src/stories/atoms/Divider.stories.tsx b/packages/ui/src/stories/atoms/Divider.stories.tsx
index 31407e3c5..02f055e3b 100644
--- a/packages/ui/src/stories/atoms/Divider.stories.tsx
+++ b/packages/ui/src/stories/atoms/Divider.stories.tsx
@@ -14,10 +14,15 @@ type Story = StoryObj<typeof meta>;
 export const Vertical: Story = {
   args: {
     variant: 'vertical',
+    $bgColor: 'golden',
+    stroke: 8,
   },
 };
 export const Horizontal: Story = {
   args: {
+    ...Vertical,
     variant: 'horizontal',
+    $bgColor: 'golden',
+    stroke: 8,
   },
 };
diff --git a/packages/ui/src/stories/atoms/InformationBox.stories.tsx b/packages/ui/src/stories/atoms/InformationBox.stories.tsx
new file mode 100644
index 000000000..acc880413
--- /dev/null
+++ b/packages/ui/src/stories/atoms/InformationBox.stories.tsx
@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { InformationBox } from '../../components/atoms';
+
+const meta: Meta<typeof InformationBox> = {
+  component: InformationBox,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    $backgroundColor: undefined,
+    $borderColor: undefined,
+    rightImage: undefined,
+    text: 'This is the info box',
+  },
+};
diff --git a/packages/ui/src/stories/atoms/LeanBoxContainer.stories.tsx b/packages/ui/src/stories/atoms/LeanBoxContainer.stories.tsx
index e515dcb46..b5bd948ed 100644
--- a/packages/ui/src/stories/atoms/LeanBoxContainer.stories.tsx
+++ b/packages/ui/src/stories/atoms/LeanBoxContainer.stories.tsx
@@ -11,4 +11,8 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  args: {
+    children: 'Hello world',
+  },
+};
diff --git a/packages/ui/src/stories/atoms/NoSearchResult.stories.tsx b/packages/ui/src/stories/atoms/NoSearchResult.stories.tsx
new file mode 100644
index 000000000..ef266bb7a
--- /dev/null
+++ b/packages/ui/src/stories/atoms/NoSearchResult.stories.tsx
@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { NoSearchResult } from '../../components/atoms';
+
+const meta: Meta<typeof NoSearchResult> = {
+  component: NoSearchResult,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    subText: 'Go to Home',
+    searchText: 'Result not found',
+    text: 'text',
+  },
+};
diff --git a/packages/ui/src/stories/atoms/Select.stories.tsx b/packages/ui/src/stories/atoms/Select.stories.tsx
index 4ae31ea2f..a98ddff3b 100644
--- a/packages/ui/src/stories/atoms/Select.stories.tsx
+++ b/packages/ui/src/stories/atoms/Select.stories.tsx
@@ -11,4 +11,8 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  args: {
+    children: 'Select Component',
+  },
+};
diff --git a/packages/ui/src/stories/atoms/ShowMore.stories.tsx b/packages/ui/src/stories/atoms/ShowMore.stories.tsx
new file mode 100644
index 000000000..19c489f50
--- /dev/null
+++ b/packages/ui/src/stories/atoms/ShowMore.stories.tsx
@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ShowMore } from '../../components/atoms';
+
+const meta: Meta<typeof ShowMore> = {
+  component: ShowMore,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    text: 'Show More',
+  },
+};
diff --git a/packages/ui/src/stories/atoms/SummaryContainer.stories.tsx b/packages/ui/src/stories/atoms/SummaryContainer.stories.tsx
new file mode 100644
index 000000000..2bc345107
--- /dev/null
+++ b/packages/ui/src/stories/atoms/SummaryContainer.stories.tsx
@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { SummaryContainer } from '../../components/atoms';
+
+const meta: Meta<typeof SummaryContainer> = {
+  component: SummaryContainer,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    margin: undefined,
+    leftComponent: undefined,
+    rightComponent: undefined,
+  },
+};
diff --git a/packages/ui/src/stories/atoms/Tag.stories.tsx b/packages/ui/src/stories/atoms/Tag.stories.tsx
index 84c10b4de..4511bd248 100644
--- a/packages/ui/src/stories/atoms/Tag.stories.tsx
+++ b/packages/ui/src/stories/atoms/Tag.stories.tsx
@@ -11,4 +11,8 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  args: {
+    children: 'tag 1',
+  },
+};
diff --git a/packages/ui/src/stories/atoms/Tooltip.stories.tsx b/packages/ui/src/stories/atoms/Tooltip.stories.tsx
new file mode 100644
index 000000000..aaa9f1c28
--- /dev/null
+++ b/packages/ui/src/stories/atoms/Tooltip.stories.tsx
@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { Tooltip } from '../../components/atoms/Tooltip';
+
+const meta: Meta<typeof Tooltip> = {
+  component: Tooltip,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    isActive: true,
+    text: undefined,
+    children: <span>Base Comp</span>,
+  },
+};
+
+export const TopTooltip: Story = {
+  args: {
+    ...Default.args,
+    tooltipPlacement: 'top',
+  },
+};
+
+export const BottomTooltip: Story = {
+  args: {
+    ...Default.args,
+    tooltipPlacement: 'bottom',
+  },
+};
diff --git a/packages/ui/src/stories/atoms/VerticalLine.stories.tsx b/packages/ui/src/stories/atoms/VerticalLine.stories.tsx
new file mode 100644
index 000000000..f4547f247
--- /dev/null
+++ b/packages/ui/src/stories/atoms/VerticalLine.stories.tsx
@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { VerticalLine } from '../../components/atoms';
+
+const meta: Meta<typeof VerticalLine> = {
+  component: VerticalLine,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    $borderStyle: 'dotted',
+    height: 40,
+  },
+};
diff --git a/packages/ui/src/stories/atoms/Video.stories.tsx b/packages/ui/src/stories/atoms/Video.stories.tsx
new file mode 100644
index 000000000..8691a88c6
--- /dev/null
+++ b/packages/ui/src/stories/atoms/Video.stories.tsx
@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Video } from '../../components/atoms';
+
+const meta: Meta<typeof Video> = {
+  component: Video,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    autoPlay: true,
+    loop: true,
+    controls: true,
+    $aspectRatio: 'auto',
+    src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+  },
+};
diff --git a/packages/ui/src/stories/molecules/AccordionContent.stories.tsx b/packages/ui/src/stories/molecules/AccordionContent.stories.tsx
new file mode 100644
index 000000000..ecd1abbf6
--- /dev/null
+++ b/packages/ui/src/stories/molecules/AccordionContent.stories.tsx
@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { AccordionContent } from '../../components';
+
+const meta: Meta<typeof AccordionContent> = {
+  component: AccordionContent,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Info: Story = {
+  args: {
+    id: 'Accordion',
+    items: [
+      {
+        component: <span>First</span>,
+        width: 50,
+        padding: 8,
+        paddingLeft: '20',
+      },
+      {
+        component: <span>Second</span>,
+        width: 50,
+        padding: 8,
+        paddingLeft: '20',
+      },
+      {
+        component: <span>Third</span>,
+        width: 50,
+        padding: 8,
+        paddingLeft: '20',
+      },
+    ],
+    headers: ['Head1', 'Head2', 'Head3'],
+  },
+};
diff --git a/packages/ui/src/stories/molecules/Breadcrumb.stories.tsx b/packages/ui/src/stories/molecules/Breadcrumb.stories.tsx
new file mode 100644
index 000000000..c2079133c
--- /dev/null
+++ b/packages/ui/src/stories/molecules/Breadcrumb.stories.tsx
@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Breadcrumb } from '../../components';
+
+const meta: Meta<typeof Breadcrumb> = {
+  component: Breadcrumb,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    items: [
+      {
+        id: '1',
+        text: 'First',
+      },
+      {
+        id: '2',
+        text: 'Second',
+      },
+      {
+        id: '3',
+        text: 'Third',
+      },
+    ],
+  },
+};
diff --git a/packages/ui/src/stories/molecules/ButtonGroup.stories.tsx b/packages/ui/src/stories/molecules/ButtonGroup.stories.tsx
new file mode 100644
index 000000000..7ece474d4
--- /dev/null
+++ b/packages/ui/src/stories/molecules/ButtonGroup.stories.tsx
@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { PillButtonToggle } from '../../components';
+
+const meta: Meta<typeof PillButtonToggle> = {
+  component: PillButtonToggle,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Info: Story = {
+  args: {
+    type: 'info',
+    buttons: [
+      {
+        id: 1,
+        label: 'first',
+        type: 'info',
+      },
+      {
+        id: 2,
+        label: 'second',
+        type: 'primary',
+      },
+      {
+        id: 3,
+        label: 'third',
+        type: 'info',
+      },
+    ],
+  },
+};
diff --git a/packages/ui/src/stories/molecules/Calendar.stories.tsx b/packages/ui/src/stories/molecules/Calendar.stories.tsx
new file mode 100644
index 000000000..498e2707b
--- /dev/null
+++ b/packages/ui/src/stories/molecules/Calendar.stories.tsx
@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Calendar } from '../../components';
+
+const meta: Meta<typeof Calendar> = {
+  component: Calendar,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Info: Story = {
+  args: {},
+};
diff --git a/packages/ui/src/stories/molecules/Dropdown.stories.tsx b/packages/ui/src/stories/molecules/Dropdown.stories.tsx
index 6605de0db..7d4f66c58 100644
--- a/packages/ui/src/stories/molecules/Dropdown.stories.tsx
+++ b/packages/ui/src/stories/molecules/Dropdown.stories.tsx
@@ -13,6 +13,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
+    placeholderText: 'Placeholder',
     items: [
       {
         text: 'This is item 1',
diff --git a/packages/ui/src/stories/molecules/Filter.stories.tsx b/packages/ui/src/stories/molecules/Filter.stories.tsx
new file mode 100644
index 000000000..5ee07a55d
--- /dev/null
+++ b/packages/ui/src/stories/molecules/Filter.stories.tsx
@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Filter } from '../../components';
+
+const meta: Meta<typeof Filter> = {
+  component: Filter,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Info: Story = {
+  args: {
+    menu: 'Menu',
+    isToggled: true,
+    checkboxStates: [true, false],
+    selectedCount: 0,
+    subMenu: [
+      {
+        checkType: 'first',
+        icon: '',
+        name: 'First',
+      },
+      {
+        checkType: 'Second',
+        icon: '',
+        name: 'Second',
+      },
+    ],
+  },
+};
diff --git a/packages/ui/src/stories/molecules/FloatContainer.stories.tsx b/packages/ui/src/stories/molecules/FloatContainer.stories.tsx
new file mode 100644
index 000000000..ff4c0fc77
--- /dev/null
+++ b/packages/ui/src/stories/molecules/FloatContainer.stories.tsx
@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { FloatContainer } from '../../components';
+
+const meta: Meta<typeof FloatContainer> = {
+  component: FloatContainer,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Info: Story = {
+  args: {
+    children: <span>This is base component</span>,
+    $floatDirection: 'left',
+  },
+};
diff --git a/packages/ui/src/stories/molecules/JoystickInteraction.stories.tsx b/packages/ui/src/stories/molecules/JoystickInteraction.stories.tsx
index 3cd0024be..5bf552cc6 100644
--- a/packages/ui/src/stories/molecules/JoystickInteraction.stories.tsx
+++ b/packages/ui/src/stories/molecules/JoystickInteraction.stories.tsx
@@ -11,6 +11,10 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+export const Default: Story = {
+  args: {},
+};
+
 export const Initial: Story = {};
 
 export const DirectionsSelected: Story = {
diff --git a/packages/ui/src/stories/molecules/Layouts/OnboardingLayout.stories.tsx b/packages/ui/src/stories/molecules/Layouts/OnboardingLayout.stories.tsx
index 785d6e1b9..5f8944c07 100644
--- a/packages/ui/src/stories/molecules/Layouts/OnboardingLayout.stories.tsx
+++ b/packages/ui/src/stories/molecules/Layouts/OnboardingLayout.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
+
 import { LogoOutlinedAsideImage } from '../../../assets';
 import { OnboardingLayout } from '../../../components';
 
diff --git a/packages/ui/src/stories/molecules/LineGraph.stories.tsx b/packages/ui/src/stories/molecules/LineGraph.stories.tsx
new file mode 100644
index 000000000..21e81fe34
--- /dev/null
+++ b/packages/ui/src/stories/molecules/LineGraph.stories.tsx
@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { DisplayGraph } from '../../components';
+
+const meta: Meta<typeof DisplayGraph> = {
+  component: DisplayGraph,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Info: Story = {
+  args: {
+    title: 'Title',
+    color: '##351d1d',
+    data: [
+      {
+        timestamp: 1,
+        value: 10,
+      },
+      {
+        timestamp: 2,
+        value: 15,
+      },
+      {
+        timestamp: 3,
+        value: 5,
+      },
+      {
+        timestamp: 4,
+        value: 20,
+      },
+      {
+        timestamp: 5,
+        value: 3,
+      },
+    ],
+  },
+};
diff --git a/packages/ui/src/stories/molecules/Markdown.stories.tsx b/packages/ui/src/stories/molecules/Markdown.stories.tsx
new file mode 100644
index 000000000..83d22c522
--- /dev/null
+++ b/packages/ui/src/stories/molecules/Markdown.stories.tsx
@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Markdown } from '../../components';
+
+const meta: Meta<typeof Markdown> = {
+  component: Markdown,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Info: Story = {
+  args: {
+    children: 'Test string',
+  },
+};
diff --git a/packages/ui/src/stories/molecules/Notification/NotificationGroupHeader.stories.tsx b/packages/ui/src/stories/molecules/Notification/NotificationGroupHeader.stories.tsx
new file mode 100644
index 000000000..61ab13d2c
--- /dev/null
+++ b/packages/ui/src/stories/molecules/Notification/NotificationGroupHeader.stories.tsx
@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { NotificationGroupHeader } from '../../../components';
+
+const meta: Meta<typeof NotificationGroupHeader> = {
+  component: NotificationGroupHeader,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    text: 'Placeholder Notification text',
+  },
+};
diff --git a/packages/ui/src/stories/molecules/Notification/NotificationItem.stories.tsx b/packages/ui/src/stories/molecules/Notification/NotificationItem.stories.tsx
new file mode 100644
index 000000000..bbd77de6a
--- /dev/null
+++ b/packages/ui/src/stories/molecules/Notification/NotificationItem.stories.tsx
@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { NotificationContainer } from '../../../components';
+
+const meta: Meta<typeof NotificationContainer> = {
+  component: NotificationContainer,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: 'Title',
+    count: 2,
+    top: 0,
+  },
+};
diff --git a/packages/ui/src/stories/molecules/OnboardingLayout.stories.tsx b/packages/ui/src/stories/molecules/OnboardingLayout.stories.tsx
new file mode 100644
index 000000000..6385d26ea
--- /dev/null
+++ b/packages/ui/src/stories/molecules/OnboardingLayout.stories.tsx
@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { OnboardingLayout } from '../../components';
+
+const meta: Meta<typeof OnboardingLayout> = {
+  component: OnboardingLayout,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    text: 'Placeholder',
+    title: 'title',
+    subTitle: 'subtitle',
+  },
+};
diff --git a/packages/ui/src/stories/molecules/Prefabs/QuestionMarkButton.stories.tsx b/packages/ui/src/stories/molecules/Prefabs/QuestionMarkButton.stories.tsx
index a7b2b872a..69f965175 100644
--- a/packages/ui/src/stories/molecules/Prefabs/QuestionMarkButton.stories.tsx
+++ b/packages/ui/src/stories/molecules/Prefabs/QuestionMarkButton.stories.tsx
@@ -11,4 +11,6 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  args: {},
+};
diff --git a/packages/ui/src/stories/molecules/ProgressLine.stories.tsx b/packages/ui/src/stories/molecules/ProgressLine.stories.tsx
new file mode 100644
index 000000000..5eb5b00f9
--- /dev/null
+++ b/packages/ui/src/stories/molecules/ProgressLine.stories.tsx
@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ProgressLine } from '../../components';
+
+const meta: Meta<typeof ProgressLine> = {
+  component: ProgressLine,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Info: Story = {
+  args: {},
+};
diff --git a/packages/ui/src/stories/molecules/SideBarItem.stories.tsx b/packages/ui/src/stories/molecules/SideBarItem.stories.tsx
new file mode 100644
index 000000000..467ea1169
--- /dev/null
+++ b/packages/ui/src/stories/molecules/SideBarItem.stories.tsx
@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { SideBarItem } from '../../components';
+
+const meta: Meta<typeof SideBarItem> = {
+  component: SideBarItem,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Info: Story = {
+  args: {
+    text: 'Placeholder',
+    state: 4,
+  },
+};
diff --git a/packages/ui/src/stories/molecules/SkeletonLoader.stories.tsx b/packages/ui/src/stories/molecules/SkeletonLoader.stories.tsx
new file mode 100644
index 000000000..2a9220d19
--- /dev/null
+++ b/packages/ui/src/stories/molecules/SkeletonLoader.stories.tsx
@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { SkeletonLoader } from '../../components';
+
+const meta: Meta<typeof SkeletonLoader> = {
+  component: SkeletonLoader,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Info: Story = {
+  args: {
+    text: 'Placeholder',
+    subText: 'SubText',
+    subText2: 'SubText 2',
+    $buttonOne: 'First',
+    $buttonTwo: 'Second',
+  },
+};
diff --git a/packages/ui/src/stories/molecules/Slider.stories.tsx b/packages/ui/src/stories/molecules/Slider.stories.tsx
new file mode 100644
index 000000000..7362209e3
--- /dev/null
+++ b/packages/ui/src/stories/molecules/Slider.stories.tsx
@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+
+import { Slider } from '../../components';
+
+const meta: Meta<typeof Slider> = {
+  component: Slider,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Info: Story = {
+  render: () => {
+    const [value, setValue] = useState(50);
+
+    return (
+      <Slider
+        value={value}
+        min={0}
+        max={100}
+        decimal={0}
+        onChange={setValue}
+        captions={[
+          {
+            id: 1,
+            name: 'First',
+          },
+          {
+            id: 2,
+            name: 'Second',
+          },
+        ]}
+      />
+    );
+  },
+};
diff --git a/packages/ui/src/stories/molecules/SnackBar.stories.tsx b/packages/ui/src/stories/molecules/SnackBar.stories.tsx
index 01990cc9b..2b2d0c8db 100644
--- a/packages/ui/src/stories/molecules/SnackBar.stories.tsx
+++ b/packages/ui/src/stories/molecules/SnackBar.stories.tsx
@@ -11,10 +11,10 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
+export const Info: Story = {
   args: {
-    buttonText: 'Button',
-    text: 'Sample Text',
     icon: 'check',
+    buttonText: 'Placeholder Text',
+    text: 'Sample Text',
   },
 };
diff --git a/packages/ui/src/stories/molecules/SummaryBox.stories.tsx b/packages/ui/src/stories/molecules/SummaryBox.stories.tsx
new file mode 100644
index 000000000..f33abdbc4
--- /dev/null
+++ b/packages/ui/src/stories/molecules/SummaryBox.stories.tsx
@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { SummaryBox } from '../../components/molecules';
+
+const meta: Meta<typeof SummaryBox> = {
+  component: SummaryBox,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Info: Story = {
+  args: {
+    items: [
+      {
+        id: '1',
+        isDivider: false,
+        leftText: 'First Summary',
+      },
+      {
+        id: '2',
+        isDivider: true,
+        leftText: 'Second Summary',
+      },
+      {
+        id: '3',
+        isDivider: true,
+        leftText: 'Third Summary',
+      },
+    ],
+  },
+};
diff --git a/packages/ui/src/stories/molecules/Tables/Accordion.stories.tsx b/packages/ui/src/stories/molecules/Tables/Accordion.stories.tsx
new file mode 100644
index 000000000..7d960eafc
--- /dev/null
+++ b/packages/ui/src/stories/molecules/Tables/Accordion.stories.tsx
@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { AccordionContent } from '../../../components';
+
+const meta: Meta<typeof AccordionContent> = {
+  component: AccordionContent,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Info: Story = {
+  args: {
+    id: 'Accordion',
+    items: [
+      {
+        component: <span>First</span>,
+        width: 50,
+        padding: 8,
+        paddingLeft: '20',
+      },
+      {
+        component: <span>Second</span>,
+        width: 50,
+        padding: 8,
+        paddingLeft: '20',
+      },
+      {
+        component: <span>Third</span>,
+        width: 50,
+        padding: 8,
+        paddingLeft: '20',
+      },
+    ],
+    headers: ['Head1', 'Head2', 'Head3'],
+  },
+};
diff --git a/packages/ui/src/stories/molecules/Tables/AllocationShare.stories.tsx b/packages/ui/src/stories/molecules/Tables/AllocationShare.stories.tsx
new file mode 100644
index 000000000..852f6ffd5
--- /dev/null
+++ b/packages/ui/src/stories/molecules/Tables/AllocationShare.stories.tsx
@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { AllocationShare } from '../../../components';
+
+const meta: Meta<typeof AllocationShare> = {
+  component: AllocationShare,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Info: Story = {
+  args: {
+    percentage: 30,
+    color: 'white',
+  },
+};
diff --git a/packages/ui/src/stories/molecules/Tables/Table.stories.tsx b/packages/ui/src/stories/molecules/Tables/Table.stories.tsx
new file mode 100644
index 000000000..46a9030e9
--- /dev/null
+++ b/packages/ui/src/stories/molecules/Tables/Table.stories.tsx
@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Table } from '../../../components';
+
+const meta: Meta<typeof Table> = {
+  component: Table,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
diff --git a/packages/ui/src/stories/molecules/Tables/TableMutedTextBox.stories.tsx b/packages/ui/src/stories/molecules/Tables/TableMutedTextBox.stories.tsx
new file mode 100644
index 000000000..fd9ab832c
--- /dev/null
+++ b/packages/ui/src/stories/molecules/Tables/TableMutedTextBox.stories.tsx
@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { TableMutedTextBox } from '../../../components';
+
+const meta: Meta<typeof TableMutedTextBox> = {
+  component: TableMutedTextBox,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Info: Story = {
+  args: {
+    text: 'Placeholder',
+  },
+};
diff --git a/packages/ui/src/stories/molecules/Tables/TableNoData.stories.tsx b/packages/ui/src/stories/molecules/Tables/TableNoData.stories.tsx
new file mode 100644
index 000000000..affb1b114
--- /dev/null
+++ b/packages/ui/src/stories/molecules/Tables/TableNoData.stories.tsx
@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { TableNoData } from '../../../components';
+
+const meta: Meta<typeof TableNoData> = {
+  component: TableNoData,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Info: Story = {
+  args: {
+    text: 'No Data',
+    subText: 'Placeholder',
+    buttonText: 'Button',
+  },
+};
diff --git a/packages/ui/src/stories/molecules/Tables/TableSearch.stories.tsx b/packages/ui/src/stories/molecules/Tables/TableSearch.stories.tsx
new file mode 100644
index 000000000..be606b772
--- /dev/null
+++ b/packages/ui/src/stories/molecules/Tables/TableSearch.stories.tsx
@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { TableSearch } from '../../../components';
+
+const meta: Meta<typeof TableSearch> = {
+  component: TableSearch,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Info: Story = {
+  args: {
+    value: 'Placeholder Value',
+  },
+};
diff --git a/packages/ui/src/stories/molecules/Tables/TableSearchFilter.stories.tsx b/packages/ui/src/stories/molecules/Tables/TableSearchFilter.stories.tsx
new file mode 100644
index 000000000..10de63b08
--- /dev/null
+++ b/packages/ui/src/stories/molecules/Tables/TableSearchFilter.stories.tsx
@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { TableSearchFilter } from '../../../components';
+
+const meta: Meta<typeof TableSearchFilter> = {
+  component: TableSearchFilter,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Info: Story = {
+  args: {
+    placeholder: 'Placeholder',
+  },
+};
diff --git a/packages/ui/src/stories/molecules/Tabs.stories.tsx b/packages/ui/src/stories/molecules/Tabs.stories.tsx
new file mode 100644
index 000000000..79aff880e
--- /dev/null
+++ b/packages/ui/src/stories/molecules/Tabs.stories.tsx
@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Tabs } from '../../components';
+
+const meta: Meta<typeof Tabs> = {
+  component: Tabs,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Info: Story = {
+  args: {
+    tabs: [
+      {
+        label: 'First',
+        content: 'First Content',
+      },
+      {
+        label: 'Second',
+        content: 'Second Content',
+      },
+
+      {
+        label: 'Third',
+        content: 'Third Content',
+      },
+    ],
+  },
+};
diff --git a/packages/ui/src/stories/molecules/Topbar.stories.tsx b/packages/ui/src/stories/molecules/Topbar.stories.tsx
index 71a524111..f4b5d6f88 100644
--- a/packages/ui/src/stories/molecules/Topbar.stories.tsx
+++ b/packages/ui/src/stories/molecules/Topbar.stories.tsx
@@ -1,4 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj, Decorator } from '@storybook/react';
+import React from 'react';
 
 import { Topbar } from '../../components';
 
@@ -11,6 +12,12 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+const withWidthDecorator: Decorator = Story => (
+  <div style={{ width: '130%' }}>
+    <Story />
+  </div>
+);
+
 export const Default: Story = {
   args: {
     title: 'Title',
@@ -33,7 +40,11 @@ export const Default: Story = {
     isLocked: false,
     isLockscreenLoading: false,
     isPasswordSet: true,
+    toggleDiscreetMode: () => '',
+    onNotificationClick: () => '',
+    onSyncClick: () => '',
   },
+  decorators: [withWidthDecorator],
 };
 
 export const InProcess: Story = {
@@ -42,6 +53,7 @@ export const InProcess: Story = {
     connectionStatus: 'disconnected',
     syncStatus: 'synchronizing',
   },
+  decorators: [withWidthDecorator],
 };
 
 export const Failed: Story = {
@@ -50,4 +62,5 @@ export const Failed: Story = {
     connectionStatus: 'error',
     syncStatus: 'error',
   },
+  decorators: [withWidthDecorator],
 };
diff --git a/packages/ui/src/stories/molecules/send/FeesInput.stories.tsx b/packages/ui/src/stories/molecules/send/FeesInput.stories.tsx
new file mode 100644
index 000000000..79337ef72
--- /dev/null
+++ b/packages/ui/src/stories/molecules/send/FeesInput.stories.tsx
@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { FeesInput } from '../../../components';
+
+const meta: Meta<typeof FeesInput> = {
+  component: FeesInput,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    value: '10',
+    postfixText: 'USD',
+  },
+};
diff --git a/packages/ui/src/stories/molecules/send/FeesSlider.stories.tsx b/packages/ui/src/stories/molecules/send/FeesSlider.stories.tsx
new file mode 100644
index 000000000..495499bf4
--- /dev/null
+++ b/packages/ui/src/stories/molecules/send/FeesSlider.stories.tsx
@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+
+import { FeesSlider } from '../../../components';
+
+const meta: Meta<typeof FeesSlider> = {
+  component: FeesSlider,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    const [value, setValue] = useState(0);
+
+    return (
+      <FeesSlider
+        overrideDecimal={undefined}
+        error={undefined}
+        value={value}
+        captions={[
+          {
+            id: 1,
+            name: 'first',
+          },
+          {
+            id: 2,
+            name: 'second',
+          },
+        ]}
+        average={2}
+        onChange={setValue}
+      />
+    );
+  },
+};
diff --git a/packages/ui/src/stories/molecules/send/RecipientAddress.stories.tsx b/packages/ui/src/stories/molecules/send/RecipientAddress.stories.tsx
new file mode 100644
index 000000000..93e0e19c6
--- /dev/null
+++ b/packages/ui/src/stories/molecules/send/RecipientAddress.stories.tsx
@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+
+import { RecipientAddress } from '../../../components';
+
+const meta: Meta<typeof RecipientAddress> = {
+  component: RecipientAddress,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    const [address, setAddress] = useState('Bangalore, Karnataka');
+    return (
+      <RecipientAddress value={address} onChange={setAddress} placeholder="" />
+    );
+  },
+};
diff --git a/packages/ui/src/stories/molecules/send/ToggleSection.stories.tsx b/packages/ui/src/stories/molecules/send/ToggleSection.stories.tsx
new file mode 100644
index 000000000..cc16f77a1
--- /dev/null
+++ b/packages/ui/src/stories/molecules/send/ToggleSection.stories.tsx
@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+
+import { ToggleSection } from '../../../components';
+
+const meta: Meta<typeof ToggleSection> = {
+  component: ToggleSection,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    const [toggleValue, setToggleValue] = useState(true);
+
+    return (
+      <ToggleSection
+        text="Placeholder"
+        value={toggleValue}
+        onChange={setToggleValue}
+      />
+    );
+  },
+};