diff --git a/README.md b/README.md
index 8e8fffd5..426fc923 100644
--- a/README.md
+++ b/README.md
@@ -14,7 +14,7 @@ Using Force UI as a dependency in package.json -
 
 ```json
 "dependencies": {
-  "@bsf/force-ui": "git+https://github.com/brainstormforce/force-ui#1.3.2"
+  "@bsf/force-ui": "git+https://github.com/brainstormforce/force-ui#1.3.4"
 }
 ```
 
@@ -28,7 +28,7 @@ npm install
 Or you can directly run the following command to install the package -
 
 ```bash
-npm i -S @bsf/force-ui@git+https://github.com/brainstormforce/force-ui.git#1.3.2
+npm i -S @bsf/force-ui@git+https://github.com/brainstormforce/force-ui.git#1.3.4
 ```
 
 <br />
diff --git a/changelog.txt b/changelog.txt
index 05bf1d4d..271bb8dc 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,15 +1,25 @@
-Version 1.3.2 - 18th December, 2024
-Fixed - Adjusted the color of the Switch component label and help text.
+Version 1.3.4 - 26th December, 2024
+- Improvement - Enhanced the UI of the Table and Line chart component for responsive design.
+- Improvement - Added option group to the Select component.
+- Improvement - Added support for controlling selected dates through the 'selected' prop in DatePicker component.
+- Fixed - DatePicker component crash when navigating through years.
+
+Version 1.3.3 - 20th December, 2024
+- Fixed - React `Each child in a list should have a unique "key" prop` console warning.
+- Fixed - Toaster content overlapping with the close button.
+
+Version 1.3.2 - 17th December, 2024
+- Fixed - Adjusted the color of the Switch component label and help text.
 
 Version 1.3.1 - 17th December, 2024
-Fixed - The underline issue to enhance visual consistency.
-Fixed - Issue with the Select component where a check mark was displayed even when no item was selected.
-Fixed - Design mismatch in the Switch component.
-Fixed - Text, icon size, alignment, and color inconsistencies in the Date Picker to ensure a uniform appearance.
-Fixed - Input ref not pointing to the input field.
-Fixed - Icon size and alignment issues in the Menu component for better visual clarity.
-Fixed - Sidebar height not being overridable.
-Improvement - Removed backdrop blur to enhance performance and visual clarity.
+- Fixed - The underline issue to enhance visual consistency.
+- Fixed - Issue with the Select component where a check mark was displayed even when no item was selected.
+- Fixed - Design mismatch in the Switch component.
+- Fixed - Text, icon size, alignment, and color inconsistencies in the Date Picker to ensure a uniform appearance.
+- Fixed - Input ref not pointing to the input field.
+- Fixed - Icon size and alignment issues in the Menu component for better visual clarity.
+- Fixed - Sidebar height not being overridable.
+- Improvement - Removed backdrop blur to enhance performance and visual clarity.
 
 Version 1.3.0 - 16th December, 2024
 - New - Table component.
diff --git a/package.json b/package.json
index babe0eb0..ca50f9b9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@bsf/force-ui",
-    "version": "1.3.2",
+    "version": "1.3.4",
     "description": "Library of components for the BSF project",
     "main": "./dist/force-ui.js",
     "module": "./dist/force-ui.js",
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index b9ce047a..8f951e06 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -1,4 +1,9 @@
-import React, { forwardRef, type ElementType, type ReactNode } from 'react';
+import React, {
+	forwardRef,
+	Fragment,
+	type ElementType,
+	type ReactNode,
+} from 'react';
 import { cn } from '@/utilities/functions';
 
 export interface ButtonProps {
@@ -140,12 +145,14 @@ const Button: React.FunctionComponent<ButtonProps> = forwardRef(
 				disabled={ disabled }
 				{ ...rest }
 			>
-				{ iconLeft }
+				<Fragment key="left-icon">{ iconLeft }</Fragment>
 				{ children ? <span className="px-1">{ children }</span> : null }
-				{ iconRight }
+				<Fragment key="right-icon">{ iconRight }</Fragment>
 			</Tag>
 		);
 	}
 );
 
+Button.displayName = 'Button';
+
 export default Button;
