diff --git a/packages/plasma-temple/src/components/Product/Product.tsx b/packages/plasma-temple/src/components/Product/Product.tsx
index ec4d691dd..78dedf3c6 100644
--- a/packages/plasma-temple/src/components/Product/Product.tsx
+++ b/packages/plasma-temple/src/components/Product/Product.tsx
@@ -1,14 +1,11 @@
 import React from 'react';
-import { detectDevice, DeviceKind } from '@sberdevices/plasma-ui/utils';
+
+import { DeviceComponent } from '../DeviceComponent/DeviceComponent';
 
 import { ProductCommon, ProductProps } from './Product@common';
 import { ProductMobile } from './Product@mobile';
 
-const mapDeviceToProduct: Record<DeviceKind, React.FC<ProductProps>> = {
-    sberBox: ProductCommon,
-    sberPortal: ProductCommon,
-    mobile: ProductMobile,
-};
-
 /** Компонент страницы товара (без заголовка) */
-export const Product = mapDeviceToProduct[detectDevice()];
+export const Product: React.FC<ProductProps> = (props) => (
+    <DeviceComponent sberbox={ProductCommon} sberportal={ProductCommon} mobile={ProductMobile} props={props} />
+);
diff --git a/packages/plasma-temple/src/components/Product/Product@common.tsx b/packages/plasma-temple/src/components/Product/Product@common.tsx
index 290307661..386745067 100644
--- a/packages/plasma-temple/src/components/Product/Product@common.tsx
+++ b/packages/plasma-temple/src/components/Product/Product@common.tsx
@@ -8,8 +8,8 @@ import { ProductImage } from './ProductImage/ProductImage';
 import { ProductActionButton, ProductActionButtonProps } from './ProductActionButton/ProductActionButton';
 import { ProductVariationSwitcher } from './ProductVariationSwitcher/ProductVariationSwitcher';
 import { ProductDetails } from './ProductDetails/ProductDetails';
-import { ExpandableProductDetails } from './ProductDetails/ExpandableProductDetails/ExpandableProductDetails';
-import { ProductInfo } from './ProductInfo/ProductInfo';
+import { ExpandableProductDetailsCommon } from './ProductDetails/ExpandableProductDetails/ExpandableProductDetails@common';
+import { ProductInfoCommon } from './ProductInfo/ProductInfo@common';
 import { ProductEntity, ProductVariation as ProductVariationType } from './types';
 import { useScrollByBreakpoints } from './hooks/useScrollByBreakpoints';
 import { ProductRecommendations } from './ProductRecommendations/ProductRecommendations';
