diff --git a/src/components/breadcrumb/breadcrumb.jsx b/src/components/breadcrumb/breadcrumb.jsx
index 7b0ad707..308a625d 100644
--- a/src/components/breadcrumb/breadcrumb.jsx
+++ b/src/components/breadcrumb/breadcrumb.jsx
@@ -30,14 +30,17 @@ const Breadcrumb = ( { children, size = 'sm' } ) => {
 		</BreadcrumbContext.Provider>
 	);
 };
+Breadcrumb.displayName = 'Breadcrumb';
 
 const BreadcrumbList = ( { children } ) => {
 	return <>{ children }</>;
 };
+BreadcrumbList.displayName = 'Breadcrumb.List';
 
 const BreadcrumbItem = ( { children } ) => {
 	return <li className="m-0 inline-flex items-center gap-2">{ children }</li>;
 };
+BreadcrumbItem.displayName = 'Breadcrumb.Item';
 
 const BreadcrumbLink = ( {
 	href,
@@ -63,6 +66,7 @@ const BreadcrumbLink = ( {
 		</AsElement>
 	);
 };
+BreadcrumbLink.displayName = 'Breadcrumb.Link';
 
 const BreadcrumbSeparator = ( { type } ) => {
 	const { sizes } = useContext( BreadcrumbContext );
@@ -77,6 +81,7 @@ const BreadcrumbSeparator = ( { type } ) => {
 		</span>
 	);
 };
+BreadcrumbSeparator.displayName = 'Breadcrumb.Separator';
 
 const BreadcrumbEllipsis = () => {
 	const { sizes } = useContext( BreadcrumbContext );
@@ -88,6 +93,7 @@ const BreadcrumbEllipsis = () => {
 		/>
 	);
 };
+BreadcrumbEllipsis.displayName = 'Breadcrumb.Ellipsis';
 
 const BreadcrumbPage = ( { children } ) => {
 	const { sizes } = useContext( BreadcrumbContext );
@@ -98,13 +104,13 @@ const BreadcrumbPage = ( { children } ) => {
 		</span>
 	);
 };
+BreadcrumbPage.displayName = 'Breadcrumb.Page';
 
-export {
-	Breadcrumb,
-	BreadcrumbList,
-	BreadcrumbItem,
-	BreadcrumbLink,
-	BreadcrumbSeparator,
-	BreadcrumbEllipsis,
-	BreadcrumbPage,
-};
+export default Object.assign( Breadcrumb, {
+	List: BreadcrumbList,
+	Item: BreadcrumbItem,
+	Link: BreadcrumbLink,
+	Separator: BreadcrumbSeparator,
+	Ellipsis: BreadcrumbEllipsis,
+	Page: BreadcrumbPage,
+} );
diff --git a/src/components/breadcrumb/breadcrumb.stories.js b/src/components/breadcrumb/breadcrumb.stories.js
index 2b6f3792..13536547 100644
--- a/src/components/breadcrumb/breadcrumb.stories.js
+++ b/src/components/breadcrumb/breadcrumb.stories.js
@@ -1,14 +1,6 @@
 // Breadcrumb.stories.js
 
-import {
-	Breadcrumb,
-	BreadcrumbList,
-	BreadcrumbItem,
-	BreadcrumbLink,
-	BreadcrumbSeparator,
-	BreadcrumbEllipsis,
-	BreadcrumbPage,
-} from './breadcrumb'; // Adjust the import path as needed
+import Breadcrumb from './breadcrumb'; // Adjust the import path as needed
 
 export default {
 	title: 'Atoms/Breadcrumb',
@@ -35,23 +27,23 @@ export default {
 
 const Template = ( args ) => (
 	<Breadcrumb size={ args.size }>
-		<BreadcrumbList>
-			<BreadcrumbItem>
-				<BreadcrumbLink href="#">Home</BreadcrumbLink>
-			</BreadcrumbItem>
-			<BreadcrumbSeparator type={ args.separatorType } />
-			<BreadcrumbItem>
-				<BreadcrumbEllipsis />
-			</BreadcrumbItem>
-			<BreadcrumbSeparator type={ args.separatorType } />
-			<BreadcrumbItem>
-				<BreadcrumbLink href="#">Category</BreadcrumbLink>
-			</BreadcrumbItem>
-			<BreadcrumbSeparator type={ args.separatorType } />
-			<BreadcrumbItem>
-				<BreadcrumbPage>Current Page</BreadcrumbPage>
-			</BreadcrumbItem>
-		</BreadcrumbList>
+		<Breadcrumb.List>
+			<Breadcrumb.Item>
+				<Breadcrumb.Link href="#">Home</Breadcrumb.Link>
+			</Breadcrumb.Item>
+			<Breadcrumb.Separator type={ args.separatorType } />
+			<Breadcrumb.Item>
+				<Breadcrumb.Ellipsis />
+			</Breadcrumb.Item>
+			<Breadcrumb.Separator type={ args.separatorType } />
+			<Breadcrumb.Item>
+				<Breadcrumb.Link href="#">Category</Breadcrumb.Link>
+			</Breadcrumb.Item>
+			<Breadcrumb.Separator type={ args.separatorType } />
+			<Breadcrumb.Item>
+				<Breadcrumb.Page>Current Page</Breadcrumb.Page>
+			</Breadcrumb.Item>
+		</Breadcrumb.List>
 	</Breadcrumb>
 );
 
diff --git a/src/components/breadcrumb/index.js b/src/components/breadcrumb/index.js
index 47706fff..f939ff31 100644
--- a/src/components/breadcrumb/index.js
+++ b/src/components/breadcrumb/index.js
@@ -1,9 +1 @@
-export {
-	Breadcrumb,
-	BreadcrumbList,
-	BreadcrumbItem,
-	BreadcrumbLink,
-	BreadcrumbSeparator,
-	BreadcrumbEllipsis,
-	BreadcrumbPage,
-} from './breadcrumb.jsx';
+export { default } from './breadcrumb.jsx';
diff --git a/src/components/breadcrumb/readme.md b/src/components/breadcrumb/readme.md
index 244a06a0..e84c5e8a 100644
--- a/src/components/breadcrumb/readme.md
+++ b/src/components/breadcrumb/readme.md
@@ -12,21 +12,21 @@
 - **default value:** `sm`
 - **description:** The size of the breadcrumb, can be `sm` or `md`.
 
-## `BreadcrumbList` Props
+## `Breadcrumb.List` Props
 - **Description:** Wrapper for the breadcrumb list.  
 
 ### children
 - **type:** `ReactNode`
 - **description:** The child items to be rendered as a list of breadcrumb items.
 
-## `BreadcrumbItem` Props
+## `Breadcrumb.Item` Props
 - **Description:** Represents a single breadcrumb item.  
 
 ### children
 - **type:** `ReactNode`
 - **description:** The content for the breadcrumb item, usually containing a link or static text.
 
-## `BreadcrumbLink` Props
+## `Breadcrumb.Link` Props
 - **Description:** The clickable link within a breadcrumb item.
 
 ### href (required)
@@ -46,7 +46,7 @@
 - **default value:** `a`
 - **description:** Used as a wrapper for breadcrumb links. Defaults to an anchor `('a')`, but can be customized with components like `Link` from React Router.
 
-## `BreadcrumbSeparator` Props
+## `Breadcrumb.Separator` Props
 - **Description:** Separator used between breadcrumb items.
 
 ### type (optional)
@@ -57,7 +57,7 @@
 ## `BreadcrumbEllipsis` Props
 - **Description:** Displays an ellipsis when the breadcrumb list is too long, or represents hidden items.
 
-## `BreadcrumbPage` Props
+## `Breadcrumb.Page` Props
 - **Description:** Represents the current page in the breadcrumb trail, displayed as static text instead of a link.
 
 ### children
@@ -68,15 +68,17 @@
 
 ```jsx
 <Breadcrumb>
-    <BreadcrumbItem>
-        <BreadcrumbLink href="/home">Home</BreadcrumbLink>
-    </BreadcrumbItem>
-    <BreadcrumbSeparator type="slash" />
-    <BreadcrumbItem>
-        <BreadcrumbLink href="/category">Category</BreadcrumbLink>
-    </BreadcrumbItem>
-    <BreadcrumbSeparator />
-    <BreadcrumbItem>
-        <BreadcrumbPage>Current Page</BreadcrumbPage>
-    </BreadcrumbItem>
+	<Breadcrumb.List>
+        <Breadcrumb.Item>
+            <Breadcrumb.Link href="/home">Home</Breadcrumb.Link>
+        </Breadcrumb.Item>
+        <Breadcrumb.Separator type="slash" />
+        <Breadcrumb.Item>
+            <Breadcrumb.Link href="/category">Category</Breadcrumb.Link>
+        </Breadcrumb.Item>
+        <Breadcrumb.Separator />
+        <Breadcrumb.Item>
+            <Breadcrumb.Page>Current Page</Breadcrumb.Page>
+        </Breadcrumb.Item>
+	</Breadcrumb.List>
 </Breadcrumb>
diff --git a/src/components/index.js b/src/components/index.js
index c33e606a..494a1f67 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,7 +1,7 @@
 export { default as Button } from './button/index';
 export { default as Switch } from './switch/index';
 export { default as Checkbox } from './checkbox/index';
-export { RadioButtonGroup, RadioButton } from './radio-button-group/index';
+export { default as RadioButton } from './radio-button-group/index';
 export { default as Badge } from './badge/index';
 export { default as TextArea } from './textarea/index';
 export { default as Avatar } from './avatar/index';
@@ -22,15 +22,7 @@ export { default as ProgressSteps } from './progress-steps/index';
 export { default as Skeleton } from './skeleton/index';
 export { default as Menu } from './menu-item/index';
 export { default as Sidebar } from './sidebar/index';
-export {
-	Breadcrumb,
-	BreadcrumbList,
-	BreadcrumbItem,
-	BreadcrumbLink,
-	BreadcrumbSeparator,
-	BreadcrumbEllipsis,
-	BreadcrumbPage,
-} from './breadcrumb/index';
+export { default as Breadcrumb } from './breadcrumb/index';
 export { default as Dialog } from './dialog/index';
 export { default as Topbar } from './topbar/index';
 export { default as Drawer } from './drawer/index';
diff --git a/src/components/radio-button-group/index.js b/src/components/radio-button-group/index.js
index a201542f..7d2edabe 100644
--- a/src/components/radio-button-group/index.js
+++ b/src/components/radio-button-group/index.js
@@ -1 +1 @@
-export { RadioButtonGroup, RadioButton } from './radio-button-group.jsx';
+export { default } from './radio-button-group.jsx';
diff --git a/src/components/radio-button-group/radio-button-group.jsx b/src/components/radio-button-group/radio-button-group.jsx
index bbf97782..0f99cb8e 100644
--- a/src/components/radio-button-group/radio-button-group.jsx
+++ b/src/components/radio-button-group/radio-button-group.jsx
@@ -140,6 +140,7 @@ const RadioButtonGroup = ( {
 		</>
 	);
 };
+RadioButtonGroup.displayName = 'RadioButton.Group';
 
 const RadioButtonComponent = (
 	{
@@ -363,7 +364,7 @@ const RadioButtonComponent = (
 	);
 };
 const RadioButton = forwardRef( RadioButtonComponent );
-RadioButton.displayName = 'RadioButton';
+RadioButton.displayName = 'RadioButton.Button';
 
 const ButtonGroupItem = ( {
 	id,
@@ -454,4 +455,7 @@ const ButtonGroupItem = ( {
 	);
 };
 
-export { RadioButtonGroup, RadioButton };
+export default Object.assign( RadioButton, {
+	Group: RadioButtonGroup,
+	Button: RadioButton,
+} );
diff --git a/src/components/radio-button-group/radio-button-group.stories.js b/src/components/radio-button-group/radio-button-group.stories.js
index 22a1f319..6275ded7 100644
--- a/src/components/radio-button-group/radio-button-group.stories.js
+++ b/src/components/radio-button-group/radio-button-group.stories.js
@@ -1,11 +1,11 @@
 import React, { useState } from 'react';
-import { RadioButtonGroup, RadioButton } from './radio-button-group.jsx';
+import RadioButton from './radio-button-group.jsx';
 import { Plus, Smile } from 'lucide-react';
 import Badge from '../badge/badge.jsx';
 
 export default {
-	title: 'Atoms/RadioButtonGroup',
-	component: RadioButtonGroup,
+	title: 'Atoms/RadioButton',
+	component: RadioButton.Group,
 	parameters: {
 		layout: 'centered',
 	},
@@ -106,7 +106,7 @@ export default {
 		},
 		label: {
 			description:
-				'`RadioButton` : Object containing heading and description for each RadioButton.',
+				'`RadioButton.Button` : Object containing heading and description for each RadioButton.',
 			control: {
 				type: 'object',
 			},
@@ -122,7 +122,8 @@ export default {
 			},
 		},
 		borderOn: {
-			description: '`RadioButton` : Adds a border around the button.',
+			description:
+				'`RadioButton.Button` : Adds a border around the button.',
 			control: 'boolean',
 			table: {
 				type: { summary: 'boolean' },
@@ -130,7 +131,7 @@ export default {
 			},
 		},
 		useSwitch: {
-			description: '`RadioButton` :Uses a switch for selection.',
+			description: '`RadioButton.Button` :Uses a switch for selection.',
 			control: 'boolean',
 			table: {
 				type: { summary: 'boolean' },
@@ -139,14 +140,15 @@ export default {
 		},
 		icon: {
 			description:
-				'`RadioButton` :Custom icon component to be displayed.',
+				'`RadioButton.Button` :Custom icon component to be displayed.',
 			control: {
 				type: 'text',
 			},
 			defaultValue: null,
 		},
 		inlineIcon: {
-			description: '`RadioButton` : Positions icon inline to the label.',
+			description:
+				'`RadioButton.Button` : Positions icon inline to the label.',
 			control: 'boolean',
 			table: {
 				type: { summary: 'boolean' },
@@ -154,7 +156,8 @@ export default {
 			},
 		},
 		hideSelection: {
-			description: '`RadioButton` : Positions icon inline to the label.',
+			description:
+				'`RadioButton.Button` : Positions icon inline to the label.',
 			control: 'boolean',
 			table: {
 				type: { summary: 'boolean' },
@@ -162,7 +165,8 @@ export default {
 			},
 		},
 		reversePosition: {
-			description: '`RadioButton` : Positions icon inline to the label.',
+			description:
+				'`RadioButton.Button` : Positions icon inline to the label.',
 			control: 'boolean',
 			table: {
 				type: { summary: 'boolean' },
@@ -170,14 +174,14 @@ export default {
 			},
 		},
 		badgeItem: {
-			description: '`RadioButton` : Badge Item to be displayed.',
+			description: '`RadioButton.Button` : Badge Item to be displayed.',
 			control: {
 				type: 'text',
 			},
 			defaultValue: null,
 		},
 		disabled: {
-			description: '`RadioButton` : Disables radio button.',
+			description: '`RadioButton.Button` : Disables radio button.',
 			control: 'boolean',
 			table: {
 				type: { summary: 'boolean' },
@@ -191,7 +195,7 @@ const Template = ( args ) => {
 	const [ value, setValue ] = useState( args.value || args.defaultValue );
 
 	return (
-		<RadioButtonGroup
+		<RadioButton.Group
 			{ ...args }
 			value={ value }
 			columns={ ( args.columns ?? args.style === 'tile' ) ? 6 : 3 }
@@ -202,15 +206,15 @@ const Template = ( args ) => {
 		>
 			{ [ 1, 2, 3, 4, 5, 6 ].map( ( num ) =>
 				args.style === 'tile' ? (
-					<RadioButton
+					<RadioButton.Button
 						value={ `option${ num }` }
 						key={ num }
 						disabled={ args.disabled }
 					>
 						<Plus />
-					</RadioButton>
+					</RadioButton.Button>
 				) : (
-					<RadioButton
+					<RadioButton.Button
 						key={ num }
 						value={ `option${ num }` }
 						label={
@@ -242,7 +246,7 @@ const Template = ( args ) => {
 					/>
 				)
 			) }
-		</RadioButtonGroup>
+		</RadioButton.Group>
 	);
 };
 
diff --git a/src/components/radio-button-group/readme.md b/src/components/radio-button-group/readme.md
index d7d72405..ce329f3e 100644
--- a/src/components/radio-button-group/readme.md
+++ b/src/components/radio-button-group/readme.md
@@ -1,6 +1,6 @@
 # Radio Button Group
 
-## `RadioButtonGroup` Props
+## `RadioButton.Group` Props
 - **Description:** Wrapper for the button group.  
 
 ### name (optional)
@@ -65,7 +65,7 @@
 - **description:** The `multiSelection` prop allows selecting more than one option when set to `true`.
 
 
-## `RadioButton` Props
+## `RadioButton.Button` Props
 
 ### id (optional)
 - **type:** `string`
@@ -131,7 +131,7 @@ The label also accepts a React component.
 - **default value:** `false`
 - **description:** Used Switch as radio button when set to `true`.
 
-## `RadioButton` Props of Style `tile`
+## `RadioButton.Button` Props of Style `tile`
 
 ### id (optional)
 - **type:** `string`
@@ -158,25 +158,25 @@ The label also accepts a React component.
 ### Example:
 
 ```
-<RadioButtonGroup
+<RadioButton.Group
     name="food"
     defaultValue="food-1"
     onChange={ ( value ) => console.log( value ) }
 >
-    <RadioButton value="food-1" />
-    <RadioButton value="food-2" />
-    <RadioButton value="food-3" />
-</RadioButtonGroup>
+    <RadioButton.Button value="food-1" />
+    <RadioButton.Button value="food-2" />
+    <RadioButton.Button value="food-3" />
+</RadioButton.Group>
 
-<RadioButtonGroup
+<RadioButton.Group
     value={selectedValue}   
     onChange={handleRadioChange}
     style='tile'
 >
-    <RadioButton value="option1"><Plus /></RadioButton>
-    <RadioButton value="option2"><Plus /></RadioButton>
-    <RadioButton value="option3"><Plus /></RadioButton>
-</RadioButtonGroup>
+    <RadioButton.Button value="option1"><Plus /></RadioButton.Button>
+    <RadioButton.Button value="option2"><Plus /></RadioButton.Button>
+    <RadioButton.Button value="option3"><Plus /></RadioButton.Button>
+</RadioButton.Group>
 
 
 ```
\ No newline at end of file