diff --git a/changelog.txt b/changelog.txt
index 3caa9052..68912716 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,4 +1,5 @@
-Version 1.8.0 - 30th June, 2026
+Version x.x.x - xth July, 2026
+- Improvement: Atom - Radio Button: Added reverse position support.
 - New: Added Next.js React Server Components support. Every component now ships the `"use client"` directive in its build output, and compound components additionally expose named subpart exports (e.g. `SelectButton`, `DialogPanel`) so they can be rendered directly inside Server Components.
 
 Version 1.7.13 - 11th June, 2026
diff --git a/src/components/radio-button/radio-button.stories.tsx b/src/components/radio-button/radio-button.stories.tsx
index ddd9bb2c..bb7c97df 100644
--- a/src/components/radio-button/radio-button.stories.tsx
+++ b/src/components/radio-button/radio-button.stories.tsx
@@ -157,6 +157,81 @@ RadioWithBorderSmallSize.args = {
 	size: 'sm',
 };
 
+const RadioWithBorderReversePositionTemplate: StoryFn<RadioButtonGroupProps> = (
+	args
+) => {
+	const [ value, setValue ] = useState( args.value || args.defaultValue );
+
+	return (
+		<RadioButton.Group
+			value={ value }
+			columns={ args.columns ?? 3 }
+			onChange={ ( val ) => {
+				setValue( val as string );
+			} }
+			{ ...args }
+		>
+			{ [ 1, 2, 3, 4, 5, 6 ].map( ( num ) => (
+				<RadioButton.Button
+					key={ num }
+					value={ `option${ num }` }
+					label={ {
+						heading: `Option ${ num }`,
+					} }
+					disabled={ args.disabled }
+					borderOn={ true }
+					reversePosition={ true }
+				/>
+			) ) }
+		</RadioButton.Group>
+	);
+};
+
+export const RadioWithBorderReversePosition =
+	RadioWithBorderReversePositionTemplate.bind( {} );
+RadioWithBorderReversePosition.args = {
+	size: 'md',
+};
+
+const SwitchWithBorderReversePositionTemplate: StoryFn<
+	RadioButtonGroupProps
+> = ( args ) => {
+	const [ value, setValue ] = useState<string[]>( [] );
+
+	return (
+		<RadioButton.Group
+			value={ value }
+			columns={ args.columns ?? 2 }
+			multiSelection={ true }
+			onChange={ ( val ) => {
+				setValue( val as string[] );
+			} }
+			{ ...args }
+		>
+			{ [ 1, 2, 3, 4 ].map( ( num ) => (
+				<RadioButton.Button
+					key={ num }
+					value={ `option${ num }` }
+					label={ {
+						heading: `Option ${ num }`,
+						description: `Description ${ num }`,
+					} }
+					disabled={ args.disabled }
+					borderOn={ true }
+					reversePosition={ true }
+					useSwitch={ true }
+				/>
+			) ) }
+		</RadioButton.Group>
+	);
+};
+
+export const SwitchWithBorderReversePosition =
+	SwitchWithBorderReversePositionTemplate.bind( {} );
+SwitchWithBorderReversePosition.args = {
+	size: 'md',
+};
+
 const defaultRadioButtonGroupData = [
 	{
 		id: '1',
diff --git a/src/components/radio-button/radio-button.tsx b/src/components/radio-button/radio-button.tsx
index 9bb03588..3f239963 100644
--- a/src/components/radio-button/radio-button.tsx
+++ b/src/components/radio-button/radio-button.tsx
@@ -102,7 +102,7 @@ export interface RadioButtonProps extends RadioButtonCommonProps {
 	inlineIcon?: boolean;
 	/** Hides the selection indicator */
 	hideSelection?: boolean;
-	/** Reverses the position of icon and label */
+	/** Places the selection control (radio/switch) on the left and the label on the right. Works with the bordered variant (`borderOn`) */
 	reversePosition?: boolean;
 	/** Adds a border around the button */
 	borderOn?: boolean;
@@ -341,7 +341,6 @@ export const RadioButtonComponent = (
 						'space-y-3': size === 'sm',
 						'space-y-4': size === 'md',
 					},
-					reversePosition && ( useSwitch ? 'ml-10' : 'ml-4' ),
 					inlineIcon && 'flex gap-2',
 					inlineIcon && ! label.description && 'items-center'
 				) }
@@ -359,7 +358,7 @@ export const RadioButtonComponent = (
 				>
 					<p
 						className={ cn(
-							'text-text-primary font-medium m-0',
+							'text-text-primary font-medium m-0 [overflow-wrap:anywhere]',
 							textSizeClassNames[
 								size as keyof typeof textSizeClassNames
 							],
@@ -369,7 +368,7 @@ export const RadioButtonComponent = (
 						{ label.heading }
 					</p>
 					{ label.description && (
-						<p className="text-text-tertiary text-sm font-normal leading-5 m-0">
+						<p className="text-text-tertiary text-sm font-normal leading-5 m-0 [overflow-wrap:anywhere]">
 							{ label.description }
 						</p>
 					) }
@@ -406,6 +405,13 @@ export const RadioButtonComponent = (
 		}
 	};
 
+	// Reserve space on the control side. Default: control on the right (pr-12).
+	// Reversed: control on the left; the switch needs more room than the radio.
+	let controlSpacingClass = 'pr-12';
+	if ( reversePosition ) {
+		controlSpacingClass = useSwitch ? 'pl-16' : 'pl-12';
+	}
+
 	const paddingClasses = {
 		'pl-3.5 pr-2.5 py-2.5': size === 'sm' && ! ( icon && useSwitch ),
 		'p-3': size === 'sm' && ( ( icon && useSwitch ) || ( icon && badgeItem ) ),
@@ -426,7 +432,7 @@ export const RadioButtonComponent = (
 					checkedValue &&
 					'outline-border-interactive',
 				paddingClasses,
-				'pr-12',
+				controlSpacingClass,
 				isDisabled && 'cursor-not-allowed opacity-40',
 				buttonWrapperClasses
 			) }
@@ -458,10 +464,10 @@ export const RadioButtonComponent = (
 			) }
 			<label
 				className={ cn(
-					'absolute mr-0.5 right-3 flex items-center cursor-pointer rounded-full gap-2',
-					reversePosition && 'left-0',
+					'absolute flex items-center cursor-pointer rounded-full gap-2',
+					reversePosition ? 'left-3 ml-0.5' : 'right-3 mr-0.5',
 					isDisabled && 'cursor-not-allowed',
-					inlineIcon && 'mr-3'
+					inlineIcon && ( reversePosition ? 'ml-3' : 'mr-3' )
 				) }
 				onClick={ handleLabelClick }
 			>
diff --git a/src/theme/default-config.js b/src/theme/default-config.js
index 4092f6d4..078fff77 100644
--- a/src/theme/default-config.js
+++ b/src/theme/default-config.js
@@ -231,6 +231,7 @@ const defaultTheme = {
 			},
 			borderWidth: {
 				0.5: '0.5px',
+				1.5: '1.5px',
 			},
 		},
 	},