@@ -165,7 +165,7 @@ export const ProductCommon = ({
                 {variations.length > 0 && (
                     <div ref={variationRef}>
                         {variations.map((variation) => (
-                            <StyledSmallSection>
+                            <StyledSmallSection key={String(variation.id)}>
                                 <ProductVariation {...variation} onChange={onChangeVariation} />
                             </StyledSmallSection>
                         ))}
@@ -178,7 +178,7 @@ export const ProductCommon = ({
                 )}
                 {details && (
                     <StyledSection ref={detailsRef}>
-                        <ExpandableProductDetails
+                        <ExpandableProductDetailsCommon
                             title={details.title}
                             details={details.values}
                             fixedLines={6}
@@ -188,7 +188,7 @@ export const ProductCommon = ({
                 )}
                 {description && (
                     <StyledSection ref={descriptionRef}>
-                        <ProductInfo
+                        <ProductInfoCommon
                             title={description.title}
                             info={description.content}
                             renderToggleButton={renderToggleButton}
diff --git a/packages/plasma-temple/src/components/Product/Product@mobile.tsx b/packages/plasma-temple/src/components/Product/Product@mobile.tsx
index 2d04ec2f8..952bc5175 100644
--- a/packages/plasma-temple/src/components/Product/Product@mobile.tsx
+++ b/packages/plasma-temple/src/components/Product/Product@mobile.tsx
@@ -5,8 +5,8 @@ import { ProductTitle } from './ProductTitle/ProductTitle';
 import { ProductPrice } from './ProductPrice/ProductPrice';
 import { ProductActionButton } from './ProductActionButton/ProductActionButton';
 import { ProductDetails } from './ProductDetails/ProductDetails';
-import { ExpandableProductDetails } from './ProductDetails/ExpandableProductDetails/ExpandableProductDetails';
-import { ProductInfo } from './ProductInfo/ProductInfo';
+import { ExpandableProductDetailsMobile } from './ProductDetails/ExpandableProductDetails/ExpandableProductDetails@mobile';
+import { ProductInfoMobile } from './ProductInfo/ProductInfo@mobile';
 import { ProductProps, ProductVariation } from './Product@common';
 import { ProductImageSlider } from './ProductImageSlider/ProductImageSlider';
 import { ProductRecommendations } from './ProductRecommendations/ProductRecommendations';
@@ -48,7 +48,7 @@ export const ProductMobile = ({
                 <ProductActionButton {...actionButtonProps} />
             </StyledSection>
             {variations?.map((variation) => (
-                <StyledSmallSection>
+                <StyledSmallSection key={String(variation.id)}>
                     <ProductVariation {...variation} onChange={onChangeVariation} />
                 </StyledSmallSection>
             ))}
@@ -59,12 +59,12 @@ export const ProductMobile = ({
             )}
             {details && (
                 <StyledSection>
-                    <ExpandableProductDetails title={details.title} details={details.values} />
+                    <ExpandableProductDetailsMobile title={details.title} details={details.values} />
                 </StyledSection>
             )}
             {description && (
                 <StyledSection>
-                    <ProductInfo title={description.title} info={description.content} />
+                    <ProductInfoMobile title={description.title} info={description.content} />
                 </StyledSection>
             )}
             {recommendations && recommendations.items.length > 0 && (
diff --git a/packages/plasma-temple/src/components/Product/ProductDetails/ExpandableProductDetails/ExpandableProductDetails.tsx b/packages/plasma-temple/src/components/Product/ProductDetails/ExpandableProductDetails/ExpandableProductDetails.tsx
index 175c0af0c..95429909d 100644
--- a/packages/plasma-temple/src/components/Product/ProductDetails/ExpandableProductDetails/ExpandableProductDetails.tsx
+++ b/packages/plasma-temple/src/components/Product/ProductDetails/ExpandableProductDetails/ExpandableProductDetails.tsx
@@ -1,18 +1,19 @@
 import React from 'react';
-import { detectDevice, DeviceKind } from '@sberdevices/plasma-ui/utils';
+
+import { DeviceComponent } from '../../../DeviceComponent/DeviceComponent';
 
 import { ExpandableProductDetailsCommon, ExpandableProductDetailsProps } from './ExpandableProductDetails@common';
 import { ExpandableProductDetailsMobile } from './ExpandableProductDetails@mobile';
 
-const mapDeviceToExpandableProductDetails: Record<DeviceKind, React.FC<ExpandableProductDetailsProps>> = {
-    sberBox: ExpandableProductDetailsCommon,
-    sberPortal: ExpandableProductDetailsCommon,
-    mobile: ExpandableProductDetailsMobile,
-};
-
 /**
  * Компонент для отображения деталей (характеристик) товара
  * с возможность по умолчанию скрывать часть характеристик
- * Актуален для устройств с пультом и SberPortal
  */
-export const ExpandableProductDetails = mapDeviceToExpandableProductDetails[detectDevice()];
+export const ExpandableProductDetails: React.FC<ExpandableProductDetailsProps> = (props) => (
+    <DeviceComponent
+        sberbox={ExpandableProductDetailsCommon}
+        sberportal={ExpandableProductDetailsCommon}
+        mobile={ExpandableProductDetailsMobile}
+        props={props}
+    />
+);
diff --git a/packages/plasma-temple/src/components/Product/ProductDetails/ProductDetails.tsx b/packages/plasma-temple/src/components/Product/ProductDetails/ProductDetails.tsx
index 0413b6e8a..5e1905b40 100644
--- a/packages/plasma-temple/src/components/Product/ProductDetails/ProductDetails.tsx
+++ b/packages/plasma-temple/src/components/Product/ProductDetails/ProductDetails.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
-import styled from 'styled-components';
-import { detectDevice, DeviceKind, Headline3, Button2, ParagraphText2 } from '@sberdevices/plasma-ui';
+import styled, { css } from 'styled-components';
+import { mediaQuery } from '@sberdevices/plasma-ui';
+import { button2, headline3, paragraph2 } from '@sberdevices/plasma-tokens';
 
 import { DetailsItemProps, ProductDetailsItem } from './ProductDetailsItem/ProductDetailsItem';
 
@@ -22,13 +23,23 @@ const StyledProductDetailsItemContainer = styled.div`
     }
 `;
 
-const mapDeviceToTitle: Record<DeviceKind, React.FC> = {
-    sberBox: ParagraphText2,
-    sberPortal: Button2,
-    mobile: Headline3,
-};
+export const StyledTitle = styled.div`
+    ${paragraph2}
+
+    ${mediaQuery(
+        'M',
+        2,
+    )(css`
+        ${button2}
+    `)}
+
+    ${mediaQuery(
+        'S',
+        1,
+    )(css`
+        ${headline3}
+    `)}
 
-export const StyledTitle = styled(mapDeviceToTitle[detectDevice()])`
     margin-bottom: 0.75rem;
 `;
 
diff --git a/packages/plasma-temple/src/components/Product/ProductDetails/ProductDetailsItem/ProductDetailsItem.tsx b/packages/plasma-temple/src/components/Product/ProductDetails/ProductDetailsItem/ProductDetailsItem.tsx
index 12b237b0c..78eadad33 100644
--- a/packages/plasma-temple/src/components/Product/ProductDetails/ProductDetailsItem/ProductDetailsItem.tsx
+++ b/packages/plasma-temple/src/components/Product/ProductDetails/ProductDetailsItem/ProductDetailsItem.tsx
@@ -1,15 +1,7 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
-import {
-    detectDevice,
-    DeviceKind,
-    Footnote1,
-    Footnote2,
-    mediaQuery,
-    ParagraphText1,
-    ParagraphText2,
-} from '@sberdevices/plasma-ui';
-import { secondary } from '@sberdevices/plasma-tokens';
+import { mediaQuery } from '@sberdevices/plasma-ui';
+import { footnote1, footnote2, paragraph1, paragraph2, secondary } from '@sberdevices/plasma-tokens';
 
 import { useWindowInnerWidth } from '../../../../hooks/useWindowInnerWidth';
 
@@ -24,14 +16,16 @@ const StyledDetailsItemContainer = styled.div`
     align-items: flex-end;
 `;
 
-const mapDeviceToName: Record<DeviceKind, React.FC> = {
-    sberBox: ParagraphText1,
-    sberPortal: Footnote1,
-    mobile: Footnote1,
-};
-
-const StyledName = styled(mapDeviceToName[detectDevice()])<{ upperCase?: boolean }>`
+const StyledName = styled.div<{ upperCase?: boolean }>`
     color: ${secondary};
+    ${footnote1}
+
+    ${mediaQuery(
+        'XL',
+        2,
+    )(css`
+        ${paragraph1}
+    `)}
 
     ${({ upperCase }) =>
         upperCase &&
@@ -57,13 +51,16 @@ const StyledSpace = styled.div`
     `)}
 `;
 
-const mapDeviceToValue: Record<DeviceKind, React.FC> = {
-    sberBox: ParagraphText2,
-    sberPortal: Footnote2,
-    mobile: Footnote2,
-};
+const StyledValue = styled.div`
+    ${footnote2}
 
-const StyledValue = mapDeviceToValue[detectDevice()];
+    ${mediaQuery(
+        'XL',
+        2,
+    )(css`
+        ${paragraph2}
+    `)}
+`;
 
 interface LineParams {
     maxSymbolsInLine: number;
diff --git a/packages/plasma-temple/src/components/Product/ProductInfo/ProductInfo.tsx b/packages/plasma-temple/src/components/Product/ProductInfo/ProductInfo.tsx
index aa98bc0b2..c90ea3107 100644
--- a/packages/plasma-temple/src/components/Product/ProductInfo/ProductInfo.tsx
+++ b/packages/plasma-temple/src/components/Product/ProductInfo/ProductInfo.tsx
@@ -1,17 +1,18 @@
 import React from 'react';
-import { detectDevice, DeviceKind } from '@sberdevices/plasma-ui/utils';
+
+import { DeviceComponent } from '../../DeviceComponent/DeviceComponent';
 
 import { ProductInfoCommon, ProductInfoProps } from './ProductInfo@common';
 import { ProductInfoMobile } from './ProductInfo@mobile';
 
-const mapDeviceToProductInfo: Record<DeviceKind, React.FC<ProductInfoProps>> = {
-    sberBox: ProductInfoCommon,
-    sberPortal: ProductInfoCommon,
-    mobile: ProductInfoMobile,
-};
-
 /**
  * Компонент для отображения информации (описания) о товаре
- * Актуален для устройств с пультом и SberPortal
  */
-export const ProductInfo = mapDeviceToProductInfo[detectDevice()];
+export const ProductInfo: React.FC<ProductInfoProps> = (props) => (
+    <DeviceComponent
+        sberbox={ProductInfoCommon}
+        sberportal={ProductInfoCommon}
+        mobile={ProductInfoMobile}
+        props={props}
+    />
+);
diff --git a/packages/plasma-temple/src/components/Product/ProductInfo/ProductInfo@common.tsx b/packages/plasma-temple/src/components/Product/ProductInfo/ProductInfo@common.tsx
index 77000ca91..39bc059ae 100644
--- a/packages/plasma-temple/src/components/Product/ProductInfo/ProductInfo@common.tsx
+++ b/packages/plasma-temple/src/components/Product/ProductInfo/ProductInfo@common.tsx
@@ -1,15 +1,7 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
-import {
-    detectDevice,
-    DeviceKind,
-    Footnote1,
-    Footnote2,
-    Headline3,
-    ParagraphText1,
-    ParagraphText2,
-} from '@sberdevices/plasma-ui';
-import { secondary } from '@sberdevices/plasma-tokens';
+import { mediaQuery } from '@sberdevices/plasma-ui';
+import { footnote1, footnote2, headline3, paragraph1, paragraph2, secondary } from '@sberdevices/plasma-tokens';
 
 import { useCollapse } from '../../Collapse/hooks/useCollapse';
 import { ProductToggleButton, ProductToggleButtonProps } from '../ProductToggleButton/ProductToggleButton';
@@ -27,26 +19,39 @@ export interface ProductInfoProps {
     renderToggleButton?: (props: Pick<ProductToggleButtonProps, 'expanded' | 'toggle'>) => React.ReactNode;
 }
 
-const mapDeviceToTitle: Record<DeviceKind, React.FC> = {
-    sberBox: ParagraphText2,
-    sberPortal: Footnote2,
-    mobile: Headline3,
-};
+const StyledTitle = styled.div`
+    ${paragraph2}
+
+    ${mediaQuery(
+        'M',
+        2,
+    )(css`
+        ${footnote2}
+    `)}
+
+    ${mediaQuery(
+        'S',
+        1,
+    )(css`
+        ${headline3}
+    `)}
 
-const StyledTitle = styled(mapDeviceToTitle[detectDevice()])`
     margin-bottom: 0.5rem;
 `;
 
-const mapDeviceToInfo: Record<DeviceKind, React.FC> = {
-    sberBox: ParagraphText1,
-    sberPortal: Footnote1,
-    mobile: Footnote1,
-};
-
-const StyledInfo = styled(mapDeviceToInfo[detectDevice()])<{
+const StyledInfo = styled.div<{
     expanded: boolean;
 }>`
     hyphens: none;
+    ${footnote1}
+
+    ${mediaQuery(
+        'XL',
+        2,
+    )(css`
+        ${paragraph1}
+    `)}
+
     ${({ expanded }) =>
         expanded &&
         css`
diff --git a/packages/plasma-temple/src/components/Product/ProductPrice/ProductPrice.tsx b/packages/plasma-temple/src/components/Product/ProductPrice/ProductPrice.tsx
index 9b70d3a91..e65fd9d57 100644
--- a/packages/plasma-temple/src/components/Product/ProductPrice/ProductPrice.tsx
+++ b/packages/plasma-temple/src/components/Product/ProductPrice/ProductPrice.tsx
@@ -1,17 +1,55 @@
 import React from 'react';
-import { detectDevice } from '@sberdevices/plasma-ui/utils';
+import styled, { css } from 'styled-components';
+import { Col, mediaQuery, Price, Row } from '@sberdevices/plasma-ui';
+import { accent, headline2, headline3, primary } from '@sberdevices/plasma-tokens';
 
-import { DeviceFamily } from '../../../types';
-
-import { ProductPriceSberBox } from './ProductPrice@sberbox';
-import { ProductPriceSberPortal } from './ProductPrice@sberportal';
 import { ProductPriceProps } from './types';
 
-const mapDeviceToProductPrice: Record<DeviceFamily, React.FC<ProductPriceProps>> = {
-    sberBox: ProductPriceSberBox,
-    sberPortal: ProductPriceSberPortal,
-    mobile: ProductPriceSberPortal,
-};
+const StyledPrice = styled(Price)<{ old?: boolean }>`
+    ${headline2}
+
+    ${mediaQuery(
+        'M',
+        2,
+    )(css`
+        ${headline3}
+    `)}
+
+    ${mediaQuery(
+        'S',
+        1,
+    )(css`
+        ${headline3}
+    `)}
+
+    color: ${accent};
+    ${({ old }) =>
+        old &&
+        css`
+            color: ${primary};
+            opacity: 0.28;
+            text-decoration: line-through;
+        `}
+`;
 
 /** Компонент для отображения цены на странице товара */
-export const ProductPrice = mapDeviceToProductPrice[detectDevice()];
+export const ProductPrice: React.FC<ProductPriceProps> = ({ price, oldPrice, className, ...rest }) => {
+    if (!price) {
+        return null;
+    }
+
+    return (
+        <Row className={className}>
+            <Col>
+                <StyledPrice {...rest}>{price}</StyledPrice>
+            </Col>
+            {oldPrice && (
+                <Col>
+                    <StyledPrice {...rest} old>
+                        {oldPrice}
+                    </StyledPrice>
+                </Col>
+            )}
+        </Row>
+    );
+};
diff --git a/packages/plasma-temple/src/components/Product/ProductPrice/ProductPrice@common.tsx b/packages/plasma-temple/src/components/Product/ProductPrice/ProductPrice@common.tsx
deleted file mode 100644
index 2a81cc563..000000000
--- a/packages/plasma-temple/src/components/Product/ProductPrice/ProductPrice@common.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-import styled, { css } from 'styled-components';
-import { Col, Price, Row } from '@sberdevices/plasma-ui';
-import { accent, primary } from '@sberdevices/plasma-tokens';
-
-import { ProductPriceProps } from './types';
-
-const StyledPrice = styled(Price)<{ old?: boolean }>`
-    color: ${accent};
-    ${({ old }) =>
-        old &&
-        css`
-            color: ${primary};
-            opacity: 0.28;
-            text-decoration: line-through;
-        `}
-`;
-
-export const ProductPriceCommon: React.FC<ProductPriceProps> = ({ price, oldPrice, className, ...rest }) => {
-    if (!price) {
-        return null;
-    }
-
-    return (
-        <Row className={className}>
-            <Col>
-                <StyledPrice {...rest}>{price}</StyledPrice>
-            </Col>
-            {oldPrice && (
-                <Col>
-                    <StyledPrice {...rest} old>
-                        {oldPrice}
-                    </StyledPrice>
-                </Col>
-            )}
-        </Row>
-    );
-};
diff --git a/packages/plasma-temple/src/components/Product/ProductPrice/ProductPrice@sberbox.tsx b/packages/plasma-temple/src/components/Product/ProductPrice/ProductPrice@sberbox.tsx
deleted file mode 100644
index 806f85758..000000000
--- a/packages/plasma-temple/src/components/Product/ProductPrice/ProductPrice@sberbox.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import { Headline2 } from '@sberdevices/plasma-ui';
-
-import { ProductPriceCommon } from './ProductPrice@common';
-import { ProductPriceProps } from './types';
-
-export const ProductPriceSberBox: React.FC<ProductPriceProps> = (props) => (
-    <Headline2>
-        <ProductPriceCommon {...props} />
-    </Headline2>
-);
diff --git a/packages/plasma-temple/src/components/Product/ProductPrice/ProductPrice@sberportal.tsx b/packages/plasma-temple/src/components/Product/ProductPrice/ProductPrice@sberportal.tsx
deleted file mode 100644
index 37a393937..000000000
--- a/packages/plasma-temple/src/components/Product/ProductPrice/ProductPrice@sberportal.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import { Headline3 } from '@sberdevices/plasma-ui';
-
-import { ProductPriceCommon } from './ProductPrice@common';
-import { ProductPriceProps } from './types';
-
-export const ProductPriceSberPortal: React.FC<ProductPriceProps> = (props) => (
-    <Headline3>
-        <ProductPriceCommon {...props} />
-    </Headline3>
-);
diff --git a/packages/plasma-temple/src/components/Product/ProductRecommendations/ProductRecommendations.tsx b/packages/plasma-temple/src/components/Product/ProductRecommendations/ProductRecommendations.tsx
index d178fc33a..a2f1e4a7e 100644
--- a/packages/plasma-temple/src/components/Product/ProductRecommendations/ProductRecommendations.tsx
+++ b/packages/plasma-temple/src/components/Product/ProductRecommendations/ProductRecommendations.tsx
@@ -56,9 +56,8 @@ function ProductRecommendationsComponent<Id = unknown>({
 
             <Carousel axis="x" index={carouselIndex} scrollAlign="start" paddingEnd="5rem">
                 {recommendations.map((recommendation, index) => (
-                    <StyledCarouselItem scrollSnapAlign="start">
+                    <StyledCarouselItem scrollSnapAlign="start" key={index}>
                         <ProductRecommendationsItem
-                            key={index}
                             index={index}
                             recommendation={recommendation}
                             onClick={handleClick}
diff --git a/packages/plasma-temple/src/components/Product/ProductTitle/ProductTitle.tsx b/packages/plasma-temple/src/components/Product/ProductTitle/ProductTitle.tsx
index a054556e6..adb730272 100644
--- a/packages/plasma-temple/src/components/Product/ProductTitle/ProductTitle.tsx
+++ b/packages/plasma-temple/src/components/Product/ProductTitle/ProductTitle.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import styled from 'styled-components';
-import { detectDevice, DeviceKind } from '@sberdevices/plasma-ui/utils';
-import { Body1, Footnote1, Headline1, Headline2, TextBox } from '@sberdevices/plasma-ui';
-import { secondary } from '@sberdevices/plasma-tokens';
+import styled, { css } from 'styled-components';
+import { mediaQuery } from '@sberdevices/plasma-ui/utils';
+import { applyHyphens, BreakWordProps, TextBox } from '@sberdevices/plasma-ui';
+import { body1, footnote1, headline1, headline2, secondary } from '@sberdevices/plasma-tokens';
 
 export interface ProductTitleProps {
     /** Заголовок */
@@ -12,21 +12,29 @@ export interface ProductTitleProps {
     className?: string;
 }
 
-const mapDeviceToTitle: Record<DeviceKind, React.FC> = {
-    sberBox: Headline1,
-    sberPortal: Headline2,
-    mobile: Headline2,
-};
+export const Title = styled.div<BreakWordProps>`
+    ${applyHyphens}
+    ${headline2}
 
-export const Title = mapDeviceToTitle[detectDevice()] as typeof Headline1;
+    ${mediaQuery(
+        'XL',
+        2,
+    )(css`
+        ${headline1}
+    `)}
+`;
+
+export const StyledSubtitle = styled.div<BreakWordProps>`
+    ${applyHyphens}
+    ${body1}
 
-const mapDeviceToSubtitle: Record<DeviceKind, React.FC> = {
-    sberBox: Body1,
-    sberPortal: Body1,
-    mobile: Footnote1,
-};
+    ${mediaQuery(
+        'S',
+        1,
+    )(css`
+        ${footnote1}
+    `)}
 
-export const StyledSubtitle = styled(mapDeviceToSubtitle[detectDevice()])`
     color: ${secondary};
     margin-top: 0.5rem;
 `;
diff --git a/packages/plasma-temple/src/components/Product/ProductVariationSwitcher/ProductVariationSwitcher.tsx b/packages/plasma-temple/src/components/Product/ProductVariationSwitcher/ProductVariationSwitcher.tsx
index bcbc78780..f0091842c 100644
--- a/packages/plasma-temple/src/components/Product/ProductVariationSwitcher/ProductVariationSwitcher.tsx
+++ b/packages/plasma-temple/src/components/Product/ProductVariationSwitcher/ProductVariationSwitcher.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
-import styled from 'styled-components';
-import { Carousel, CarouselItem, detectDevice, DeviceKind, Footnote2, ParagraphText2 } from '@sberdevices/plasma-ui';
+import styled, { css } from 'styled-components';
+import { Carousel, CarouselItem, mediaQuery } from '@sberdevices/plasma-ui';
+import { footnote2, paragraph2 } from '@sberdevices/plasma-tokens';
 
 import { ProductVariationItem } from './ProductVariationItem/ProductVariationItem';
 
@@ -21,13 +22,15 @@ const StyledContainer = styled.div`
     width: 100%;
 `;
 
-const mapDeviceToTitle: Record<DeviceKind, React.FC> = {
-    sberBox: ParagraphText2,
-    sberPortal: Footnote2,
-    mobile: Footnote2,
-};
+const StyledTitle = styled.div`
+    ${footnote2}
 
-const StyledTitle = styled(mapDeviceToTitle[detectDevice()])`
+    ${mediaQuery(
+        'XL',
+        2,
+    )(css`
+        ${paragraph2}
+    `)}
     margin-bottom: 0.45rem;
 `;
 
@@ -55,9 +58,8 @@ export const ProductVariationSwitcher = React.memo<ProductVariationSwitcherProps
 
                 <StyledCarousel axis="x" index={carouselIndex} scrollAlign="start" paddingEnd="5rem">
                     {variations.map((variation, index) => (
-                        <StyledCarouselItem scrollSnapAlign="start">
+                        <StyledCarouselItem scrollSnapAlign="start" key={index}>
                             <ProductVariationItem
-                                key={index}
                                 index={index}
                                 active={index === activeIndex}
                                 variation={variation}
diff --git a/packages/plasma-temple/src/components/Product/index.ts b/packages/plasma-temple/src/components/Product/index.ts
index 65f11c6d8..d97edd83c 100644
--- a/packages/plasma-temple/src/components/Product/index.ts
+++ b/packages/plasma-temple/src/components/Product/index.ts
@@ -11,3 +11,4 @@ export * from './ProductImageSlider/ProductImageSlider';
 export * from './ProductInfo/ProductInfo';
 export * from './ProductRecommendations/ProductRecommendations';
 export * from './ProductVariationSwitcher/ProductVariationSwitcher';
+export * from './types';
diff --git a/packages/plasma-temple/src/components/Product/index@mobile.ts b/packages/plasma-temple/src/components/Product/index@mobile.ts
new file mode 100644
index 000000000..f4e364e51
--- /dev/null
+++ b/packages/plasma-temple/src/components/Product/index@mobile.ts
@@ -0,0 +1,11 @@
+export { ProductMobile as Product } from './Product@mobile';
+export { ProductActionButton } from './ProductActionButton/ProductActionButton';
+export { ProductDetails } from './ProductDetails/ProductDetails';
+export { ExpandableProductDetailsMobile as ExpandableProductDetails } from './ProductDetails/ExpandableProductDetails/ExpandableProductDetails@mobile';
+export { ProductImage } from './ProductImage/ProductImage';
+export { ProductImageSlider } from './ProductImageSlider/ProductImageSlider';
+export { ProductInfoMobile as ProductInfo } from './ProductInfo/ProductInfo@mobile';
+export { ProductPrice } from './ProductPrice/ProductPrice';
+export { ProductTitle } from './ProductTitle/ProductTitle';
+export { ProductRecommendations } from './ProductRecommendations/ProductRecommendations';
+export { ProductVariationSwitcher } from './ProductVariationSwitcher/ProductVariationSwitcher';
diff --git a/packages/plasma-temple/src/components/Product/index@sberbox.ts b/packages/plasma-temple/src/components/Product/index@sberbox.ts
new file mode 100644
index 000000000..2a7d5972c
--- /dev/null
+++ b/packages/plasma-temple/src/components/Product/index@sberbox.ts
@@ -0,0 +1,10 @@
+export { ProductCommon as Product } from './Product@common';
+export { ProductActionButton } from './ProductActionButton/ProductActionButton';
+export { ProductDetails } from './ProductDetails/ProductDetails';
+export { ExpandableProductDetailsCommon as ExpandableProductDetails } from './ProductDetails/ExpandableProductDetails/ExpandableProductDetails@common';
+export { ProductImage } from './ProductImage/ProductImage';
+export { ProductInfoCommon as ProductInfo } from './ProductInfo/ProductInfo@common';
+export { ProductPrice } from './ProductPrice/ProductPrice';
+export { ProductTitle } from './ProductTitle/ProductTitle';
+export { ProductRecommendations } from './ProductRecommendations/ProductRecommendations';
+export { ProductVariationSwitcher } from './ProductVariationSwitcher/ProductVariationSwitcher';
diff --git a/packages/plasma-temple/src/components/Product/index@sberportal.ts b/packages/plasma-temple/src/components/Product/index@sberportal.ts
new file mode 100644
index 000000000..2a7d5972c
--- /dev/null
+++ b/packages/plasma-temple/src/components/Product/index@sberportal.ts
@@ -0,0 +1,10 @@
+export { ProductCommon as Product } from './Product@common';
+export { ProductActionButton } from './ProductActionButton/ProductActionButton';
+export { ProductDetails } from './ProductDetails/ProductDetails';
+export { ExpandableProductDetailsCommon as ExpandableProductDetails } from './ProductDetails/ExpandableProductDetails/ExpandableProductDetails@common';
+export { ProductImage } from './ProductImage/ProductImage';
+export { ProductInfoCommon as ProductInfo } from './ProductInfo/ProductInfo@common';
+export { ProductPrice } from './ProductPrice/ProductPrice';
+export { ProductTitle } from './ProductTitle/ProductTitle';
+export { ProductRecommendations } from './ProductRecommendations/ProductRecommendations';
+export { ProductVariationSwitcher } from './ProductVariationSwitcher/ProductVariationSwitcher';
diff --git a/packages/plasma-temple/src/components/index@mobile.ts b/packages/plasma-temple/src/components/index@mobile.ts
index 1f2d8adc4..7b7764c55 100644
--- a/packages/plasma-temple/src/components/index@mobile.ts
+++ b/packages/plasma-temple/src/components/index@mobile.ts
@@ -1,3 +1,4 @@
 export { StateLayoutMobile as StateLayout } from './StateLayout/StateLayout@mobile';
 export * from './Item/index@mobile';
 export * from './Cart/index@mobile';
+export * from './Product/index@mobile';
diff --git a/packages/plasma-temple/src/components/index@sberbox.ts b/packages/plasma-temple/src/components/index@sberbox.ts
index 41865db16..2c8a1a23e 100644
--- a/packages/plasma-temple/src/components/index@sberbox.ts
+++ b/packages/plasma-temple/src/components/index@sberbox.ts
@@ -1,3 +1,4 @@
 export { StateLayoutSberBox as StateLayout } from './StateLayout/StateLayout@sberbox';
 export * from './Item/index@sberbox';
 export * from './Cart/index@sberbox';
+export * from './Product/index@sberbox';
diff --git a/packages/plasma-temple/src/components/index@sberportal.ts b/packages/plasma-temple/src/components/index@sberportal.ts
index c708b78f7..09be29fb9 100644
--- a/packages/plasma-temple/src/components/index@sberportal.ts
+++ b/packages/plasma-temple/src/components/index@sberportal.ts
@@ -1,3 +1,4 @@
 export { StateLayoutSberPortal as StateLayout } from './StateLayout/StateLayout@sberportal';
 export * from './Item/index@sberportal';
 export * from './Cart/index@sberportal';
+export * from './Product/index@sberportal';