diff --git a/README.md b/README.md
index 00889988..33449694 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.0"
+  "@bsf/force-ui": "git+https://github.com/brainstormforce/force-ui#1.3.1"
 }
 ```
 
@@ -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.0
+npm i -S @bsf/force-ui@git+https://github.com/brainstormforce/force-ui.git#1.3.1
 ```
 
 <br />
diff --git a/changelog.txt b/changelog.txt
index b6356c0b..7f13561f 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,3 +1,13 @@
+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.
+
 Version 1.3.0 - 16th December, 2024
 - New - Table component.
 - Fixed - Asterisk missing on required input label.
diff --git a/package.json b/package.json
index a0f65682..e099d35f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@bsf/force-ui",
-    "version": "1.3.0",
+    "version": "1.3.1",
     "description": "Library of components for the BSF project",
     "main": "./dist/force-ui.js",
     "module": "./dist/force-ui.js",
diff --git a/src/components/datepicker/datepicker-component.tsx b/src/components/datepicker/datepicker-component.tsx
index 7ddc8913..4c45f865 100644
--- a/src/components/datepicker/datepicker-component.tsx
+++ b/src/components/datepicker/datepicker-component.tsx
@@ -204,9 +204,10 @@ const DatePickerComponent = ( {
 						onClick={ handlePrevButtonClick }
 						className="bg-background-primary border-none cursor-pointer"
 						aria-label="Previous Button"
-					>
-						<ChevronLeft className="h-4 w-4" />
-					</Button>
+						icon={
+							<ChevronLeft className="h-4 w-4 text-button-tertiary-color" />
+						}
+					/>
 
 					<Button
 						variant="ghost"
@@ -232,9 +233,10 @@ const DatePickerComponent = ( {
 						onClick={ handleNextButtonClick }
 						className="bg-background-primary border-none cursor-pointer"
 						aria-label="Next Button"
-					>
-						<ChevronRight className="h-4 w-4" />
-					</Button>
+						icon={
+							<ChevronRight className="h-4 w-4 text-button-tertiary-color" />
+						}
+					/>
 				</div>
 
 				{ showYearSelect && (
@@ -255,7 +257,9 @@ const DatePickerComponent = ( {
 									yearValue === selectedYear &&
 										yearValue !==
 											new Date().getFullYear() &&
-										'bg-background-brand text-text-on-color hover:bg-background-brand hover:text-black'
+										'bg-background-brand text-text-on-color hover:bg-background-brand hover:text-black',
+									yearValue === new Date().getFullYear() &&
+										'font-semibold'
 								) }
 							>
 								{ yearValue }
@@ -287,7 +291,11 @@ const DatePickerComponent = ( {
 											customMonthProps.calendarMonth.date.getFullYear() &&
 										customMonthProps.calendarMonth.date.getFullYear() !==
 											new Date().getFullYear() &&
-										'bg-background-brand text-text-on-color hover:bg-background-brand hover:text-black'
+										'bg-background-brand text-text-on-color hover:bg-background-brand hover:text-black',
+									monthIndex === new Date().getMonth() &&
+										new Date().getFullYear() ===
+											selectedYear &&
+										'font-semibold'
 								) }
 							>
 								{ format( new Date( 0, monthIndex ), 'MMM' ) }
@@ -312,7 +320,7 @@ const DatePickerComponent = ( {
 				{ weekdays.map( ( weekday, weekdayIndex ) => (
 					<button
 						key={ weekdayIndex }
-						className="h-10 w-10 px-1.5 py-2 text-center text-muted-foreground text-[0.8rem] font-normal content-center bg-transparent border-none"
+						className="h-10 w-10 px-1.5 py-2 text-center text-text-secondary text-sm font-normal content-center bg-transparent border-none shrink-0"
 					>
 						{ weekday }
 					</button>
@@ -362,7 +370,7 @@ const DatePickerComponent = ( {
 			'bg-transperant opacity-50 text-text-disabled cursor-auto';
 
 		const buttonClasses = cn(
-			'h-10 w-10 flex items-center justify-center transition text-text-secondary relative',
+			'h-10 w-10 flex items-center justify-center transition text-text-secondary relative text-sm',
 			'border-none rounded',
 			( isSelected || isPartOfRange ) && ( ! isOutside || isPreviousMonth )
 				? 'bg-background-brand text-text-on-color'
@@ -383,7 +391,7 @@ const DatePickerComponent = ( {
 		return (
 			<button
 				onClick={ handleClick }
-				className={ buttonClasses }
+				className={ cn( buttonClasses, isToday && 'font-semibold' ) }
 				disabled={ isDisabled || isOutside }
 				aria-label={ format( day.date, 'EEEE, MMMM do, yyyy' ) }
 			>
@@ -523,12 +531,12 @@ const DatePickerComponent = ( {
 				// showHead={false}
 				classNames={ {
 					months: monthsClassName,
-					month: 'flex flex-col p-2 gap-1 text-center border border-border-subtle rounded-md w-full',
+					month: 'flex flex-col p-2 gap-1 text-center w-full',
 					caption: 'relative flex justify-center items-center',
 					table: 'w-full border-separate border-spacing-0',
 					head_row: 'flex mb-1',
 					head_cell:
-						'text-muted-foreground rounded-md w-10 font-normal text-[0.8rem]',
+						'text-muted-foreground rounded-md w-10 font-normal text-sm',
 					row: 'flex w-full mt-2',
 					cell: 'h-10 w-10 text-center text-sm p-0 relative',
 					day: 'h-10 w-10 p-0 font-normal bg-background-primary text-current',
diff --git a/src/components/datepicker/datepicker.tsx b/src/components/datepicker/datepicker.tsx
index acf7e09b..6e6b5349 100644
--- a/src/components/datepicker/datepicker.tsx
+++ b/src/components/datepicker/datepicker.tsx
@@ -142,7 +142,7 @@ const DatePicker = ( {
 				}
 				footer={
 					isFooter && (
-						<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">
+						<div className="flex bg-background-primary justify-end p-2 gap-3 border border-solid border-border-subtle border-t-0 rounded-md rounded-tl-none rounded-tr-none">
 							<Button
 								variant="outline"
 								onClick={ handleCancelClick }
@@ -175,7 +175,7 @@ const DatePicker = ( {
 				variant={ variant }
 				width="w-auto"
 				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">
+					<div className="flex bg-background-primary justify-end p-2 gap-3 border border-solid border-border-subtle border-t-0 rounded-md rounded-tl-none rounded-tr-none">
 						<Button variant="outline" onClick={ handleCancelClick }>
 							{ cancelButtonText }
 						</Button>
@@ -218,7 +218,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">
+						<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">
 							<Button
 								variant="outline"
 								onClick={ handleCancelClick }
diff --git a/src/components/dialog/dialog.tsx b/src/components/dialog/dialog.tsx
index d16ec404..5a193e3b 100644
--- a/src/components/dialog/dialog.tsx
+++ b/src/components/dialog/dialog.tsx
@@ -261,7 +261,7 @@ export const DialogBackdrop = ( {
 					{ open && (
 						<motion.div
 							className={ cn(
-								'fixed inset-0 -z-10 bg-background-inverse/90 backdrop-blur-sm',
+								'fixed inset-0 -z-10 bg-background-inverse/90',
 								className
 							) }
 							{ ...props }
diff --git a/src/components/drawer/drawer-backdrop.tsx b/src/components/drawer/drawer-backdrop.tsx
index 7dd8c575..b1552f12 100644
--- a/src/components/drawer/drawer-backdrop.tsx
+++ b/src/components/drawer/drawer-backdrop.tsx
@@ -34,7 +34,7 @@ const DrawerBackdrop = ( { className, ...props }: DrawerBackdropProps ) => {
 				{ open && (
 					<motion.div
 						className={ cn(
-							'fixed inset-0 -z-10 bg-background-inverse/90 backdrop-blur-sm',
+							'fixed inset-0 -z-10 bg-background-inverse/90',
 							className
 						) }
 						{ ...props }
diff --git a/src/components/input/input.tsx b/src/components/input/input.tsx
index 50974e47..9de9b45d 100644
--- a/src/components/input/input.tsx
+++ b/src/components/input/input.tsx
@@ -11,6 +11,7 @@ import { nanoid } from 'nanoid';
 import { cn } from '@/utilities/functions';
 import { Upload, X } from 'lucide-react';
 import Label from '../label';
+import { mergeRefs } from '@/components/toaster/utils';
 
 export declare interface InputProps {
 	/** Unique identifier for the input element. */
@@ -275,7 +276,7 @@ export const InputComponent = (
 					) }
 				>
 					<input
-						ref={ ref }
+						ref={ mergeRefs( inputRef, ref ) }
 						id={ inputId }
 						type="file"
 						className={ cn(
@@ -318,7 +319,7 @@ export const InputComponent = (
 			>
 				{ getPrefix() }
 				<input
-					ref={ inputRef }
+					ref={ mergeRefs( inputRef, ref ) }
 					id={ inputId }
 					type={ type }
 					className={ cn(
diff --git a/src/components/menu-item/menu-item.tsx b/src/components/menu-item/menu-item.tsx
index f185a5a2..b43570ec 100644
--- a/src/components/menu-item/menu-item.tsx
+++ b/src/components/menu-item/menu-item.tsx
@@ -67,8 +67,8 @@ export const MenuList = ( {
 		md: 'text-sm',
 	}?.[ size ?? 'md' ];
 	const iconSizeClasses = {
-		sm: '[&>svg]:size-4',
-		md: '[&>svg]:size-5',
+		sm: 'size-4',
+		md: 'size-5',
 	}?.[ size ?? 'md' ];
 
 	const handleToggle = () => {
@@ -127,23 +127,23 @@ export const MenuList = ( {
 
 					{ arrow && (
 						<motion.span
-							variants={ arrowAnimationVariants }
-							animate={ isOpen ? 'open' : 'closed' }
+							className="flex items-center text-border-strong"
+							initial="hidden"
+							animate={ getArrowAnimationVariant() }
+							exit="hidden"
+							variants={ arrowFadeVariants }
 							transition={ { duration: 0.15 } }
-							className={ cn(
-								'flex items-center text-border-strong',
-								iconSizeClasses
-							) }
 						>
-							<motion.div
-								initial="hidden"
-								animate={ getArrowAnimationVariant() }
-								exit="hidden"
-								variants={ arrowFadeVariants }
+							<motion.span
+								className="inline-flex p-1"
+								variants={ arrowAnimationVariants }
+								animate={ isOpen ? 'open' : 'closed' }
 								transition={ { duration: 0.15 } }
 							>
-								<ChevronDown />
-							</motion.div>
+								<ChevronDown
+									className={ cn( 'shrink-0', iconSizeClasses ) }
+								/>
+							</motion.span>
 						</motion.span>
 					) }
 				</div>
diff --git a/src/components/radio-button/radio-button.tsx b/src/components/radio-button/radio-button.tsx
index f07a3869..77ebf8e1 100644
--- a/src/components/radio-button/radio-button.tsx
+++ b/src/components/radio-button/radio-button.tsx
@@ -455,7 +455,7 @@ export const RadioButtonComponent = (
 						<>
 							<Switch
 								defaultValue={ false }
-								size={ size === 'md' ? 'lg' : 'sm' }
+								size={ size }
 								onChange={ () => {
 									if ( ! multiSelection ) {
 										// Toggle the switch on or off
diff --git a/src/components/select/select.tsx b/src/components/select/select.tsx
index ca8637d3..d3d6ed02 100644
--- a/src/components/select/select.tsx
+++ b/src/components/select/select.tsx
@@ -296,7 +296,7 @@ export function SelectOptions( {
 
 	const initialSelectedValueIndex = useMemo( () => {
 		const currentValue = getValues();
-		let indexValue = 0;
+		let indexValue = -1;
 
 		if ( currentValue ) {
 			indexValue = Children.toArray( children ).findIndex(
@@ -315,7 +315,7 @@ export function SelectOptions( {
 			);
 		}
 
-		return indexValue === -1 ? 0 : indexValue;
+		return indexValue;
 	}, [ value, selected, children ] );
 
 	useLayoutEffect( () => {
diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx
index e68c4063..bf696f50 100644
--- a/src/components/sidebar/sidebar.tsx
+++ b/src/components/sidebar/sidebar.tsx
@@ -36,8 +36,6 @@ export interface SidebarProps extends SidebarCommonProps {
 	onCollapseChange?: ( isCollapsed: boolean ) => void;
 	/** Determines if the Sidebar can be collapsed or not. If true, a collapse button is shown. */
 	collapsible?: boolean;
-	/** Determines whether the Sidebar should occupy the full screen height. */
-	screenHeight?: boolean;
 	/** Controls whether a border should appear on the right of the Sidebar. */
 	borderOn?: boolean;
 }
@@ -55,7 +53,6 @@ export const Sidebar = ( {
 	className,
 	onCollapseChange,
 	collapsible = true,
-	screenHeight = true,
 	borderOn = true,
 	...props
 }: SidebarProps ) => {
@@ -88,14 +85,6 @@ export const Sidebar = ( {
 				const storedState = safeLocalStorage.get( 'sidebar-collapsed' );
 				setIsCollapsed( storedState ? storedState : false );
 			}
-
-			if ( sideBarRef.current ) {
-				if ( !! screenHeight ) {
-					sideBarRef.current.style.height = `${ window.innerHeight }px`;
-				} else {
-					sideBarRef.current.style.height = 'auto';
-				}
-			}
 		};
 
 		window.addEventListener( 'resize', handleScreenResize );
@@ -104,7 +93,7 @@ export const Sidebar = ( {
 		return () => {
 			window.removeEventListener( 'resize', handleScreenResize );
 		};
-	}, [ screenHeight, collapsible ] );
+	}, [ collapsible ] );
 
 	return (
 		<SidebarContext.Provider
@@ -113,10 +102,9 @@ export const Sidebar = ( {
 			<div
 				ref={ sideBarRef }
 				className={ cn(
-					'overflow-auto w-72 px-4 py-4 gap-4 flex flex-col bg-background-primary',
+					'h-full overflow-auto w-72 px-4 py-4 gap-4 flex flex-col bg-background-primary',
 					borderOn &&
 						'border-0 border-r border-solid border-border-subtle',
-					!! screenHeight && 'h-screen',
 					'transition-all duration-200',
 					isCollapsed && 'w-16 px-2',
 					className
diff --git a/src/components/switch/switch.stories.tsx b/src/components/switch/switch.stories.tsx
index 5b350c56..be4d98cb 100644
--- a/src/components/switch/switch.stories.tsx
+++ b/src/components/switch/switch.stories.tsx
@@ -49,21 +49,21 @@ const Template: StoryFn<SwitchProps> = ( { defaultValue, size, ...args } ) => {
 export const Basic = Template.bind( {} );
 Basic.args = {
 	defaultValue: false,
-	size: 'lg',
+	size: 'sm',
 	disabled: false,
 };
 
 export const WithLabel = Template.bind( {} );
 WithLabel.args = {
 	defaultValue: true,
-	size: 'lg',
+	size: 'sm',
 	disabled: false,
 	label: { heading: 'Switch Label', description: 'Switch Description' },
 };
 
 export const Disabled = Template.bind( {} );
 Disabled.args = {
-	size: 'lg',
+	size: 'sm',
 	disabled: true,
 	label: {
 		heading: 'Disabled Switch',
diff --git a/src/components/switch/switch.tsx b/src/components/switch/switch.tsx
index 38491d7e..f969adff 100644
--- a/src/components/switch/switch.tsx
+++ b/src/components/switch/switch.tsx
@@ -22,8 +22,11 @@ export interface SwitchProps {
 	/** Initial value of the switch (checked or unchecked) when used as an uncontrolled component. */
 	defaultValue?: boolean;
 
-	/** Defines the size of the switch (e.g., 'sm', 'md', 'lg'). */
-	size?: 'sm' | 'md' | 'lg';
+	/**
+	 *  Defines the size of the switch (e.g., 'sm', 'md').
+	 *  @default 'sm'
+	 */
+	size?: 'sm' | 'md';
 
 	/** Disables the switch if true. */
 	disabled?: boolean;
@@ -55,12 +58,19 @@ export const SwitchLabel = ( {
 	switchId: string;
 	disabled?: boolean;
 	children: ReactNode;
-	size: 'sm' | 'md' | 'lg';
+	size: 'sm' | 'md';
 } ) => {
 	const headingClasses = {
-		sm: 'text-sm leading-4 font-medium',
-		md: 'text-base leading-5 font-medium',
-		lg: 'text-lg leading-6 font-medium',
+		sm: 'text-sm leading-5 font-medium',
+		md: 'text-base leading-6 font-medium',
+	};
+	const descriptionClasses = {
+		sm: 'text-xs leading-4 font-normal',
+		md: 'text-sm leading-5 font-normal',
+	};
+	const gapClassNames = {
+		sm: 'space-y-0.5',
+		md: 'space-y-1',
 	};
 	const isLabelAComponent = isValidElement( label );
 	if ( isLabelAComponent ) {
@@ -76,11 +86,11 @@ export const SwitchLabel = ( {
 	const renderLabel = () => {
 		const { heading = '', description = '' } = label || {};
 		return (
-			<div className="space-y-1.5">
+			<div className={ cn( 'space-y-0.5', gapClassNames[ size ] ) }>
 				{ heading && (
 					<p
 						className={ cn(
-							'text-text-primary m-0', // text-base font-medium leading-4
+							'text-text-primary m-0',
 							headingClasses[ size ],
 							disabled && 'text-text-disabled'
 						) }
@@ -91,8 +101,9 @@ export const SwitchLabel = ( {
 				{ description && (
 					<p
 						className={ cn(
-							'text-text-secondary text-sm font-normal leading-5 m-0',
-							disabled && 'text-text-disabled'
+							'text-text-secondary text-xs font-normal leading-5 m-0',
+							disabled && 'text-text-disabled',
+							descriptionClasses[ size ]
 						) }
 					>
 						{ description }
@@ -129,7 +140,7 @@ export const SwitchComponent = (
 		onChange,
 		value,
 		defaultValue = false,
-		size = 'lg',
+		size = 'sm',
 		disabled = false,
 		label = { heading: '', description: '' },
 		name,
@@ -138,6 +149,9 @@ export const SwitchComponent = (
 	}: SwitchProps,
 	ref: React.ForwardedRef<HTMLInputElement>
 ) => {
+	// For backwards compatibility.
+	const normalSize = ( size as 'sm' | 'md' | 'lg' ) === 'lg' ? 'md' : size;
+
 	const isControlled = useMemo( () => typeof value !== 'undefined', [ value ] );
 	const switchId = useMemo( () => ( id ? id : `switch-${ nanoid() }` ), [] );
 	const [ checked, setChecked ] = useState( defaultValue );
@@ -172,17 +186,15 @@ export const SwitchComponent = (
 	};
 
 	const sizeClassNames = {
-		lg: {
-			container: 'w-11 h-6',
-			toggleDial: 'size-4 peer-checked:translate-x-5',
-		},
 		md: {
-			container: 'w-10 h-5',
-			toggleDial: 'size-3 peer-checked:translate-x-5',
+			container: 'w-11 h-6',
+			toggleDial:
+				'size-4 peer-checked:translate-x-5 group-hover/switch:size-5 group-focus-within/switch:size-5 group-focus-within/switch:left-0.5 group-hover/switch:left-0.5',
 		},
 		sm: {
-			container: 'w-8 h-4',
-			toggleDial: 'size-2.5 peer-checked:translate-x-3.5',
+			container: 'w-10 h-5',
+			toggleDial:
+				'size-3 peer-checked:translate-x-5 group-hover/switch:size-4 group-focus-within/switch:size-4 group-focus-within/switch:left-0.5 group-hover/switch:left-0.5',
 		},
 	};
 
@@ -196,12 +208,12 @@ export const SwitchComponent = (
 			label={ label }
 			switchId={ switchId }
 			disabled={ disabled }
-			size={ size }
+			size={ normalSize }
 		>
 			<div
 				className={ cn(
-					'relative inline-block cursor-pointer rounded-full shrink-0',
-					sizeClassNames[ size ].container,
+					'relative group/switch inline-block cursor-pointer rounded-full shrink-0',
+					sizeClassNames[ normalSize ].container,
 					className
 				) }
 			>
@@ -210,7 +222,7 @@ export const SwitchComponent = (
 					id={ switchId }
 					type="checkbox"
 					className={ cn(
-						"peer appearance-none absolute bg-blue-gray-100 rounded-full cursor-pointer transition-colors duration-300 h-full w-full  before:content-[''] checked:before:content-[''] m-0 checked:[background-image:none]",
+						"peer appearance-none absolute rounded-full cursor-pointer transition-colors duration-300 h-full w-full  before:content-[''] checked:before:content-[''] m-0 checked:[background-image:none]",
 						colorClassNames[ color ].input,
 						disabled && disabledClassNames.input
 					) }
@@ -223,8 +235,8 @@ export const SwitchComponent = (
 				<label
 					htmlFor={ switchId }
 					className={ cn(
-						"bg-white border border-blue-gray-100 rounded-full absolute cursor-pointer shadow-md before:content[''] before:transition-opacity before:opacity-0 hover:before:opacity-10 before:hidden border-none transition-all duration-300 top-2/4 left-1 -translate-y-2/4 before:w-10 before:h-10 before:rounded-full before:absolute before:top-2/4 before:left-2/4 before:-translate-y-2/4 before:-translate-x-2/4",
-						sizeClassNames[ size ].toggleDial,
+						"bg-white border rounded-full absolute cursor-pointer shadow-md before:content[''] before:transition-opacity before:opacity-0 hover:before:opacity-10 before:hidden border-none transition-all duration-300 top-2/4 left-1 -translate-y-2/4 before:w-10 before:h-10 before:rounded-full before:absolute before:top-2/4 before:left-2/4 before:-translate-y-2/4 before:-translate-x-2/4",
+						sizeClassNames[ normalSize ].toggleDial,
 						colorClassNames[ color ].toggleDial,
 						disabled && disabledClassNames.toggleDial
 					) }
diff --git a/src/components/tabs/tabs.tsx b/src/components/tabs/tabs.tsx
index f2261547..2d0e43a6 100644
--- a/src/components/tabs/tabs.tsx
+++ b/src/components/tabs/tabs.tsx
@@ -7,7 +7,8 @@ import React, {
 	type ReactNode,
 } from 'react';
 import { cn } from '@/utilities/functions';
-import { motion } from 'framer-motion';
+import { LayoutGroup, motion } from 'framer-motion';
+import { nanoid } from 'nanoid';
 
 declare type Ref = HTMLButtonElement;
 declare type OnChangeValue = { slug: string; text: string };
@@ -88,6 +89,7 @@ export const TabsGroup = ( {
 	iconPosition = 'left', // Position of the icon in the tab ('left' or 'right').
 	width = 'full', // Width of the tabs ('auto' or 'full').
 }: TabsGroupProps ) => {
+	const tabGroupId = nanoid();
 	const tabsState = useTabs();
 
 	// Determine the active item based on the activeTabSlug prop.
@@ -172,12 +174,14 @@ export const TabsGroup = ( {
 					width,
 				} }
 			>
-				{ React.Children.map( children, ( child ) => {
-					if ( ! isValidElement( child ) ) {
-						return null;
-					}
-					return React.cloneElement( child );
-				} ) }
+				<LayoutGroup id={ tabGroupId }>
+					{ React.Children.map( children, ( child ) => {
+						if ( ! isValidElement( child ) ) {
+							return null;
+						}
+						return React.cloneElement( child );
+					} ) }
+				</LayoutGroup>
 			</TabsGroupContext.Provider>
 		</div>
 	);
@@ -287,16 +291,18 @@ export const Tab = forwardRef<Ref, TabProps>(
 		};
 
 		return (
-			<button
+			<motion.button
 				ref={ ref }
 				className={ tabClassName }
 				disabled={ disabled }
 				onClick={ handleClick }
 				{ ...rest }
+				layoutRoot
 			>
 				{ activeItem === slug && variant === 'underline' && (
 					<motion.span
 						layoutId="underline"
+						layoutDependency={ activeItem }
 						className="absolute right-0 left-0 -bottom-px h-px bg-border-interactive"
 					/>
 				) }
@@ -314,7 +320,7 @@ export const Tab = forwardRef<Ref, TabProps>(
 					) }
 				</span>
 				{ badge && isValidElement( badge ) && badge }
-			</button>
+			</motion.button>
 		);
 	}
 );
diff --git a/src/templates/admin-settings-Spectra/admin-settings-Spectra.stories.jsx b/src/templates/admin-settings-Spectra/admin-settings-Spectra.stories.jsx
index 19f4f61a..b9d628f5 100644
--- a/src/templates/admin-settings-Spectra/admin-settings-Spectra.stories.jsx
+++ b/src/templates/admin-settings-Spectra/admin-settings-Spectra.stories.jsx
@@ -452,7 +452,7 @@ const Template = ( args ) => {
 								<Container.Item className="ml-auto">
 									<Switch
 										id="inherit"
-										size="lg"
+										size="md"
 										defaultValue={ false }
 									/>
 								</Container.Item>
@@ -485,7 +485,7 @@ const Template = ( args ) => {
 								<Container.Item className="ml-auto">
 									<Switch
 										id="custom-css"
-										size="lg"
+										size="md"
 										defaultValue={ true }
 									/>
 								</Container.Item>
@@ -518,7 +518,7 @@ const Template = ( args ) => {
 								<Container.Item className="ml-auto">
 									<Switch
 										id="copy-paste-styles"
-										size="lg"
+										size="md"
 										defaultValue={ true }
 									/>
 								</Container.Item>
@@ -552,7 +552,7 @@ const Template = ( args ) => {
 								<Container.Item className="ml-auto">
 									<Switch
 										id="block-recovery"
-										size="lg"
+										size="md"
 										defaultValue={ true }
 									/>
 								</Container.Item>
@@ -585,7 +585,7 @@ const Template = ( args ) => {
 								<Container.Item className="ml-auto">
 									<Switch
 										id="font-awesome-support"
-										size="lg"
+										size="md"
 										defaultValue={ true }
 									/>
 								</Container.Item>
diff --git a/version.json b/version.json
index 675a1b15..f89dc473 100644
--- a/version.json
+++ b/version.json
@@ -1,3 +1,3 @@
 {
-	"force-ui": "1.3.0"
+	"force-ui": "1.3.1"
 }