diff --git a/packages/components/modules/navigations/Header/AccountMenu/AccountPopover/__storybook__/AccountPopover.mdx b/packages/components/modules/navigations/Header/AccountMenu/AccountPopover/__storybook__/AccountPopover.mdx
new file mode 100644
index 00000000..22282e97
--- /dev/null
+++ b/packages/components/modules/navigations/Header/AccountMenu/AccountPopover/__storybook__/AccountPopover.mdx
@@ -0,0 +1,77 @@
+import { Meta } from '@storybook/addon-docs'
+
+<Meta title="@baseapp-frontend | components/Navigation/AccountPopover" />
+
+# Component Documentation
+
+## AccountPopover
+
+- **Purpose**: A popover menu component that displays user account-related options and actions.
+- **Expected Behavior**: Opens on click of the account trigger button, displaying a menu with user profile information and navigation options. Closes when clicking outside or selecting a menu item.
+
+## Use Cases
+
+- **Current Usage**: Used in the main application header for user account management and navigation.
+- **Potential Usage**: Could be used in:
+  - User profile sections
+  - Settings panels
+  - Account management interfaces
+  - Navigation drawers
+  - Dashboard headers
+
+## Props
+
+- **MenuItems** (MenuItem[]): Array of menu items containing label and onClick handlers for each action
+- **PopoverStyles** (object): Styles for the popover component
+- **CurrentUser** (object): The current user object containing profile information
+- **SwitchProfileMenu** (object): The switch profile menu object containing label and onClick handlers for each action
+- **SwitchProfileMenuProps** (object): The switch profile menu props object containing label and onClick handlers for each action
+- **ProfilesList** (object): The profiles list object containing label and onClick handlers for each action
+- **ProfilesListProps** (object): The profiles list props object containing label and onClick handlers for each action
+- **AddProfileMenuItem** (object): The add profile menu item object containing label and onClick handlers for each action
+- **AddProfileMenuItemProps** (object): The add profile menu item props object containing label and onClick handlers for each action
+- **LogoutItemProps** (object): The logout menu item props object containing label and onClick handlers for each action
+
+## Notes
+
+- **Related Components**:
+  - Header: Parent component that contains the AccountPopover
+  - Popover: Base component used for the popup interface
+  - MenuItem: Used for individual menu options
+  - AccountMenu: Wrapper component that manages the popover state
+
+## Example Usage
+
+```javascript
+import { AccountPopover } from '@baseapp-frontend/design-system'
+
+const MyComponent = () => {
+  return (
+    <AccountPopover
+      MenuItemsProps={{
+        menuItems: [
+          { label: 'Profile', onClick: () => console.log('Profile clicked') },
+          { label: 'Settings', onClick: () => console.log('Settings clicked') },
+        ],
+      }}
+      SwitchProfileMenuProps={{
+        label: 'Switch Profile',
+        onClick: () => console.log('Switch Profile clicked'),
+      }}
+      ProfilesListProps={{
+        label: 'Profiles List',
+        onClick: () => console.log('Profiles List clicked'),
+      }}
+      AddProfileMenuItemProps={{
+        label: 'Add Profile',
+        onClick: () => console.log('Add Profile clicked'),
+      }}
+      LogoutItemProps={{
+        label: 'Logout',
+        onClick: () => console.log('Logout clicked'),
+      }}
+    />
+  )
+}
+export default MyComponent
+```
\ No newline at end of file
diff --git a/packages/components/modules/navigations/Header/__storybook__/Header.mdx b/packages/components/modules/navigations/Header/__storybook__/Header.mdx
new file mode 100644
index 00000000..13e75bea
--- /dev/null
+++ b/packages/components/modules/navigations/Header/__storybook__/Header.mdx
@@ -0,0 +1,57 @@
+import { Meta } from '@storybook/addon-docs'
+
+<Meta title="@baseapp-frontend | components/Navigation/Header" />
+
+# Component Documentation
+
+## Header
+
+- **Purpose**: A versatile header component that provides navigation controls and branding elements for the application layout.
+- **Expected Behavior**: Renders a customizable app bar with optional logo, navigation toggle, and account menu. Adapts its layout based on theme settings and screen size.
+
+## Use Cases
+
+- **Current Usage**: Used as the main navigation header across the application, providing consistent branding and navigation controls.
+- **Potential Usage**: Could be used in:
+  - Admin dashboards
+  - Web applications requiring consistent navigation
+  - Portals with user account management
+  - Applications with multiple layout options
+
+## Props
+
+- **settings** (object): Configuration object for theme and layout settings
+  - **themeLayout**: Determines the header layout ('horizontal' | 'centered' | 'vertical')
+- **children** (ReactNode): Optional content to render within the header
+- **onOpenNav** (function): Callback function for handling navigation menu toggle
+- **LogoIcon** (component): Custom logo component to display in the header
+- **AccountMenu** (component): Custom account menu component, defaults to DefaultAccountMenu
+- **AccountMenuProps** (object): Props passed to the AccountMenu component
+- **ToolbarProps** (object): Props passed to the underlying MUI Toolbar component
+
+## Notes
+
+- **Related Components**:
+  - Logo: For branding display
+  - AccountMenu: For user account actions
+  - MenuIcon: For navigation toggle
+  - Toolbar: For layout structure
+
+## Example Usage
+
+```javascript
+import { Header } from '@baseapp-frontend/design-system'
+import { LogoIcon } from '@baseapp-frontend/design-system'
+import { AccountMenu } from '@baseapp-frontend/design-system'
+
+const MyComponent = () => {
+  return (
+    <Header settings={{ themeLayout: 'horizontal' }}>
+      <LogoIcon />
+      <AccountMenu />
+    </Header>
+  )
+}
+
+export default MyComponent
+```
\ No newline at end of file
diff --git a/packages/components/modules/navigations/NavCentered/__storybook__/NavCentered.mdx b/packages/components/modules/navigations/NavCentered/__storybook__/NavCentered.mdx
new file mode 100644
index 00000000..1d1d9ec4
--- /dev/null
+++ b/packages/components/modules/navigations/NavCentered/__storybook__/NavCentered.mdx
@@ -0,0 +1,57 @@
+import { Meta } from '@storybook/addon-docs'
+
+<Meta title="@baseapp-frontend | components/Navigation/NavCentered" />
+
+# Component Documentation
+
+## NavCentered
+
+- **Purpose**: A navigation component that provides a centered horizontal menu layout for desktop views and transforms into a drawer for mobile views.
+- **Expected Behavior**: On desktop screens (lg and up), displays as a horizontal scrollable navigation bar with centered menu items. On mobile screens (lgDown), transforms into a vertical drawer component.
+
+## Use Cases
+
+- **Current Usage**: Used as a centered horizontal navigation component with responsive mobile drawer.
+- **Potential Usage**: Could be used in:
+  - Applications requiring centered horizontal navigation
+  - Interfaces needing scrollable menu content
+  - Responsive web applications
+  - Systems with desktop and mobile navigation patterns
+  - Content-focused layouts where centered navigation is preferred
+
+## Props
+
+- **navData** (array): Navigation items data containing routes and content
+- **openNav** (boolean): Controls visibility of mobile navigation drawer
+- **onCloseNav** (function): Callback when mobile navigation drawer closes
+
+## Notes
+
+- **Related Components**:
+  - Scrollbar: Handles horizontal scrolling of navigation items
+  - NavSectionHorizontal: Renders horizontal navigation items with tab layout
+  - VerticalDrawer: Mobile view navigation component
+  - useResponsive: Hook for responsive breakpoint detection
+
+## Example Usage
+
+```javascript
+import { NavCentered } from '@baseapp-frontend/design-system'
+
+const MyComponent = () => {
+  const [openNav, setOpenNav] = useState(false)
+  return (
+    <NavCentered
+      navData={[
+        { title: 'Home', icon: <MenuIcon /> },
+        { title: 'About', icon: <InfoIcon /> },
+        { title: 'Contact', icon: <ContactIcon /> },
+      ]}
+      openNav={openNav}
+      onCloseNav={() => setOpenNav(false)}
+    />
+  )
+}
+
+export default MyComponent
+```
\ No newline at end of file
diff --git a/packages/components/modules/navigations/NavHorizontal/__storybook__/NavHorizontal.mdx b/packages/components/modules/navigations/NavHorizontal/__storybook__/NavHorizontal.mdx
new file mode 100644
index 00000000..1279f39f
--- /dev/null
+++ b/packages/components/modules/navigations/NavHorizontal/__storybook__/NavHorizontal.mdx
@@ -0,0 +1,58 @@
+import { Meta } from '@storybook/addon-docs'
+
+<Meta title="@baseapp-frontend | components/Navigation/NavHorizontal" />
+
+# Component Documentation
+
+## NavHorizontal
+
+- **Purpose**: A horizontal navigation component that provides a secondary navigation bar below the main header.
+- **Expected Behavior**: On desktop screens (lg and up), displays as a horizontal navigation bar fixed below the header with centered menu items and horizontal scrolling if needed. On mobile screens (lgDown), transforms into a vertical drawer component. Uses blur effect on the background.
+
+## Use Cases
+
+- **Current Usage**: Secondary horizontal navigation bar below main header.
+- **Potential Usage**: Could be used in:
+  - Multi-level navigation systems
+  - Complex web applications requiring secondary navigation
+  - Interfaces needing horizontally scrollable navigation items
+  - Applications with responsive navigation requirements
+  - Systems with desktop and mobile navigation patterns
+
+## Props
+
+- **navData** (array): Navigation items data containing routes and content
+- **openNav** (boolean): Controls visibility of mobile navigation drawer 
+- **onCloseNav** (function): Callback when mobile navigation drawer closes
+
+## Notes
+
+- **Related Components**:
+  - Scrollbar: Handles horizontal scrolling of navigation items
+  - NavSectionHorizontal: Renders horizontal navigation items
+  - VerticalDrawer: Mobile view navigation component
+  - HeaderShadow: Adds shadow effect below navigation
+  - AppBar: Material-UI container component
+
+## Example Usage
+
+```javascript
+import { NavHorizontal } from '@baseapp-frontend/design-system'
+
+const MyComponent = () => {
+  const [openNav, setOpenNav] = useState(false)
+  return (
+    <NavHorizontal
+      navData={[
+        { title: 'Home', icon: <MenuIcon /> },
+        { title: 'About', icon: <InfoIcon /> },
+        { title: 'Contact', icon: <ContactIcon /> },
+      ]}
+      openNav={openNav}
+      onCloseNav={() => setOpenNav(false)}
+    />
+  )
+}
+
+export default MyComponent
+```
\ No newline at end of file
diff --git a/packages/components/modules/navigations/NavMini/__storybook__/NavMini.mdx b/packages/components/modules/navigations/NavMini/__storybook__/NavMini.mdx
new file mode 100644
index 00000000..88250694
--- /dev/null
+++ b/packages/components/modules/navigations/NavMini/__storybook__/NavMini.mdx
@@ -0,0 +1,75 @@
+import { Meta } from '@storybook/addon-docs'
+
+<Meta title="@baseapp-frontend | components/Navigation/NavMini" />
+
+# Component Documentation
+## NavMini
+
+- **Purpose**: A compact navigation component that provides a fixed-width mini sidebar menu with icon-only display for desktop views and transforms into a drawer for mobile views.
+- **Expected Behavior**: On desktop screens (lg and up), displays as a narrow vertical sidebar with width NAV_WIDTH.MINI containing only icons. On mobile screens (lgDown), transforms into a full drawer component. Includes optional logo placement and navigation toggle button.
+
+## Use Cases
+
+- **Current Usage**: Used as a space-efficient navigation sidebar when minimal screen space usage is desired.
+- **Potential Usage**: Could be used in:
+  - Applications requiring minimal-width navigation
+  - Interfaces prioritizing content space
+  - Responsive web applications
+  - Systems needing collapsible navigation options
+  - Dashboards with space constraints
+
+## Props
+
+- **navData** (array): Navigation items data containing routes and content
+- **settings** (object): Configuration settings for the navigation component
+- **setSettings** (function): Callback to update navigation settings
+- **LogoIcon** (component): Optional custom logo component to display at top
+- **openNav** (boolean): Controls visibility of mobile navigation drawer
+- **onCloseNav** (function): Callback when mobile navigation drawer closes
+- **hideToggleButton** (boolean): Optional flag to hide the navigation toggle button, defaults to false
+
+## Notes
+
+- **Related Components**:
+  - Logo: Optional branding component at top
+  - NavSectionMini: Renders mini navigation items
+  - NavToggleButton: Button to expand/collapse navigation
+  - VerticalDrawer: Mobile view navigation component
+  - Box: Container component with responsive styles
+  - Stack: Vertical layout container
+
+## Example Usage
+
+```javascript
+import { NavMini } from '@baseapp-frontend/design-system'
+import { FavoriteIcon, MentionIcon, MenuIcon, PenEditIcon } from '@baseapp-frontend/design-system'
+import { BaseAppLogoCondensed } from '@baseapp-frontend/design-system'
+
+const MyComponent = () => {
+  return (
+    <NavMini
+      navData={[
+        {
+          subheader: 'BASEAPP',
+          items: [{ title: 'Home', icon: <MenuIcon /> }],
+        },
+        {
+          subheader: 'BASIC',
+          items: [
+            { title: 'Feature Requests', icon: <MentionIcon /> },
+            { title: 'Flat Pages', icon: <PenEditIcon /> },
+            { title: 'Feedback', icon: <FavoriteIcon /> },
+          ],
+        },
+      ]}
+      settings={defaultTheme.settings}
+      LogoIcon={BaseAppLogoCondensed}
+      openNav={false}
+      hideToggleButton={true}
+      onCloseNav={() => console.log('NavMini closed')}
+    />
+  )
+}
+
+export default MyComponent
+```
\ No newline at end of file
diff --git a/packages/components/modules/navigations/NavVertical/__storybook__/NavVertical.mdx b/packages/components/modules/navigations/NavVertical/__storybook__/NavVertical.mdx
new file mode 100644
index 00000000..7eb17c70
--- /dev/null
+++ b/packages/components/modules/navigations/NavVertical/__storybook__/NavVertical.mdx
@@ -0,0 +1,64 @@
+import { Meta } from '@storybook/addon-docs'
+
+<Meta title="@baseapp-frontend | components/Navigation/NavVertical" />
+
+# Component Documentation
+
+## NavVertical
+
+- **Purpose**: A vertical navigation component that provides a fixed-width sidebar menu with scrollable content and optional logo.
+- **Expected Behavior**: Displays as a vertical sidebar on desktop screens with a width of NAV_WIDTH.VERTICAL. On mobile screens (lgDown breakpoint), transforms into a drawer component. Includes optional logo placement and scrollable navigation sections.
+
+## Use Cases
+
+- **Current Usage**: Main vertical navigation sidebar for desktop views.
+- **Potential Usage**: Could be used in:
+  - Applications requiring fixed sidebar navigation
+  - Interfaces needing scrollable menu content
+  - Layouts with optional logo placement
+  - Responsive applications with mobile drawer navigation
+  - Systems requiring collapsible navigation options
+
+## Props
+
+- **settings** (object): Configuration settings for the navigation component
+- **setSettings** (function): Callback to update navigation settings
+- **navData** (array): Navigation items data containing routes and content
+- **LogoIcon** (component): Optional custom logo component to display at top
+- **openNav** (boolean): Controls visibility of mobile navigation drawer
+- **onCloseNav** (function): Callback when mobile navigation drawer closes
+- **hideToggleButton** (boolean): Optional flag to hide the navigation toggle button, defaults to false
+
+## Notes
+
+- **Related Components**:
+  - Scrollbar: Handles scrollable content within navigation
+  - NavSectionVertical: Renders navigation item sections
+  - NavToggleButton: Button to expand/collapse navigation
+  - VerticalDrawer: Mobile view navigation component
+  - Logo: Optional branding component
+
+## Example Usage
+
+```javascript
+import { NavVertical } from '@baseapp-frontend/design-system'
+import { BaseAppLogoCondensed } from '@baseapp-frontend/design-system'
+
+const MyComponent = () => {
+  const [openNav, setOpenNav] = useState(false)
+  return (
+    <NavVertical
+      navData={[
+        { title: 'Home', icon: <MenuIcon /> },
+        { title: 'About', icon: <InfoIcon /> },
+        { title: 'Contact', icon: <ContactIcon /> },
+      ]}
+      openNav={openNav}
+      onCloseNav={() => setOpenNav(false)}
+      hideToggleButton={true}
+    />
+  )
+}
+
+export default MyComponent
+```
\ No newline at end of file
diff --git a/packages/components/modules/navigations/NavigationLayout/__storybook__/NavigationLayout.mdx b/packages/components/modules/navigations/NavigationLayout/__storybook__/NavigationLayout.mdx
new file mode 100644
index 00000000..abfd2258
--- /dev/null
+++ b/packages/components/modules/navigations/NavigationLayout/__storybook__/NavigationLayout.mdx
@@ -0,0 +1,71 @@
+import { Meta } from '@storybook/addon-docs'
+
+<Meta title="@baseapp-frontend | components/Navigation/NavigationLayout" />
+
+# Component Documentation
+
+## NavigationLayout
+
+- **Purpose**: A comprehensive layout component that provides the main navigation structure for the application, integrating various navigation elements like headers, sidebars, and account menus.
+- **Expected Behavior**: Renders a full-page layout with configurable navigation elements, adapting to different screen sizes and user preferences. Manages the overall navigation state and UI settings.
+
+## Use Cases
+
+- **Current Usage**: Used as the main layout wrapper for applications requiring a consistent navigation structure.
+- **Potential Usage**: Could be used in:
+  - Enterprise applications
+  - Admin dashboards
+  - Content management systems
+  - Any large-scale application requiring complex navigation
+  - Applications needing consistent layout across multiple pages
+
+## Props
+
+- **navData** (NavigationData): Navigation configuration data containing routes, icons, and menu structure
+- **settings** (UISettings): UI configuration settings for the navigation components
+- **setSettings** (function): Callback to update UI settings
+- **LogoIcon** (React.FC): Optional custom logo component
+- **AccountMenu** (React.FC): Optional custom account menu component
+- **AccountMenuProps** (object): Optional props for the account menu component
+- **ToolbarProps** (MuiToolbarProps): Optional props for the Material-UI Toolbar component
+
+## Notes
+
+- **Related Components**:
+  - NavMini: Compact navigation sidebar
+  - Header: Top navigation bar
+  - AccountMenu: User account management menu
+  - VerticalDrawer: Mobile navigation drawer
+
+## Example Usage
+
+```javascript
+import { NavigationLayout } from '@baseapp-frontend/design-system'
+import { BaseAppLogoCondensed } from '@baseapp-frontend/design-system'
+
+const MyComponent = () => {
+  return (
+    <NavigationLayout
+      navData={[
+        {
+          subheader: 'BASEAPP',
+          items: [{ title: 'Home', icon: <MenuIcon /> }],
+        },
+        {
+          subheader: 'BASIC',
+          items: [
+            { title: 'Feature Requests', icon: <MentionIcon /> },
+            { title: 'Flat Pages', icon: <PenEditIcon /> },
+            { title: 'Feedback', icon: <FavoriteIcon /> },
+          ],
+        },
+      ]}
+      settings={defaultTheme.settings}
+      setSettings={() => {}}
+      LogoIcon={BaseAppLogoCondensed}
+    />
+  )
+}
+
+export default MyComponent
+```
\ No newline at end of file
diff --git a/packages/design-system/components/Scrollbar/__storybook__/Scrollbar.mdx b/packages/design-system/components/Scrollbar/__storybook__/Scrollbar.mdx
new file mode 100644
index 00000000..868f263c
--- /dev/null
+++ b/packages/design-system/components/Scrollbar/__storybook__/Scrollbar.mdx
@@ -0,0 +1,52 @@
+import { Meta } from '@storybook/addon-docs'
+
+<Meta title="@baseapp-frontend | designSystem/General/Scrollbar" />
+
+# Component Documentation
+
+## Scrollbar
+
+- **Purpose**: A customizable scrollbar component that provides a consistent and styled scrolling experience across different browsers and platforms.
+- **Expected Behavior**: Wraps content and provides a custom scrollbar interface that maintains native scrolling functionality while offering a more polished visual appearance.
+
+## Use Cases
+
+- **Current Usage**: Used in containers with overflow content where a custom scrollbar appearance is desired while maintaining native scroll behavior.
+- **Potential Usage**: Could be used in:
+  - Long content panels
+  - Side navigation menus
+  - Chat or message windows
+  - Code or text editors
+  - Lists with many items
+
+## Props
+
+- **children** (ReactNode): The content to be wrapped with the custom scrollbar.
+- **sx** (SxProps): Optional Material-UI system props for additional styling.
+
+## Notes
+
+- **Related Components**:
+  - SwipeableDrawer: For mobile-friendly scrollable drawers
+  - Dialog: For scrollable modal content
+  - List: When displaying long lists of items
+
+## Example Usage
+
+```javascript
+import { Scrollbar } from '@baseapp-frontend/design-system'
+
+const MyComponent = () => {
+  return (
+    <Scrollbar sx={{ width: 300, height: 300 }}>
+      {Array.from({ length: 30 }, (_, i) => (
+        <div key={i} style={{ padding: '4px 0' }}>
+          Item {i + 1}
+        </div>
+      ))}
+    </Scrollbar>
+  )
+}
+
+export default MyComponent
+```
diff --git a/packages/design-system/components/dialogs/Dialog/__storybook__/BaseDialog.mdx b/packages/design-system/components/dialogs/Dialog/__storybook__/BaseDialog.mdx
new file mode 100644
index 00000000..94041e66
--- /dev/null
+++ b/packages/design-system/components/dialogs/Dialog/__storybook__/BaseDialog.mdx
@@ -0,0 +1,50 @@
+import { Meta } from '@storybook/addon-docs'
+
+<Meta title="@baseapp-frontend | designSystem/Dialogs/BaseDialog" />
+
+# Component Documentation
+
+## Base Dialog
+
+- **Purpose**: A Dialog component that provides a modal window for displaying content that requires user attention or interaction. It creates a focused environment by overlaying the main content and dimming the background.
+- **Expected Behavior**: Opens as a modal overlay centered on the screen. Can be closed via a close button, clicking outside (if enabled), or pressing ESC key (if enabled). Should trap focus within the dialog when open for accessibility.
+
+## Use Cases
+
+- **Current Usage**: Used in confirmation flows, detailed information display, form submissions, and important user notifications.
+- **Potential Usage**: Could be used for:
+  - User preferences or settings panels
+  - Detailed item previews
+  - Multi-step forms
+  - Error or success messages requiring acknowledgment
+
+## Props
+
+- **children** (ReactNode): The content to be displayed inside the dialog.
+- **open** (boolean): Controls whether the dialog is visible.
+- **onClose** ((event: {}, reason: "backdropClick" | "escapeKeyDown") => void): Callback fired when the dialog requests to be closed.
+
+## Notes
+
+- **Related Components**:
+  - ConfirmDialog: A specialized version for confirmation actions
+  - SwipeableDrawer: An alternative for mobile-focused interfaces
+  - Popover: For less formal or contextual overlays
+
+## Example Usage
+
+```javascript
+import { Dialog } from '@baseapp-frontend/design-system'
+
+const MyComponent = () => {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <Dialog open={open} onClose={() => setOpen(false)}>
+      <div>Dialog content</div>
+    </Dialog>
+  )
+}
+export default MyComponent
+```
+
diff --git a/packages/design-system/components/displays/LoadingState/__storybook__/LoadingState.mdx b/packages/design-system/components/displays/LoadingState/__storybook__/LoadingState.mdx
new file mode 100644
index 00000000..fb6dda59
--- /dev/null
+++ b/packages/design-system/components/displays/LoadingState/__storybook__/LoadingState.mdx
@@ -0,0 +1,43 @@
+import { Meta } from '@storybook/addon-docs'
+
+<Meta title="@baseapp-frontend | designSystem/Displays/LoadingState" />
+
+# Component Documentation
+
+## LoadingState
+
+- **Purpose**: A reusable loading indicator component that displays a centered circular progress animation to indicate that content is being loaded or processed.
+- **Expected Behavior**: Renders a centered circular progress spinner within its container.
+
+## Use Cases
+
+- **Current Usage**: Used during data fetching, content loading, and processing operations to provide visual feedback to users.
+- **Potential Usage**: Could be used in:
+  - Page loading states
+  - Form submission feedback
+  - Data refresh indicators
+  - Section-specific loading states
+  - Asynchronous operation feedback
+
+## Props
+
+- **CircularProgressProps** (MUI CircularProgress Props): Optional props passed directly to the underlying MUI CircularProgress component.
+
+## Notes
+
+- **Related Components**:
+  - CircularProgress: The base component used internally
+  - Dialog: For loading states in modal contexts
+  - Popover: For loading states in popup contexts
+
+## Example Usage
+
+```javascript
+import { LoadingState } from '@baseapp-frontend/design-system'
+
+const MyComponent = () => {
+  return <LoadingState CircularProgressProps={{ size: 40 }} />
+}
+
+export default MyComponent
+```
\ No newline at end of file