diff --git a/README.md b/README.md
index 61b99311..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.3"
+  "@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.3
+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 cd516a27..1052b23c 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,19 +1,32 @@
+Version 1.3.4 - 31th 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 - Updated the Table component design.
+- Improvement - Added support for controlling selected dates through the 'selected' prop in DatePicker component.
+- Improvement - Enhanced the UI of the Drawer component.
+- Improvement - Added a new prop to the Badge component to disable hover effect.
+- Fixed - Adjusted search icon size in Select combobox for better visual consistency.
+- Fixed - Focus ring offset of Select, Switch, Checkbox, and dropdown component.
+- Fixed - Checkbox/Switch toggle behavior with hint text and adjusted help text size.
+- Fixed - DatePicker component crash when navigating through years.
+- Fixed - DatePicker component UI styles for better visual consistency.
+
 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.
+- 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.
+- 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 e78445fe..ca50f9b9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@bsf/force-ui",
-    "version": "1.3.3",
+    "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/accordion/accordion.stories.tsx b/src/components/accordion/accordion.stories.tsx
index 60b80704..890dc4d0 100644
--- a/src/components/accordion/accordion.stories.tsx
+++ b/src/components/accordion/accordion.stories.tsx
@@ -11,9 +11,9 @@ export default {
 	},
 	tags: [ 'autodocs' ],
 	subcomponents: {
-		Item: Accordion.Item,
-		Trigger: Accordion.Trigger,
-		Content: Accordion.Content,
+		'Accordion.Item': Accordion.Item,
+		'Accordion.Trigger': Accordion.Trigger,
+		'Accordion.Content': Accordion.Content,
 	},
 	decorators: [
 		( Story ) => (
diff --git a/src/components/badge/badge.tsx b/src/components/badge/badge.tsx
index ccea02b4..fc5a02d3 100644
--- a/src/components/badge/badge.tsx
+++ b/src/components/badge/badge.tsx
@@ -27,6 +27,11 @@ export interface BadgeProps {
 	 * Custom Icon for the badge.
 	 */
 	icon?: ReactNode;
+	/**
+	 * Disable hover effect.
+	 * @default false
+	 */
+	disableHover?: boolean;
 	/**
 	 * Defines if the badge is disabled.
 	 */
@@ -60,12 +65,13 @@ const Badge = forwardRef<Ref, BadgeProps>(
 			onClose = () => {},
 			closable = false,
 			onMouseDown = () => {},
+			disableHover = false,
 		},
 		ref
 	) => {
 		// Base classes - Mandatory classes
 		const baseClasses =
-			'font-medium border-badge-border-gray flex items-center justify-center border border-solid box-border max-w-full';
+			'font-medium border-badge-border-gray flex items-center justify-center border border-solid box-border max-w-full transition-colors duration-150 ease-in-out';
 
 		// Size classes - Based on the size prop
 		const sizeClasses = {
@@ -82,18 +88,29 @@ const Badge = forwardRef<Ref, BadgeProps>(
 			rounded: 'rounded',
 		};
 
+		// Hover classes - Based on the variant prop
+		const hoverClasses = {
+			neutral: 'hover:bg-badge-hover-gray',
+			red: 'hover:bg-badge-hover-red',
+			yellow: 'hover:bg-badge-hover-yellow',
+			green: 'hover:bg-badge-hover-green',
+			blue: 'hover:bg-badge-hover-sky',
+			inverse: 'hover:bg-badge-hover-inverse',
+			disabled: 'hover:bg-badge-hover-disabled',
+		};
+
 		// Variant classes - Based on the variant prop
 		const variantClasses = {
 			neutral:
-				'bg-badge-background-gray hover:bg-badge-hover-gray text-badge-color-gray border-badge-border-gray',
-			red: 'bg-badge-background-red hover:bg-badge-hover-red text-badge-color-red border-badge-border-red',
-			yellow: 'bg-badge-background-yellow hover:bg-badge-hover-yellow text-badge-color-yellow border-badge-border-yellow',
-			green: 'bg-badge-background-green hover:bg-badge-hover-green text-badge-color-green border-badge-border-green',
-			blue: 'bg-badge-background-sky hover:bg-badge-hover-sky text-badge-color-sky border-badge-border-sky',
+				'bg-badge-background-gray text-badge-color-gray border-badge-border-gray',
+			red: 'bg-badge-background-red text-badge-color-red border-badge-border-red',
+			yellow: 'bg-badge-background-yellow text-badge-color-yellow border-badge-border-yellow',
+			green: 'bg-badge-background-green text-badge-color-green border-badge-border-green',
+			blue: 'bg-badge-background-sky text-badge-color-sky border-badge-border-sky',
 			inverse:
-				'bg-background-inverse hover:bg-badge-hover-inverse text-text-inverse border-background-inverse',
+				'bg-background-inverse text-text-inverse border-background-inverse',
 			disabled:
-				'bg-badge-background-disabled hover:bg-badge-hover-disabled text-badge-color-disabled border-badge-border-disabled disabled cursor-not-allowed',
+				'bg-badge-background-disabled text-badge-color-disabled border-badge-border-disabled disabled cursor-not-allowed',
 		};
 
 		let filteredClasses = '';
@@ -127,6 +144,7 @@ const Badge = forwardRef<Ref, BadgeProps>(
 					typeClasses[ type ],
 					'gap-0.5',
 					filteredClasses,
+					! disableHover && hoverClasses[ variant ],
 					className
 				) }
 				ref={ ref }
diff --git a/src/components/checkbox/checkbox.tsx b/src/components/checkbox/checkbox.tsx
index 1c6e547e..07e7dada 100644
--- a/src/components/checkbox/checkbox.tsx
+++ b/src/components/checkbox/checkbox.tsx
@@ -8,6 +8,7 @@ import {
 import { nanoid } from 'nanoid';
 import { cn } from '@/utilities/functions';
 import { Check, Minus } from 'lucide-react';
+import Label from '../label/label';
 
 // Types for Component Props
 export declare interface CheckboxProps {
@@ -59,7 +60,7 @@ export const CheckboxComponent = (
 			checkbox: 'size-4 rounded gap-1',
 			icon: 'size-3',
 			text: 'text-sm', // text class for sm
-			description: 'text-xs',
+			description: 'text-sm',
 			gap: 'gap-0.5',
 		},
 		md: {
@@ -73,7 +74,7 @@ export const CheckboxComponent = (
 	const colorClassNames = {
 		primary: {
 			checkbox:
-				'border-border-strong hover:border-border-interactive checked:border-border-interactive bg-white checked:bg-toggle-on checked:hover:bg-toggle-on-hover checked:hover:border-toggle-on-hover focus:ring-2 focus:ring-offset-4 focus:ring-focus',
+				'border-border-strong hover:border-border-interactive checked:border-border-interactive bg-white checked:bg-toggle-on checked:hover:bg-toggle-on-hover checked:hover:border-toggle-on-hover focus:ring-2 focus:ring-offset-2 focus:ring-focus',
 			icon: 'text-white',
 		},
 	};
@@ -116,27 +117,30 @@ export const CheckboxComponent = (
 		return (
 			<div className={ sizeClassNames[ size ].gap }>
 				{ label?.heading && (
-					<p
+					<Label
 						className={ cn(
 							'text-text-primary font-medium leading-4 m-0',
 							sizeClassNames[ size ].text,
 							sizeClassNames[ size ].gap,
 							disabled && 'text-text-disabled'
 						) }
+						htmlFor={ checkboxId }
 					>
 						{ label?.heading }
-					</p>
+					</Label>
 				) }
 				{ label?.description && (
-					<p
+					<Label
+						tag="p"
 						className={ cn(
-							'text-text-secondary font-normal leading-5 m-0',
+							'font-normal leading-5 m-0',
 							sizeClassNames[ size ].description,
 							disabled && 'text-text-disabled'
 						) }
+						variant="help"
 					>
 						{ label?.description }
-					</p>
+					</Label>
 				) }
 			</div>
 		);
@@ -187,17 +191,7 @@ export const CheckboxComponent = (
 					) }
 				</span>
 			</label>
-			{ !! label && (
-				<label
-					className={ cn(
-						'cursor-pointer',
-						disabled && 'cursor-not-allowed'
-					) }
-					htmlFor={ checkboxId }
-				>
-					{ renderLabel() }
-				</label>
-			) }
+			{ !! label && renderLabel() }
 		</div>
 	);
 };
diff --git a/src/components/datepicker/datepicker-component.tsx b/src/components/datepicker/datepicker-component.tsx
index 4c45f865..c3ab1588 100644
--- a/src/components/datepicker/datepicker-component.tsx
+++ b/src/components/datepicker/datepicker-component.tsx
@@ -175,7 +175,7 @@ const DatePickerComponent = ( {
 			}
 		};
 
-		const handleYearClick = ( { yearValue }: { yearValue: number } ) => {
+		const handleYearClick = ( yearValue: number ) => {
 			setSelectedYear( yearValue );
 			setShowYearSelect( false );
 			setShowMonthSelect( true );
@@ -245,13 +245,7 @@ const DatePickerComponent = ( {
 							<Button
 								key={ yearValue }
 								variant="ghost"
-								onClick={ () =>
-									handleYearClick(
-										yearValue as unknown as {
-											yearValue: number;
-										}
-									)
-								}
+								onClick={ () => handleYearClick( yearValue ) }
 								className={ cn(
 									'h-10 w-full text-center font-normal relative',
 									yearValue === selectedYear &&
@@ -367,7 +361,7 @@ const DatePickerComponent = ( {
 
 		// Common class for disabled outside days
 		const disabledOutsideClass =
-			'bg-transperant opacity-50 text-text-disabled cursor-auto';
+			'bg-transparent opacity-50 text-text-disabled cursor-auto';
 
 		const buttonClasses = cn(
 			'h-10 w-10 flex items-center justify-center transition text-text-secondary relative text-sm',
@@ -397,7 +391,7 @@ const DatePickerComponent = ( {
 			>
 				{ ( ! showOutsideDates || ( isPartOfRange && shouldShowDay ) ) &&
 					format( day.date, 'd' ) }
-				{ isToday && (
+				{ isToday && shouldShowDay && (
 					<span className="absolute h-1 w-1 bg-background-brand rounded-full bottom-1"></span>
 				) }
 			</button>
diff --git a/src/components/datepicker/datepicker.tsx b/src/components/datepicker/datepicker.tsx
index 6e6b5349..be85af79 100644
--- a/src/components/datepicker/datepicker.tsx
+++ b/src/components/datepicker/datepicker.tsx
@@ -11,6 +11,7 @@ import {
 	subWeeks,
 	subMonths,
 } from 'date-fns';
+import { getDefaultSelectedValue } from './utils';
 
 export interface DatePickerProps {
 	/** Defines the selection selectionType of the date picker: single, range, or multiple dates. */
@@ -33,6 +34,8 @@ export interface DatePickerProps {
 	showOutsideDays?: boolean;
 	/** Show or hide the footer. */
 	isFooter?: boolean;
+	/** Selected date value. */
+	selected?: Date | Date[] | TDateRange | null;
 }
 
 const DatePicker = ( {
@@ -46,17 +49,30 @@ const DatePicker = ( {
 	cancelButtonText = 'Cancel',
 	showOutsideDays = true,
 	isFooter = true,
+	selected,
 	...props
 }: DatePickerProps ) => {
 	const [ selectedDates, setSelectedDates ] = useState<
 		TDateRange | Date | Date[] | null
 	>( () => {
-		if ( selectionType === 'multiple' ) {
-			return [];
-		} else if ( selectionType === 'range' ) {
-			return { from: null, to: null };
+		if ( ! selected ) {
+			return getDefaultSelectedValue( selectionType );
 		}
-		return null;
+
+		// Type guards for different selection types
+		const isValidMultiple =
+			selectionType === 'multiple' && Array.isArray( selected );
+		const isValidRange =
+			selectionType === 'range' && 'from' in selected && 'to' in selected;
+		const isValidSingle =
+			selectionType === 'single' && selected instanceof Date;
+
+		// Return selected if valid, otherwise return default value
+		if ( isValidMultiple || isValidRange || isValidSingle ) {
+			return selected;
+		}
+
+		return getDefaultSelectedValue( selectionType );
 	} );
 
 	const handleSelect = ( selectedDate: Date | Date[] | TDateRange | null ) => {
@@ -192,13 +208,13 @@ const DatePicker = ( {
 	if ( variant === 'presets' ) {
 		return (
 			<div className="flex flex-row shadow-datepicker-wrapper">
-				<div className="flex flex-col gap-1 p-3 items-start border border-solid border-border-subtle border-r-0 rounded-tl-md rounded-bl-md">
+				<div className="flex flex-col gap-1 p-3 items-start border border-solid border-border-subtle border-r-0 rounded-tl-md rounded-bl-md bg-background-primary">
 					{ presets.map( ( preset, index ) => (
 						<Button
 							key={ index }
 							onClick={ () => handlePresetClick( preset.range ) }
 							variant="ghost"
-							className="font-medium text-sm"
+							className="text-left font-medium text-sm text-nowrap w-full"
 						>
 							{ preset.label }
 						</Button>
@@ -218,7 +234,7 @@ const DatePicker = ( {
 					width="w-auto"
 					numberOfMonths={ 2 }
 					footer={
-						<div className="flex justify-end p-2 gap-3 border border-solid border-border-subtle border-t-0 rounded-md rounded-tl-none rounded-tr-none bg-background-primary">
+						<div className="flex justify-end p-2 gap-3 border-l border-r border-t-0 border-b border-solid border-border-subtle bg-background-primary rounded-br-md">
 							<Button
 								variant="outline"
 								onClick={ handleCancelClick }
diff --git a/src/components/datepicker/utils.tsx b/src/components/datepicker/utils.tsx
index 018ca770..9965e7f9 100644
--- a/src/components/datepicker/utils.tsx
+++ b/src/components/datepicker/utils.tsx
@@ -13,3 +13,13 @@ export const formatWeekdayName = ( date: Date ) => {
 export const generateYearRange = ( start: number, count = 24 ) => {
 	return Array.from( { length: count }, ( _, i ) => start + i );
 };
+
+export const getDefaultSelectedValue = ( type: string ) => {
+	if ( type === 'multiple' ) {
+		return [];
+	}
+	if ( type === 'range' ) {
+		return { from: null, to: null };
+	}
+	return null;
+};
diff --git a/src/components/drawer/drawer-body.tsx b/src/components/drawer/drawer-body.tsx
index 80a81b77..bdce8586 100644
--- a/src/components/drawer/drawer-body.tsx
+++ b/src/components/drawer/drawer-body.tsx
@@ -15,7 +15,7 @@ const DrawerBody = ( { children, className, ...props }: DrawerBodyProps ) => {
 	return (
 		<div
 			className={ cn(
-				'px-5 flex flex-col flex-1 overflow-y-auto overflow-x-hidden',
+				'px-5 pb-4 pt-2 flex flex-col flex-1 overflow-y-auto overflow-x-hidden',
 				className
 			) }
 			{ ...props }
diff --git a/src/components/drawer/drawer-footer.tsx b/src/components/drawer/drawer-footer.tsx
index 73968933..e7f52e02 100644
--- a/src/components/drawer/drawer-footer.tsx
+++ b/src/components/drawer/drawer-footer.tsx
@@ -28,9 +28,11 @@ const DrawerFooter = ( { children, className }: DrawerFooterProps ) => {
 	return (
 		<div
 			className={ cn(
-				'p-5 flex justify-end gap-3 mt-auto',
+				'px-5 py-4 flex justify-end gap-3 mt-auto',
 				{
 					'bg-background-secondary': design === 'footer-divided',
+					'border-t border-b-0 border-x-0 border-solid border-border-subtle':
+						design === 'footer-bordered',
 				},
 				className
 			) }
diff --git a/src/components/drawer/drawer-header.tsx b/src/components/drawer/drawer-header.tsx
index 7a7ab021..bb7e26d9 100644
--- a/src/components/drawer/drawer-header.tsx
+++ b/src/components/drawer/drawer-header.tsx
@@ -13,7 +13,7 @@ export interface DrawerHeaderProps {
 // Drawer header wrapper.
 const DrawerHeader = ( { children, className, ...props }: DrawerHeaderProps ) => {
 	return (
-		<div className={ cn( 'space-y-2 px-5 pt-5 pb-1', className ) } { ...props }>
+		<div className={ cn( 'space-y-2 px-5 pt-5 pb-4', className ) } { ...props }>
 			{ children }
 		</div>
 	);
diff --git a/src/components/drawer/drawer-panel.tsx b/src/components/drawer/drawer-panel.tsx
index 20c70493..e6bdb484 100644
--- a/src/components/drawer/drawer-panel.tsx
+++ b/src/components/drawer/drawer-panel.tsx
@@ -49,7 +49,7 @@ const DrawerPanel = ( { children, className }: DrawerPanelProps ) => {
 						<motion.div
 							ref={ drawerRef }
 							className={ cn(
-								'flex flex-col gap-5 w-120 h-full bg-background-primary shadow-2xl my-5 overflow-hidden',
+								'flex flex-col w-120 h-full bg-background-primary shadow-2xl my-5 overflow-hidden',
 								className
 							) }
 							initial="exit"
diff --git a/src/components/drawer/drawer.tsx b/src/components/drawer/drawer.tsx
index 533e3301..10035812 100644
--- a/src/components/drawer/drawer.tsx
+++ b/src/components/drawer/drawer.tsx
@@ -38,7 +38,7 @@ export interface DrawerProps {
 	/** Close drawer when pressing the escape key. */
 	exitOnEsc?: boolean;
 	/** Design of the drawer. */
-	design?: 'simple' | 'footer-divided';
+	design?: 'simple' | 'footer-divided' | 'footer-bordered';
 	/** Position of the drawer. */
 	position?: 'left' | 'right';
 	/** Duration of the drawer transition. */
diff --git a/src/components/label/label.tsx b/src/components/label/label.tsx
index 8c3521ca..d7ab59c1 100644
--- a/src/components/label/label.tsx
+++ b/src/components/label/label.tsx
@@ -49,6 +49,13 @@ const Label = forwardRef(
 				'text-field-color-disabled disabled cursor-not-allowed [&>*]:text-field-color-disabled',
 		};
 
+		const fontWeightClassNames: Record<string, string> = {
+			neutral: '',
+			help: 'font-normal',
+			error: 'font-normal',
+			disabled: '',
+		};
+
 		if ( ! children ) {
 			return null;
 		}
@@ -68,6 +75,7 @@ const Label = forwardRef(
 					sizeClasses[ size ],
 					variantClasses[ variant ],
 					requiredClasses,
+					fontWeightClassNames?.[ variant ],
 					className
 				) }
 				{ ...props }
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/radio-button/styles.ts b/src/components/radio-button/styles.ts
index b916c7a9..eeb589ce 100644
--- a/src/components/radio-button/styles.ts
+++ b/src/components/radio-button/styles.ts
@@ -1,7 +1,7 @@
 export const colorClassNames = {
 	primary: {
 		checkbox:
-			'border-border-strong hover:border-border-interactive checked:border-border-interactive bg-white checked:bg-toggle-on checked:hover:bg-toggle-on-hover checked:hover:border-toggle-on-hover focus:ring-2 focus:ring-offset-4 focus:ring-focus',
+			'border-border-strong hover:border-border-interactive checked:border-border-interactive bg-white checked:bg-toggle-on checked:hover:bg-toggle-on-hover checked:hover:border-toggle-on-hover focus:ring-2 focus:ring-offset-2 focus:ring-focus',
 		icon: 'text-white',
 	},
 };
diff --git a/src/components/select/component-style.ts b/src/components/select/component-style.ts
index 967a2ec5..3913e658 100644
--- a/src/components/select/component-style.ts
+++ b/src/components/select/component-style.ts
@@ -10,7 +10,7 @@ export const sizeClassNames = {
 		dropdownItemsWrapper: 'p-1.5',
 		searchbarWrapper: 'p-3 flex items-center gap-0.5',
 		searchbar: 'font-medium text-sm',
-		searchbarIcon: '[&>svg]:size-4',
+		searchbarIcon: 'size-4',
 		label: 'text-sm font-medium',
 	},
 	md: {
@@ -24,7 +24,7 @@ export const sizeClassNames = {
 		dropdownItemsWrapper: 'p-2',
 		searchbarWrapper: 'p-2.5 flex items-center gap-1',
 		searchbar: 'font-medium text-sm',
-		searchbarIcon: '[&>svg]:size-5',
+		searchbarIcon: 'size-5',
 		label: 'text-sm font-medium',
 	},
 	lg: {
@@ -38,7 +38,7 @@ export const sizeClassNames = {
 		dropdownItemsWrapper: 'p-2',
 		searchbarWrapper: 'p-2.5 flex items-center gap-1',
 		searchbar: 'font-medium text-sm',
-		searchbarIcon: '[&>svg]:size-5',
+		searchbarIcon: 'size-5',
 		label: 'text-base font-medium',
 	},
 };
@@ -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.stories.tsx b/src/components/select/select.stories.tsx
index a3907c05..de2aba34 100644
--- a/src/components/select/select.stories.tsx
+++ b/src/components/select/select.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryFn } from '@storybook/react';
-import { useEffect, useState } from 'react';
+import { startTransition, useLayoutEffect, useState } from 'react';
 import Select from './select';
 import Label from '../label';
 
@@ -43,22 +43,22 @@ const Template: Story = ( args ) => {
 		setSelected( value as unknown as string | [] );
 	};
 
-	useEffect( () => {
+	// Reset selected value when multiple prop changes.
+	useLayoutEffect( () => {
 		if ( args?.multiple ) {
-			setSelected( [] );
+			startTransition( () => {
+				setSelected( [] );
+			} );
 			return;
 		}
-		setSelected( '' );
+		startTransition( () => {
+			setSelected( '' );
+		} );
 	}, [ args ] );
 
 	return (
 		<div style={ { width: '260px' } }>
-			<Select
-				key={ args?.multiple ? 1 : 0 }
-				{ ...args }
-				onChange={ handleSelect }
-				value={ selected }
-			>
+			<Select { ...args } onChange={ handleSelect } value={ selected }>
 				<Select.Button label="Label" />
 				<Select.Portal>
 					<Select.Options>
diff --git a/src/components/select/select.tsx b/src/components/select/select.tsx
index d3d6ed02..25ab0375 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(
@@ -217,7 +224,7 @@ export function SelectButton( {
 					'flex items-center justify-between w-full box-border transition-[outline,background-color,color,box-shadow] duration-200 bg-white',
 					'outline outline-1 outline-field-border border-none cursor-pointer',
 					! isOpen &&
-						'focus:ring-2 focus:ring-offset-4 focus:outline-focus-border focus:ring-focus [&:hover:not(:focus):not(:disabled)]:outline-border-strong',
+						'focus:ring-2 focus:ring-offset-2 focus:outline-focus-border focus:ring-focus [&:hover:not(:focus):not(:disabled)]:outline-border-strong',
 					sizeClassNames[ sizeValue as SelectSizes ].selectButton,
 					multiple &&
 						sizeClassNames[ sizeValue as SelectSizes ].multiSelect,
@@ -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/switch/switch.tsx b/src/components/switch/switch.tsx
index 503be7f0..bc0df3ed 100644
--- a/src/components/switch/switch.tsx
+++ b/src/components/switch/switch.tsx
@@ -66,7 +66,7 @@ export const SwitchLabel = ( {
 		md: 'text-base leading-6 font-medium',
 	};
 	const descriptionClasses = {
-		sm: 'text-xs leading-4 font-normal',
+		sm: 'text-sm leading-5 font-normal',
 		md: 'text-sm leading-5 font-normal',
 	};
 	const gapClassNames = {
@@ -90,7 +90,7 @@ export const SwitchLabel = ( {
 			<div className={ cn( 'space-y-0.5', gapClassNames[ size ] ) }>
 				{ heading && (
 					<Label
-						tag="p"
+						htmlFor={ switchId }
 						className={ cn( 'm-0', headingClasses[ size ] ) }
 						{ ...( disabled && { variant: 'disabled' } ) }
 					>
@@ -102,7 +102,7 @@ export const SwitchLabel = ( {
 						tag="p"
 						variant="help"
 						className={ cn(
-							'text-xs font-normal leading-5 m-0',
+							'text-sm font-normal leading-5 m-0',
 							descriptionClasses[ size ]
 						) }
 						{ ...( disabled && { variant: 'disabled' } ) }
@@ -125,12 +125,7 @@ export const SwitchLabel = ( {
 	return (
 		<div className={ cn( 'inline-flex', alignmentClass, 'gap-3' ) }>
 			{ children }
-			<label
-				htmlFor={ switchId }
-				className={ cn( ! disabled && 'cursor-pointer' ) }
-			>
-				{ renderLabel() }
-			</label>
+			{ renderLabel() }
 		</div>
 	);
 };
@@ -181,7 +176,7 @@ export const SwitchComponent = (
 
 	const colorClassNames = {
 		primary: {
-			input: 'bg-toggle-off checked:bg-toggle-on focus:ring focus:ring-toggle-on focus:ring-offset-4 border border-solid border-toggle-off-border checked:border-toggle-on-border shadow-toggleContainer focus:outline-none checked:focus:border-toggle-on-border focus:border-toggle-off-border',
+			input: 'bg-toggle-off checked:bg-toggle-on focus:ring focus:ring-toggle-on focus:ring-offset-2 border border-solid border-toggle-off-border checked:border-toggle-on-border shadow-toggleContainer focus:outline-none checked:focus:border-toggle-on-border focus:border-toggle-off-border',
 			toggleDial: 'bg-toggle-dial-background shadow-toggleDial',
 		},
 	};
diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx
index 24a85ddd..e4a348b8 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 border-0.5 border-solid border-border-subtle rounded-md divide-y-0.5 divide-x-0 divide-solid divide-border-subtle overflow-hidden">
+				<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>
@@ -254,7 +258,7 @@ export const TableHead: React.FC<TableHeadProps> = ( {
 	return (
 		<thead
 			className={ cn(
-				'bg-background-secondary [clip-path:inset(0_0_0_0_round_0.375rem)]',
+				'bg-background-secondary border-x-0 border-t-0 border-b-0.5 border-solid border-border-subtle',
 				className
 			) }
 			{ ...props }
@@ -313,7 +317,7 @@ export const TableBody: React.FC<TableBodyProps> = ( {
 	return (
 		<tbody
 			className={ cn(
-				'bg-background-primary divide-y divide-x-0 divide-solid divide-border-subtle',
+				'bg-background-primary divide-y-0.5 divide-x-0 divide-solid divide-border-subtle',
 				className
 			) }
 			{ ...props }
@@ -374,7 +378,7 @@ export const TableCell: React.FC<TableCellProps> = ( {
 	return (
 		<td
 			className={ cn(
-				'px-3 py-4.5 text-sm font-normal leading-5 text-text-secondary',
+				'px-3 py-3.5 text-sm font-normal leading-5 text-text-secondary',
 				className
 			) }
 			{ ...props }
@@ -393,11 +397,7 @@ export const TableFooter: React.FC<TableFooterProps> = ( {
 	const { checkboxSelection } = useTableContext();
 	return (
 		<div
-			className={ cn(
-				'px-3 pb-4.5 pt-5.5',
-				checkboxSelection && 'px-4',
-				className
-			) }
+			className={ cn( 'px-3 py-3', checkboxSelection && 'px-4', className ) }
 			{ ...props }
 		>
 			{ children }
diff --git a/src/theme/default-config.js b/src/theme/default-config.js
index c797dba2..39d248f9 100644
--- a/src/theme/default-config.js
+++ b/src/theme/default-config.js
@@ -207,6 +207,9 @@ const defaultTheme = {
 			zIndex: {
 				999999: '999999',
 			},
+			borderWidth: {
+				0.5: '0.5px',
+			},
 		},
 	},
 	plugins: [],
diff --git a/version.json b/version.json
index fcf52ace..3917e46c 100644
--- a/version.json
+++ b/version.json
@@ -1,3 +1,3 @@
 {
-	"force-ui": "1.3.3"
+	"force-ui": "1.3.4"
 }