diff --git a/src/components/label/label.tsx b/src/components/label/label.tsx
index 7a261cad..8c3521ca 100644
--- a/src/components/label/label.tsx
+++ b/src/components/label/label.tsx
@@ -78,6 +78,8 @@ const Label = forwardRef(
 	}
 );
 
+Label.displayName = 'Label';
+
 export default Label as <T extends object>(
 	props: LabelProps & T,
 	ref: React.Ref<HTMLElement>
diff --git a/src/components/line-chart/line-chart.tsx b/src/components/line-chart/line-chart.tsx
index 170a27fb..9b714b59 100644
--- a/src/components/line-chart/line-chart.tsx
+++ b/src/components/line-chart/line-chart.tsx
@@ -5,6 +5,7 @@ import {
 	YAxis,
 	CartesianGrid,
 	Tooltip,
+	ResponsiveContainer,
 } from 'recharts';
 import ChartTooltipContent from './chart-tooltip-content';
 import Label from '../label';
@@ -64,10 +65,10 @@ interface LineChartProps {
 	yAxisFontColor?: string;
 
 	/** Width of the chart container. */
-	chartWidth?: number;
+	chartWidth?: number | string;
 
 	/** Height of the chart container. */
-	chartHeight?: number;
+	chartHeight?: number | string;
 
 	/** Determines whether dots are shown on each data point. */
 	withDots?: boolean;
@@ -124,56 +125,59 @@ const LineChart = ( {
 	}
 
 	return (
-		<LineChartWrapper
-			{ ...lineChartWrapperProps }
-			width={ chartWidth }
-			height={ chartHeight }
-			data={ data }
-		>
-			{ showCartesianGrid && <CartesianGrid vertical={ false } /> }
-			{ showXAxis && (
-				<XAxis
-					dataKey={ xAxisDataKey }
-					tickLine={ false }
-					axisLine={ false }
-					tickMargin={ 8 }
-					tickFormatter={ tickFormatter }
-					tick={ { fontSize: fontSizeVariant, fill: xAxisFontColor } }
-				/>
-			) }
-			{ showYAxis && (
-				<YAxis
-					dataKey={ yAxisDataKey }
-					tickLine={ false }
-					axisLine={ false }
-					tickMargin={ 8 }
-					tick={ { fontSize: fontSizeVariant, fill: yAxisFontColor } }
-				/>
-			) }
-
-			{ showTooltip && (
-				<Tooltip
-					content={
-						<ChartTooltipContent
-							indicator={ tooltipIndicator }
-							labelKey={ tooltipLabelKey }
-						/>
-					}
-				/>
-			) }
-
-			{ dataKeys.map( ( key, index ) => (
-				<Line
-					key={ key }
-					type="natural"
-					dataKey={ key }
-					stroke={ appliedColors[ index ].stroke }
-					fill={ appliedColors[ index ].stroke }
-					strokeWidth={ 2 }
-					dot={ withDots }
-				/>
-			) ) }
-		</LineChartWrapper>
+		<ResponsiveContainer width={ chartWidth } height={ chartHeight }>
+			<LineChartWrapper { ...lineChartWrapperProps } data={ data }>
+				{ showCartesianGrid && <CartesianGrid vertical={ false } /> }
+				{ showXAxis && (
+					<XAxis
+						dataKey={ xAxisDataKey }
+						tickLine={ false }
+						axisLine={ false }
+						tickMargin={ 8 }
+						tickFormatter={ tickFormatter }
+						tick={ {
+							fontSize: fontSizeVariant,
+							fill: xAxisFontColor,
+						} }
+					/>
+				) }
+				{ showYAxis && (
+					<YAxis
+						dataKey={ yAxisDataKey }
+						tickLine={ false }
+						axisLine={ false }
+						tickMargin={ 8 }
+						tick={ {
+							fontSize: fontSizeVariant,
+							fill: yAxisFontColor,
+						} }
+					/>
+				) }
+
+				{ showTooltip && (
+					<Tooltip
+						content={
+							<ChartTooltipContent
+								indicator={ tooltipIndicator }
+								labelKey={ tooltipLabelKey }
+							/>
+						}
+					/>
+				) }
+
+				{ dataKeys.map( ( key, index ) => (
+					<Line
+						key={ key }
+						type="natural"
+						dataKey={ key }
+						stroke={ appliedColors[ index ].stroke }
+						fill={ appliedColors[ index ].stroke }
+						strokeWidth={ 2 }
+						dot={ withDots }
+					/>
+				) ) }
+			</LineChartWrapper>
+		</ResponsiveContainer>
 	);
 };
 
diff --git a/src/components/select/component-style.ts b/src/components/select/component-style.ts
index 967a2ec5..d6eaae5f 100644
--- a/src/components/select/component-style.ts
+++ b/src/components/select/component-style.ts
@@ -49,3 +49,11 @@ export const disabledClassNames = {
 	icon: 'group-disabled:text-icon-disabled',
 	text: 'group-disabled:text-field-color-disabled',
 };
+
+export const optionGroupDividerClassNames =
+	'h-px my-2 w-full border-border-subtle border-b border-t-0 border-solid';
+export const optionGroupDividerSizeClassNames = {
+	sm: 'w-[calc(100%+0.75rem)] translate-x-[-0.375rem]',
+	md: 'w-[calc(100%+1rem)] translate-x-[-0.5rem]',
+	lg: 'w-[calc(100%+1rem)] translate-x-[-0.5rem]',
+};
diff --git a/src/components/select/select-atom.stories.tsx b/src/components/select/select-atom.stories.tsx
index c514d367..de2ad67c 100644
--- a/src/components/select/select-atom.stories.tsx
+++ b/src/components/select/select-atom.stories.tsx
@@ -13,6 +13,32 @@ const options = [
 	{ id: '8', name: 'Pink' },
 ];
 
+const groupedOptions = [
+	{
+		label: 'Warm Colors',
+		options: [
+			{ id: '1', name: 'Red' },
+			{ id: '2', name: 'Orange' },
+			{ id: '3', name: 'Yellow' },
+		],
+	},
+	{
+		label: 'Cool Colors',
+		options: [
+			{ id: '4', name: 'Green' },
+			{ id: '5', name: 'Cyan' },
+			{ id: '6', name: 'Blue' },
+		],
+	},
+	{
+		label: 'Other Colors',
+		options: [
+			{ id: '7', name: 'Purple' },
+			{ id: '8', name: 'Pink' },
+		],
+	},
+];
+
 const meta: Meta<typeof Select> = {
 	title: 'Atoms/Select',
 	component: Select,
@@ -21,6 +47,7 @@ const meta: Meta<typeof Select> = {
 		'Select.Portal': Select.Portal,
 		'Select.Options': Select.Options,
 		'Select.Option': Select.Option,
+		'Select.OptionGroup': Select.OptionGroup,
 	} as Record<string, React.ComponentType<unknown>>,
 	parameters: {
 		layout: 'centered',
@@ -267,3 +294,76 @@ SelectWithSearchWithoutPortal.args = {
 	combobox: true,
 	disabled: false,
 };
+
+const GroupedSelectTemplate: Story = ( {
+	size,
+	multiple,
+	combobox,
+	disabled,
+} ) => (
+	<div className="w-80">
+		<Select
+			key={ `${ size }-${ multiple }-${ combobox }-${ disabled }` }
+			size={ size }
+			multiple={ multiple }
+			combobox={ combobox }
+			disabled={ disabled }
+			onChange={ ( value ) => value }
+		>
+			<Select.Button
+				placeholder={
+					multiple ? 'Select multiple options' : 'Select an option'
+				}
+				label={ multiple ? 'Select Multiple Colors' : 'Select a Color' }
+			/>
+			<Select.Portal>
+				<Select.Options>
+					{ groupedOptions.map( ( group ) => (
+						<Select.OptionGroup
+							key={ group.label }
+							label={ group.label }
+						>
+							{ group.options.map( ( option ) => (
+								<Select.Option key={ option.id } value={ option }>
+									{ option.name }
+								</Select.Option>
+							) ) }
+						</Select.OptionGroup>
+					) ) }
+				</Select.Options>
+			</Select.Portal>
+		</Select>
+	</div>
+);
+
+export const GroupedSelect = GroupedSelectTemplate.bind( {} );
+GroupedSelect.args = {
+	size: 'md',
+	multiple: false,
+	combobox: false,
+	disabled: false,
+};
+
+export const GroupedSelectWithSearch = GroupedSelectTemplate.bind( {} );
+GroupedSelectWithSearch.args = {
+	size: 'md',
+	multiple: false,
+	combobox: true,
+	disabled: false,
+};
+
+GroupedSelect.play = async ( { canvasElement } ) => {
+	const canvas = within( canvasElement );
+	const selectButton = await canvas.findByRole( 'combobox' );
+	await userEvent.click( selectButton );
+
+	const listBox = await screen.findByRole( 'listbox' );
+	expect( listBox ).toHaveTextContent( 'Warm Colors' );
+	expect( listBox ).toHaveTextContent( 'Cool Colors' );
+	expect( listBox ).toHaveTextContent( 'Red' );
+
+	const allOptions = await screen.findAllByRole( 'option' );
+	await userEvent.click( allOptions[ 0 ] );
+
+	expect( selectButton ).toHaveTextContent( 'Red' );
+};
diff --git a/src/components/select/select-types.ts b/src/components/select/select-types.ts
index c3325006..b3dc0da9 100644
--- a/src/components/select/select-types.ts
+++ b/src/components/select/select-types.ts
@@ -99,8 +99,17 @@ export interface SelectButtonProps extends AriaAttributes {
 	className?: string;
 }
 
+export interface SelectOptionGroupProps {
+	/** Label for the option group */
+	label: string;
+	/** Children options */
+	children: ReactNode;
+	/** Additional class name for the option group */
+	className?: string;
+}
+
 export interface SelectOptionsProps {
-	/** Expects the `Select.Option` children of the Select.Options Component. */
+	/** Expects the `Select.Option` or `Select.OptionGroup` children */
 	children?: ReactNode;
 	/** Key used to identify searched value using the key. Default is 'id'. */
 	searchBy?: string;
diff --git a/src/components/select/select.tsx b/src/components/select/select.tsx
index d3d6ed02..8ff4caa8 100644
--- a/src/components/select/select.tsx
+++ b/src/components/select/select.tsx
@@ -10,6 +10,7 @@ import {
 	isValidElement,
 	useEffect,
 	useLayoutEffect,
+	Fragment,
 } from 'react';
 import { cn } from '@/utilities/functions';
 import { CheckIcon, ChevronDown, ChevronsUpDown, Search } from 'lucide-react';
@@ -30,7 +31,12 @@ import {
 } from '@floating-ui/react';
 import Badge from '../badge';
 import { nanoid } from 'nanoid';
-import { disabledClassNames, sizeClassNames } from './component-style';
+import {
+	disabledClassNames,
+	optionGroupDividerClassNames,
+	optionGroupDividerSizeClassNames,
+	sizeClassNames,
+} from './component-style';
 import type {
 	OnClick,
 	OnKeyDown,
@@ -43,6 +49,7 @@ import type {
 	SelectPortalProps,
 	SelectProps,
 	SelectSizes,
+	SelectOptionGroupProps,
 } from './select-types';
 
 // Context to manage the state of the select component.
@@ -198,7 +205,7 @@ export function SelectButton( {
 			};
 
 	return (
-		<div className="flex flex-col items-start gap-1.5 [&_*]:box-border box-border">
+		<div className="w-full flex flex-col items-start gap-1.5 [&_*]:box-border box-border">
 			{ !! label && (
 				<label
 					className={ cn(
@@ -269,6 +276,60 @@ export function SelectButton( {
 	);
 }
 
+export function SelectOptionGroup( {
+	label,
+	children,
+	className,
+	...props
+}: SelectOptionGroupProps ) {
+	const { index, totalGroups } = props as {
+		index: number;
+		totalGroups: number;
+	};
+	const { sizeValue } = useSelectContext();
+
+	const groupClassNames = {
+		sm: 'text-xs',
+		md: 'text-xs',
+		lg: 'text-sm',
+	};
+
+	return (
+		<Fragment>
+			<div className="flex flex-col" role="group" aria-label={ label }>
+				<div
+					className={ cn(
+						'p-2 font-normal text-text-tertiary',
+						groupClassNames[ sizeValue as SelectSizes ],
+						className
+					) }
+					id={ `group-${ label?.toLowerCase().replace( /\s+/g, '-' ) }` }
+				>
+					{ label }
+				</div>
+				<div
+					className="flex flex-col"
+					role="presentation"
+					aria-labelledby={ `group-${ label?.toLowerCase().replace( /\s+/g, '-' ) }` }
+				>
+					{ children }
+				</div>
+			</div>
+			{ index < totalGroups &&
+				!! ( children && Children.count( children ) > 0 ) && (
+				<hr
+					className={ cn(
+						optionGroupDividerClassNames,
+						optionGroupDividerSizeClassNames[
+								sizeValue as SelectSizes
+						]
+					) }
+				/>
+			) }
+		</Fragment>
+	);
+}
+
 export function SelectOptions( {
 	children,
 	searchBy = 'name', // Used to identify searched value using the key. Default is 'id'.
@@ -325,43 +386,128 @@ export function SelectOptions( {
 
 	// Render children based on the search keyword.
 	const renderChildren = useMemo( () => {
-		return Children.map( children, ( child, index ) => {
+		// Track actual visible groups after filtering
+		let visibleGroups = 0;
+		let totalGroups = 0;
+
+		// First pass - count total visible groups
+		Children.forEach( children, ( child ) => {
+			if ( isValidElement( child ) && child.type === SelectOptionGroup ) {
+				const hasVisibleChildren = Children.toArray(
+					child.props.children
+				).some( ( groupChild ) => {
+					if ( ! isValidElement( groupChild ) ) {
+						return false;
+					}
+
+					if ( searchKeyword ) {
+						const valueProp = groupChild.props.value;
+						if ( typeof valueProp === 'object' ) {
+							return valueProp[ searchBy ]
+								.toLowerCase()
+								.includes( searchKeyword.toLowerCase() );
+						}
+						return valueProp
+							.toLowerCase()
+							.includes( searchKeyword.toLowerCase() );
+					}
+					return true;
+				} );
+
+				if ( hasVisibleChildren ) {
+					visibleGroups++;
+				}
+			}
+		} );
+
+		totalGroups = Math.max( 0, visibleGroups - 1 ); // Subtract 1 since we don't need divider after last group
+		let childIndex = 0;
+		let groupIndex = 0;
+
+		// Process child to render
+		const processChild = ( child: React.ReactNode ): React.ReactNode => {
 			if ( ! isValidElement( child ) ) {
 				return null;
 			}
+
+			// Handle option groups
+			if ( child.type === SelectOptionGroup ) {
+				// Recursively process children of the option group
+				const groupChildren = Children.map(
+					child.props.children,
+					processChild
+				);
+				// Only render group if it has visible children
+				const hasChildren = groupChildren?.some( ( c ) => c !== null );
+
+				if ( ! hasChildren ) {
+					return null;
+				}
+
+				const groupProps = {
+					...child.props,
+					children: groupChildren,
+					index: groupIndex,
+					totalGroups,
+				};
+
+				groupIndex++;
+				return cloneElement( child, groupProps );
+			}
+
+			// Handle regular options
 			if ( searchKeyword ) {
 				const valueProp = child.props.value;
 				if ( typeof valueProp === 'object' ) {
 					if (
-						valueProp[ searchBy ]
+						! valueProp[ searchBy ]
 							.toLowerCase()
-							.indexOf( searchKeyword.toLowerCase() ) === -1
+							.includes( searchKeyword.toLowerCase() )
 					) {
 						return null;
 					}
 				} else if (
-					valueProp
+					! valueProp
 						.toLowerCase()
-						.indexOf( searchKeyword.toLowerCase() ) === -1
+						.includes( searchKeyword.toLowerCase() )
 				) {
 					return null;
 				}
 			}
+
 			return cloneElement( child, {
 				...child.props,
-				index,
+				index: childIndex++,
 			} );
-		} );
+		};
+
+		return Children.map( children, processChild );
 	}, [ searchKeyword, value, selected, children ] );
 	const childrenCount = Children.count( renderChildren );
 
 	// Update the content list reference.
 	useEffect( () => {
 		listContentRef.current = [];
-		Children.forEach( children, ( child ) => {
+		// Get all children as an array.
+		let allChildren = Children.toArray( children );
+		// If it's an option group and has children.
+		if (
+			allChildren &&
+			isValidElement( allChildren[ 0 ] ) &&
+			allChildren[ 0 ].type === SelectOptionGroup
+		) {
+			allChildren = Children.toArray( allChildren )
+				.map( ( child ) =>
+					isValidElement( child ) ? child.props.children : null
+				)
+				.filter( Boolean );
+		}
+		// Update the list content reference.
+		Children.forEach( allChildren, ( child ) => {
 			if ( ! isValidElement( child ) ) {
 				return;
 			}
+
 			if ( child.props.value ) {
 				if ( searchKeyword ) {
 					const valueProp = child.props.value;
@@ -408,7 +554,7 @@ export function SelectOptions( {
 									.dropdown,
 								! combobox && 'h-auto',
 								! combobox
-									? 'overflow-y-auto'
+									? 'overflow-y-auto overflow-x-hidden'
 									: 'overflow-hidden',
 								className
 							) }
@@ -453,7 +599,7 @@ export function SelectOptions( {
 							{ /* Dropdown Items Wrapper */ }
 							<div
 								className={ cn(
-									'overflow-y-auto',
+									'overflow-y-auto overflow-x-hidden',
 									! combobox && 'w-full h-full',
 									sizeClassNames[ sizeValue as SelectSizes ]
 										.dropdownItemsWrapper
@@ -505,6 +651,7 @@ export function SelectItem( {
 		multiple,
 	} = useSelectContext();
 	const { index: indx } = props;
+	const initialIndxRef = useRef( indx );
 
 	const selectItemClassNames = {
 		sm: 'py-1.5 px-2 text-sm font-normal',
@@ -565,11 +712,15 @@ export function SelectItem( {
 			{ ...getItemProps( {
 				// Handle pointer select.
 				onClick() {
-					onClickItem( indx as number, value );
+					onClickItem( initialIndxRef.current as number, value );
 				},
 				// Handle keyboard select.
 				onKeyDown( event: React.KeyboardEvent ) {
-					onKeyDownItem( event, indx as number, value );
+					onKeyDownItem(
+						event,
+						initialIndxRef.current as number,
+						value
+					);
 				},
 			} ) }
 		>
@@ -794,10 +945,12 @@ SelectPortal.displayName = 'Select.Portal';
 SelectButton.displayName = 'Select.Button';
 SelectOptions.displayName = 'Select.Options';
 SelectItem.displayName = 'Select.Option';
+SelectOptionGroup.displayName = 'Select.OptionGroup';
 
 Select.Portal = SelectPortal;
 Select.Button = SelectButton;
 Select.Options = SelectOptions;
 Select.Option = SelectItem;
+Select.OptionGroup = SelectOptionGroup;
 
 export default Select;
diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx
index 24a85ddd..130fae20 100644
--- a/src/components/table/table.tsx
+++ b/src/components/table/table.tsx
@@ -216,16 +216,20 @@ export const Table = ( {
 		<TableContext.Provider
 			value={ contextValue as TableContextType<unknown> }
 		>
-			<div className="flow-root overflow-x-auto divide-y divide-x-0 divide-solid divide-border-subtle">
-				<table
-					className={ cn(
-						'table-fixed min-w-full border-collapse border-spacing-0',
-						className
-					) }
-					{ ...props }
-				>
-					{ restChildren }
-				</table>
+			<div className="flow-root divide-y divide-x-0 divide-solid divide-border-subtle">
+				<div className="overflow-x-auto w-full">
+					<div className="relative">
+						<table
+							className={ cn(
+								'table-fixed min-w-full border-collapse border-spacing-0',
+								className
+							) }
+							{ ...props }
+						>
+							{ restChildren }
+						</table>
+					</div>
+				</div>
 				{ footer }
 			</div>
 		</TableContext.Provider>
diff --git a/src/components/toaster/toaster.stories.tsx b/src/components/toaster/toaster.stories.tsx
index 752a4867..1d330e53 100644
--- a/src/components/toaster/toaster.stories.tsx
+++ b/src/components/toaster/toaster.stories.tsx
@@ -1,6 +1,8 @@
 import type { Meta, StoryFn } from '@storybook/react';
 import { Toaster } from './toaster';
 import { toast } from './controller';
+import { nanoid } from 'nanoid';
+import { useState, useEffect } from 'react';
 
 const meta: Meta<typeof Toaster> = {
 	title: 'Atoms/Toaster',
@@ -62,9 +64,15 @@ export default meta;
 type Story = StoryFn<typeof Toaster>;
 
 const Template: Story = ( args ) => {
+	const [ keyId, setKeyId ] = useState( nanoid() );
+
+	useEffect( () => {
+		setKeyId( nanoid() );
+	}, [ args ] );
+
 	return (
 		<div>
-			<Toaster { ...args } key={ args.position } />
+			<Toaster { ...args } key={ keyId } />
 			<div className="h-[100dvh] flex flex-col items-center justify-center">
 				<div className="flex gap-2">
 					<button
diff --git a/src/components/toaster/toaster.tsx b/src/components/toaster/toaster.tsx
index 1778656b..fda37134 100644
--- a/src/components/toaster/toaster.tsx
+++ b/src/components/toaster/toaster.tsx
@@ -197,7 +197,7 @@ export const Toast = ( {
 						<div className="self-start flex items-center justify-center [&_svg]:size-5 shrink-0">
 							{ getIcon( { variant, icon, theme } ) }
 						</div>
-						<div className="flex flex-col items-start justify-start gap-0.5">
+						<div className="flex flex-col items-start justify-start gap-0.5 mr-6">
 							{ getTitle( { title, theme } ) }
 							{ getContent( { content, theme } ) }
 							{
diff --git a/src/components/tooltip/tooltip.tsx b/src/components/tooltip/tooltip.tsx
index e9eda68e..4c3b9d3b 100644
--- a/src/components/tooltip/tooltip.tsx
+++ b/src/components/tooltip/tooltip.tsx
@@ -5,6 +5,7 @@ import {
 	isValidElement,
 	cloneElement,
 	useMemo,
+	Fragment,
 } from 'react';
 import {
 	useFloating,
@@ -174,21 +175,23 @@ export const Tooltip = ( {
 	const widthClasses = 'max-w-80 w-fit';
 
 	return (
-		<>
-			{ isValidElement( children ) &&
-				cloneElement( children as React.ReactElement, {
-					...children.props,
-					ref: mergeRefs(
-						(
-							children as React.ReactElement & {
-								ref?: React.Ref<HTMLElement>;
-							}
-						).ref,
-						refs.setReference
-					),
-					className: cn( children.props.className ),
-					...getReferenceProps(),
-				} ) }
+		<Fragment>
+			{ isValidElement( children ) && (
+				<Fragment key="tooltip-reference">
+					{ cloneElement( children as React.ReactElement, {
+						ref: mergeRefs(
+							(
+								children as React.ReactElement & {
+									ref?: React.Ref<HTMLElement>;
+								}
+							).ref,
+							refs.setReference
+						),
+						className: cn( children.props.className ),
+						...getReferenceProps(),
+					} ) }
+				</Fragment>
+			) }
 			<FloatingPortal id={ tooltipPortalId } root={ tooltipPortalRoot }>
 				{ isMounted && (
 					<div
@@ -207,10 +210,20 @@ export const Tooltip = ( {
 					>
 						<div>
 							{ !! title && (
-								<span className="font-semibold">{ title }</span>
+								<span
+									key="tooltip-title"
+									className="font-semibold"
+								>
+									{ title }
+								</span>
 							) }
 							{ !! content && (
-								<div className="font-normal">{ content }</div>
+								<div
+									key="tooltip-content"
+									className="font-normal"
+								>
+									{ content }
+								</div>
 							) }
 						</div>
 						{ arrow && (
@@ -223,8 +236,10 @@ export const Tooltip = ( {
 					</div>
 				) }
 			</FloatingPortal>
-		</>
+		</Fragment>
 	);
 };
 
+Tooltip.displayName = 'Tooltip';
+
 export default Tooltip;
diff --git a/version.json b/version.json
index 7a009da5..3917e46c 100644
--- a/version.json
+++ b/version.json
@@ -1,3 +1,3 @@
 {
-	"force-ui": "1.3.2"
+	"force-ui": "1.3.4"
 }