@@ -27,7 +27,7 @@ export const Referral = ({ device }: IProps) => {
 		padding: '20px',
 		color: 'white',
 		minWidth: '242px',
-		width: '100%',
+		width: '104%',
 	}
 	const block_text_style = {
 		fontSize: '16px',
@@ -55,7 +55,7 @@ export const Referral = ({ device }: IProps) => {
 	}, [data?.access])
 
 	return (
-		<Stack alignItems={'start'} gap={2} sx={{ overflow: 'hidden', flexDirection: device === 'desktop' ? 'row' : 'column' }}>
+		<Stack alignItems={'start'} gap={9} sx={{ overflow: 'hidden', flexDirection: device === 'desktop' ? 'row' : 'column' }}>
 			<Stack justifyContent={'start'} alignItems={'start'} gap={4} sx={{ width: device === 'desktop' ? '60vw' : '100%' }}>
 				<Box
 					sx={{
@@ -92,13 +92,24 @@ export const Referral = ({ device }: IProps) => {
 									maxWidth: '350px',
 									width: '100%',
 									color: '#8280FF',
+									position: 'relative',
 								}}
 								gap={2}
 								justifyContent={'space-between'}
 								direction={'row'}
 								alignItems={'center'}
 							>
-								{device === 'mobile' ? url.slice(0, 35) + '...' : url.slice(0, 40) + '...'}
+								<Typography
+									sx={{
+										color: '#8280FF',
+										fontSize: '16px',
+										fontFamily: 'Raleway, sans-serif',
+										whiteSpace: 'nowrap',
+										paddingRight: '15px',
+									}}
+								>
+									{device === 'mobile' ? url.slice(0, 35) + '...' : url.slice(0, 40) + '...'}
+								</Typography>
 								<Image
 									src={'/svg/copy.svg'}
 									alt={''}
@@ -106,6 +117,8 @@ export const Referral = ({ device }: IProps) => {
 										width: '20px',
 										height: '20px',
 										cursor: 'pointer',
+										position: 'absolute',
+										right: '10px',
 									}}
 									width={100}
 									height={100}