@@ -1,3 +1,13 @@
 export function c(...args: Array<string | null | undefined | boolean>) {
-  return args.filter(Boolean).join(" ")
+	return args.filter(Boolean).join(' ')
+}
+
+export function commaSeparated(input: number | string | null | undefined): string {
+	const str: string = typeof input === 'number' || typeof input === 'string' ? String(input) : ''
+
+	if (str) {
+		return str.replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ',')
+	} else {
+		return ''
+	}
 }
@@ -97,9 +97,6 @@ export const Payment: React.FC<IPaymentsProps & any> = ({ device, changeClose })
 								{...offer}
 								pay={pay}
 								device={device}
-								centered={
-									Math.floor(offers.length / 2) === offers.indexOf(offer)
-								}
 								selectedOffer={selectedOffer}
 								pickOffer={(uid) => setSelectedOffer(uid)}
 								key={offer.uid}
@@ -6,6 +6,11 @@
 	display: flex;
 	text-align: left;
 	flex-direction: column;
+	transition: all 0.6s ease-in-out;
+	&:hover {
+		border: 2px solid var(--air-color);
+		box-sizing: border-box;
+	}
 	&__header {
 		display: flex;
 		flex-direction: column;
@@ -48,7 +53,7 @@
 
 	&__btn {
 		border-color: var(--air-color);
-    color: var(--air-color);
+		color: var(--air-color);
 	}
 }
 
@@ -5,35 +5,23 @@ import styles from './offer.module.scss'
 import { CommonBagde } from '@/src/shared/ui/badge'
 import LightningSvg from '@/src/assets/svg/lightning.svg?react'
 import { CommonButton } from '@/src/shared/ui/button'
-import { c } from '@/src/shared/lib/helpers'
+import { c, commaSeparated } from '@/src/shared/lib/helpers'
 
 interface IOfferProps extends IOffer {
 	pickOffer: (uid: string) => void
 	selectedOffer: string
 	device: 'desktop' | 'mobile'
 	pay: (uid: string) => void
-	centered: boolean
 }
 
-const Offer: React.FC<IOfferProps> = ({
-	pickOffer,
-	uid,
-	tokens_per_plan,
-	price,
-	centered,
-	points,
-	pay,
-}) => {
+const Offer: React.FC<IOfferProps> = ({ pickOffer, uid, tokens_per_plan, price, points, pay }) => {
 	return (
-		<div
-			className={c(styles.tarif, centered && styles.tarif_centered)}
-			onClick={() => pickOffer(uid)}
-		>
+		<div className={c(styles.tarif)} onClick={() => pickOffer(uid)}>
 			<div className={styles.tarif__header}>
 				<CommonBagde className={styles.tarif__badge}>
 					<LightningSvg color='#8280FF' width={16} height={24} />
 					<span className={styles.tarif__count}>
-						{Math.round(Number(tokens_per_plan))}
+						{commaSeparated(Math.round(Number(tokens_per_plan)))}
 					</span>
 				</CommonBagde>
 				<p className={styles.tarif__quote}>токенов</p>
@@ -47,13 +35,9 @@ const Offer: React.FC<IOfferProps> = ({
 				))}
 			</ul>
 
-			<p className={styles.tarif__price}>{parseInt(price) ?? 0}₽</p>
+			<p className={styles.tarif__price}>{commaSeparated(parseInt(price) ?? 0)}₽</p>
 
-			<CommonButton
-				onClick={() => pay(uid)}
-				className={c(!centered && styles.tarif__btn)}
-				variant={centered ? 'primary' : 'outline'}
-			>
+			<CommonButton onClick={() => pay(uid)} variant={'outline'}>
 				Оплатить
 			</CommonButton>
 		</div>