diff --git a/frontend-next-migration/src/app/[lng]/(helper)/collections/loading.tsx b/frontend-next-migration/src/app/[lng]/(helper)/collections/loading.tsx
index b382aec34..d8da3227b 100644
--- a/frontend-next-migration/src/app/[lng]/(helper)/collections/loading.tsx
+++ b/frontend-next-migration/src/app/[lng]/(helper)/collections/loading.tsx
@@ -1 +1,12 @@
-export { PageLoader as default } from '@/widgets/PageLoader';
+export default function Loading() {
+    return (
+        <div
+            role="status"
+            aria-busy="true"
+            aria-live="polite"
+            style={{ padding: '1rem' }}
+        >
+            Loading…
+        </div>
+    );
+}
diff --git a/frontend-next-migration/src/app/[lng]/(helper)/defense-gallery/[herogroup]/not-found.tsx b/frontend-next-migration/src/app/[lng]/(helper)/defense-gallery/[herogroup]/not-found.tsx
index d71dd0b01..697b0482e 100644
--- a/frontend-next-migration/src/app/[lng]/(helper)/defense-gallery/[herogroup]/not-found.tsx
+++ b/frontend-next-migration/src/app/[lng]/(helper)/defense-gallery/[herogroup]/not-found.tsx
@@ -18,7 +18,10 @@ export default function NotFound() {
             }}
         >
             <h1>{t('not-found-title')}</h1>
-            <Link href={getRouteAllHeroesPage()}>
+            <Link
+                href={getRouteAllHeroesPage()}
+                prefetch={false}
+            >
                 <b>{t('not-found-check-heroes')}</b>
             </Link>
         </div>
diff --git a/frontend-next-migration/src/app/[lng]/(helper)/heroes/[slug]/not-found.tsx b/frontend-next-migration/src/app/[lng]/(helper)/heroes/[slug]/not-found.tsx
index d71dd0b01..697b0482e 100644
--- a/frontend-next-migration/src/app/[lng]/(helper)/heroes/[slug]/not-found.tsx
+++ b/frontend-next-migration/src/app/[lng]/(helper)/heroes/[slug]/not-found.tsx
@@ -18,7 +18,10 @@ export default function NotFound() {
             }}
         >
             <h1>{t('not-found-title')}</h1>
-            <Link href={getRouteAllHeroesPage()}>
+            <Link
+                href={getRouteAllHeroesPage()}
+                prefetch={false}
+            >
                 <b>{t('not-found-check-heroes')}</b>
             </Link>
         </div>
diff --git a/frontend-next-migration/src/app/[lng]/(helper)/heroes/loading.tsx b/frontend-next-migration/src/app/[lng]/(helper)/heroes/loading.tsx
index b382aec34..7d0efc1fe 100644
--- a/frontend-next-migration/src/app/[lng]/(helper)/heroes/loading.tsx
+++ b/frontend-next-migration/src/app/[lng]/(helper)/heroes/loading.tsx
@@ -1 +1,16 @@
-export { PageLoader as default } from '@/widgets/PageLoader';
+export default function Loading() {
+    return (
+        <div
+            aria-live="polite"
+            aria-busy="true"
+            style={{
+                display: 'grid',
+                placeItems: 'center',
+                height: '50vh',
+                fontSize: '1rem',
+            }}
+        >
+            Loading…
+        </div>
+    );
+}
diff --git a/frontend-next-migration/src/app/[lng]/(home)/_getPage.ts b/frontend-next-migration/src/app/[lng]/(home)/_getPage.ts
index 2dde0d6af..dfa6e41e5 100644
--- a/frontend-next-migration/src/app/[lng]/(home)/_getPage.ts
+++ b/frontend-next-migration/src/app/[lng]/(home)/_getPage.ts
@@ -1,7 +1,6 @@
 import { MainPageProps } from '@/preparedPages/MainPage';
 import { getServerTranslation } from '@/shared/i18n';
 import { AppExternalLinks } from '@/shared/appLinks/appExternalLinks';
-import gameImg from '@/shared/assets/images/mainpage/HandGraphicWithBattle.png';
 import iPhone16 from '@/shared/assets/images/mainpage/iPhone 16 Pro mockup natural titanium 1.png';
 import {
     getRouteAllHeroesPage,
@@ -95,7 +94,7 @@ export async function _getPage(lng: string) {
                     AppExternalLinks.fbPost1,
                 ],
                 videoLink: AppExternalLinks.previewVideoYoutube,
-                gameImg: iPhone16.src,
+                gameImg: iPhone16,
             },
             contactSection: {
                 title: t('contact-title'),
diff --git a/frontend-next-migration/src/entities/Furniture/model/data/sets/rakkaus.ts b/frontend-next-migration/src/entities/Furniture/model/data/sets/rakkaus.ts
index f21ec3f97..233fc7c14 100644
--- a/frontend-next-migration/src/entities/Furniture/model/data/sets/rakkaus.ts
+++ b/frontend-next-migration/src/entities/Furniture/model/data/sets/rakkaus.ts
@@ -23,7 +23,7 @@ import { rarityList } from '../rarities';
 export const rakkausSet: SetInfo = {
     id: 'rakkaus',
     path: 'RAKKAUSSET',
-    author: 'IV',
+    author: 'Ida Vesterinen',
     cover: rakkausCover,
     coverposition: FurnitureSetCoverPosition.MEDIUM,
     items: [
diff --git a/frontend-next-migration/src/entities/Gallery/ui/GalleryCategoriesWithModalSlider.tsx b/frontend-next-migration/src/entities/Gallery/ui/GalleryCategoriesWithModalSlider.tsx
index 16d1451a2..207b62b32 100644
--- a/frontend-next-migration/src/entities/Gallery/ui/GalleryCategoriesWithModalSlider.tsx
+++ b/frontend-next-migration/src/entities/Gallery/ui/GalleryCategoriesWithModalSlider.tsx
@@ -83,7 +83,9 @@ export const GalleryCategoriesWithModalSlider = memo(
                                 width={250}
                                 height={292}
                                 className={cls.coverImage}
+                                priority={true}
                                 alt={idx === 0 ? cover.name : `Page ${idx}`}
+                                style={{ width: '100%', height: 'auto' }}
                             />
                         </a>
                     </div>
@@ -112,6 +114,7 @@ export const GalleryCategoriesWithModalSlider = memo(
                                     width={20}
                                     height={20}
                                     alt="Zoom"
+                                    style={{ width: 'auto', height: 'auto' }}
                                 />
                             </button>
                         </div>
diff --git a/frontend-next-migration/src/entities/Hero/model/initializeHeroGroups.ts b/frontend-next-migration/src/entities/Hero/model/initializeHeroGroups.ts
index 851303efa..d2cca1d77 100644
--- a/frontend-next-migration/src/entities/Hero/model/initializeHeroGroups.ts
+++ b/frontend-next-migration/src/entities/Hero/model/initializeHeroGroups.ts
@@ -1,4 +1,4 @@
-import { type GroupInfo, HeroGroup, HeroSlug } from '../types/hero';
+import { type GroupInfo, HeroGroup } from '../types/hero';
 import { buildHeroGroups } from '@/entities/Hero/model/heroGroupsData';
 
 export const initializeHeroGroups = (t: (key: string) => string): Record<HeroGroup, GroupInfo> => {
diff --git a/frontend-next-migration/src/entities/Hero/ui/AttributesPricing3/AttributesPricingV3.tsx b/frontend-next-migration/src/entities/Hero/ui/AttributesPricing3/AttributesPricingV3.tsx
index d7d104d67..9c9d4fa3c 100644
--- a/frontend-next-migration/src/entities/Hero/ui/AttributesPricing3/AttributesPricingV3.tsx
+++ b/frontend-next-migration/src/entities/Hero/ui/AttributesPricing3/AttributesPricingV3.tsx
@@ -1,9 +1,8 @@
-import React, { useCallback, useMemo, Dispatch, SetStateAction } from 'react';
+'use client';
+import React, { useCallback, useMemo, useEffect, Dispatch, SetStateAction } from 'react';
 import { useClientTranslation } from '@/shared/i18n';
 import { AttributePricingHelper } from '../../model/stats/AttributesPricingHelper';
-import { statValue } from '../../model/stats/statsDataV2';
-import { statsPricingData } from '../../model/stats/statsPricingData';
-import { Stat } from '../../types/hero';
+import { statValue, statsPricingData, Stat } from '@/entities/Hero';
 import cls from './AttributesPricing.module.scss';
 
 // import { statsPricingData, Stat, statValue } from '@/entities/Hero';
@@ -42,11 +41,13 @@ export const AttributesPricing3 = ({
     const { t } = useClientTranslation('heroes-stats-pricing');
 
     const totalUpgraded = useMemo(() => {
-        const total = AttributePricingHelper.getTotalUpgraded(stats);
-        setUpgradePotential(10 - total);
-        return total;
+        return AttributePricingHelper.getTotalUpgraded(stats);
     }, [stats]);
 
+    useEffect(() => {
+        setUpgradePotential(10 - totalUpgraded);
+    }, [totalUpgraded, setUpgradePotential]);
+
     const setDropdowns = useCallback(
         (statName: string) => {
             const [stat, level] = AttributePricingHelper.getStatAndLevel(
@@ -62,8 +63,46 @@ export const AttributesPricing3 = ({
         [stats, selectedStat],
     );
 
-    //This fixes dropdown updates and out-of-range calculations in Storybook when editing Stats data.
-    const currentLevel = useMemo(() => setDropdowns(selectedStat.name), [stats, selectedStat]);
+    // Derive current level purely without causing side effects during render
+    const currentLevel = useMemo(() => {
+        const [, level] = AttributePricingHelper.getStatAndLevel(
+            selectedStat.name,
+            stats,
+            selectedStat,
+        );
+        return level;
+    }, [stats, selectedStat]);
+
+    // Keep dropdowns in sync if stats or selectedStat change (without causing render-time updates)
+    useEffect(() => {
+        if (!stats || stats.length === 0) return;
+
+        // If current selected stat is not present in the provided stats, fallback to the first available
+        const found = stats.find((stat) => stat.name === selectedStat.name);
+        if (!found) {
+            const fallback = stats[0];
+            const [, level] = AttributePricingHelper.getStatAndLevel(
+                fallback.name,
+                stats,
+                selectedStat,
+            );
+            setSelectedStat(fallback);
+            setFromLevel(level);
+            setToLevel(level);
+            return;
+        }
+
+        const [stat, level] = AttributePricingHelper.getStatAndLevel(
+            selectedStat.name,
+            stats,
+            selectedStat,
+        );
+        if (stat.name !== selectedStat.name) {
+            setSelectedStat(stat);
+        }
+        setFromLevel((prev) => (prev !== level ? level : prev));
+        setToLevel((prev) => (prev !== level ? level : prev));
+    }, [stats, selectedStat, setSelectedStat, setFromLevel, setToLevel]);
 
     const getLevelRange = useCallback(
         () => AttributePricingHelper.getLevelRange(totalUpgraded, currentLevel),
@@ -104,6 +143,17 @@ export const AttributesPricing3 = ({
         [fromLevel, toLevel, selectedStat.rarityClass, selectedStat.defaultLevel],
     );
 
+    // Ensure the select has a valid value on the very first render, even if selectedStat.name is not in stats yet
+    const selectedName = useMemo(() => {
+        const found = stats?.find((stat) => stat.name === selectedStat.name)?.name;
+        return found ?? stats?.[0]?.name ?? '';
+    }, [stats, selectedStat.name]);
+
+    const selectedColor = useMemo(() => {
+        const stat = stats?.find((stat) => stat.name === selectedName);
+        return stat?.color ?? selectedStat.color;
+    }, [stats, selectedName, selectedStat.color]);
+
     if (!statsPricingData) {
         return <h2>{t('Stat pricing data is unavailable')}</h2>;
     }
@@ -115,7 +165,8 @@ export const AttributesPricing3 = ({
                 <select
                     data-testid="stat"
                     className={cls.Stats}
-                    style={{ color: selectedStat.color, borderColor: selectedStat.color }}
+                    value={selectedName}
+                    style={{ color: selectedColor, borderColor: selectedColor }}
                     onChange={handleStatChange}
                 >
                     {stats.map((stat) => (
diff --git a/frontend-next-migration/src/entities/Hero/ui/HeroContainerTempByLeo/components/CloseButton.tsx b/frontend-next-migration/src/entities/Hero/ui/HeroContainerTempByLeo/components/CloseButton.tsx
index 648dea148..3bae1046a 100644
--- a/frontend-next-migration/src/entities/Hero/ui/HeroContainerTempByLeo/components/CloseButton.tsx
+++ b/frontend-next-migration/src/entities/Hero/ui/HeroContainerTempByLeo/components/CloseButton.tsx
@@ -11,7 +11,10 @@ export default function CloseButton({ href, combinedModCss }: Props) {
     return (
         <div className={classNames(cls.xLinkButton, combinedModCss)}>
             {' '}
-            <Link href={href}>
+            <Link
+                href={href}
+                prefetch={false}
+            >
                 <h1>X</h1>
             </Link>
         </div>
diff --git a/frontend-next-migration/src/features/NavigateHeroes/ui/SingleHeroNavMenuAsDropdown/SingleHeroNavMenuAsDropdown.tsx b/frontend-next-migration/src/features/NavigateHeroes/ui/SingleHeroNavMenuAsDropdown/SingleHeroNavMenuAsDropdown.tsx
index 03c9cf368..bec7ed18e 100644
--- a/frontend-next-migration/src/features/NavigateHeroes/ui/SingleHeroNavMenuAsDropdown/SingleHeroNavMenuAsDropdown.tsx
+++ b/frontend-next-migration/src/features/NavigateHeroes/ui/SingleHeroNavMenuAsDropdown/SingleHeroNavMenuAsDropdown.tsx
@@ -11,7 +11,6 @@ import {
 import { getRouteOneHeroPage } from '@/shared/appLinks/RoutePaths';
 import { useClientTranslation } from '@/shared/i18n';
 import useSizes from '@/shared/lib/hooks/useSizes';
-import { classNames } from '@/shared/lib/classNames/classNames';
 
 const SingleHeroNavMenuAsDropdown: React.FC = () => {
     const { isMobileSize, isTabletSize } = useSizes();
diff --git a/frontend-next-migration/src/features/ScrollBottom/ui/ScrollBottomButton.module.scss b/frontend-next-migration/src/features/ScrollBottom/ui/ScrollBottomButton.module.scss
index 80796baef..088eacb63 100644
--- a/frontend-next-migration/src/features/ScrollBottom/ui/ScrollBottomButton.module.scss
+++ b/frontend-next-migration/src/features/ScrollBottom/ui/ScrollBottomButton.module.scss
@@ -1,3 +1,6 @@
 .ScrollBottom {
     width: fit-content !important;
 }
+.Image {
+    height: auto;
+}
diff --git a/frontend-next-migration/src/features/ScrollBottom/ui/ScrollBottomButton.tsx b/frontend-next-migration/src/features/ScrollBottom/ui/ScrollBottomButton.tsx
index 345abecac..b86a809fc 100644
--- a/frontend-next-migration/src/features/ScrollBottom/ui/ScrollBottomButton.tsx
+++ b/frontend-next-migration/src/features/ScrollBottom/ui/ScrollBottomButton.tsx
@@ -4,6 +4,7 @@ import { Button, ButtonSize, ButtonTheme } from '@/shared/ui/Button/Button';
 import { scrollToBottom } from '../model/scrollToBottom/scrollToBottom';
 import { useBottomAnimationCancellation } from '../model/useBottomAnimationCancellation/useBottomAnimationCancellation';
 import Image, { StaticImageData } from 'next/image';
+import cls from './ScrollBottomButton.module.scss';
 
 interface Props {
     speedInMs?: number;
@@ -56,7 +57,7 @@ const ScrollBottomButtonComponent = (props: Props) => {
                     text
                 ) : (
                     <Image
-                        height={20}
+                        className={cls.Image}
                         width={20}
                         src={image}
                         alt={'icon'}
diff --git a/frontend-next-migration/src/preparedPages/ComingPage/ui/ComingPage.tsx b/frontend-next-migration/src/preparedPages/ComingPage/ui/ComingPage.tsx
index 31a1c0912..554e82434 100644
--- a/frontend-next-migration/src/preparedPages/ComingPage/ui/ComingPage.tsx
+++ b/frontend-next-migration/src/preparedPages/ComingPage/ui/ComingPage.tsx
@@ -27,24 +27,28 @@ const ComingPage = (props: Props) => {
                     <Image
                         src={hateSpeech.src}
                         alt="Hate Speech"
+                        priority={true}
                         width={150}
                         height={150}
                     />
                     <Image
                         src={jokester}
                         alt="Jokester"
+                        priority={true}
                         width={150}
                         height={150}
                     />
                     <Image
                         src={believer}
                         alt="Believer"
+                        priority={true}
                         width={150}
                         height={150}
                     />
                     <Image
                         src={provocator}
                         alt="Provocator"
+                        priority={true}
                         width={150}
                         height={150}
                     />
@@ -53,6 +57,7 @@ const ComingPage = (props: Props) => {
                         alt="Alcoholic"
                         width={150}
                         height={150}
+                        priority={true}
                         className={cls.flipped}
                     />
                     <Image
@@ -60,11 +65,13 @@ const ComingPage = (props: Props) => {
                         alt="Purple Girls"
                         width={150}
                         height={150}
+                        priority={true}
                         className={cls.flipped}
                     />
                     <Image
                         src={pedant}
                         alt="Pedant"
+                        priority={true}
                         width={150}
                         height={150}
                         className={cls.pedant}
diff --git a/frontend-next-migration/src/preparedPages/EthicalGuidelinesPage/ui/EthicalGuidelinesPage.tsx b/frontend-next-migration/src/preparedPages/EthicalGuidelinesPage/ui/EthicalGuidelinesPage.tsx
index 320111b4b..3864ae161 100644
--- a/frontend-next-migration/src/preparedPages/EthicalGuidelinesPage/ui/EthicalGuidelinesPage.tsx
+++ b/frontend-next-migration/src/preparedPages/EthicalGuidelinesPage/ui/EthicalGuidelinesPage.tsx
@@ -1,6 +1,5 @@
 'use client';
 import { ScrollTop } from '@/features/ScrollTop';
-import { classNames } from '@/shared/lib/classNames/classNames';
 import { WikiContentWithSidebar } from '@/shared/ui/v2/WikiContentWithSidebar';
 
 interface Section {
diff --git a/frontend-next-migration/src/preparedPages/HeroDevelopmentPage/ui/HeroDevelopmentPage.tsx b/frontend-next-migration/src/preparedPages/HeroDevelopmentPage/ui/HeroDevelopmentPage.tsx
index c4a895f65..2e96e74a5 100644
--- a/frontend-next-migration/src/preparedPages/HeroDevelopmentPage/ui/HeroDevelopmentPage.tsx
+++ b/frontend-next-migration/src/preparedPages/HeroDevelopmentPage/ui/HeroDevelopmentPage.tsx
@@ -187,6 +187,7 @@ const HeroDevelopmentPage: React.FC<HeroDevelopmentPageProps> = ({ hero }) => {
                             <Image
                                 className={classNames(cls.Image, combinedModCss)}
                                 src={hero?.srcImg}
+                                priority={true}
                                 alt="image"
                             />
                         )}
diff --git a/frontend-next-migration/src/preparedPages/HeroesPages/ui/SingleHeroPage.tsx b/frontend-next-migration/src/preparedPages/HeroesPages/ui/SingleHeroPage.tsx
index 0389c5f06..478e61ada 100644
--- a/frontend-next-migration/src/preparedPages/HeroesPages/ui/SingleHeroPage.tsx
+++ b/frontend-next-migration/src/preparedPages/HeroesPages/ui/SingleHeroPage.tsx
@@ -131,6 +131,7 @@ const SingleHeroPage = (props: Props) => {
                                     alt={hero.title}
                                     fill
                                     sizes="100vw"
+                                    priority={true}
                                     className={cls.ResponsiveImage}
                                 />
                             </div>
@@ -221,6 +222,8 @@ const SingleHeroPage = (props: Props) => {
                                     <Image
                                         src={hero.srcImg}
                                         alt={hero.title}
+                                        priority={true}
+                                        sizes="100%"
                                         fill
                                         className={cls.ResponsiveImage}
                                     />
diff --git a/frontend-next-migration/src/preparedPages/MainPage/ui/_components/sections/AltZone/AltZone.module.scss b/frontend-next-migration/src/preparedPages/MainPage/ui/_components/sections/AltZone/AltZone.module.scss
index ece5e755e..807050fef 100644
--- a/frontend-next-migration/src/preparedPages/MainPage/ui/_components/sections/AltZone/AltZone.module.scss
+++ b/frontend-next-migration/src/preparedPages/MainPage/ui/_components/sections/AltZone/AltZone.module.scss
@@ -173,3 +173,8 @@
         font-size: 0.8rem;
     }
 }
+
+.gameImg {
+    width: 100%;
+    height:auto;
+}
\ No newline at end of file
diff --git a/frontend-next-migration/src/preparedPages/MainPage/ui/_components/sections/AltZone/AltZone.tsx b/frontend-next-migration/src/preparedPages/MainPage/ui/_components/sections/AltZone/AltZone.tsx
index 3df6d62b5..72fda6a8e 100644
--- a/frontend-next-migration/src/preparedPages/MainPage/ui/_components/sections/AltZone/AltZone.tsx
+++ b/frontend-next-migration/src/preparedPages/MainPage/ui/_components/sections/AltZone/AltZone.tsx
@@ -2,7 +2,7 @@
 import { useInView } from 'react-intersection-observer';
 import { Container } from '@/shared/ui/Container';
 import { classNames } from '@/shared/lib/classNames/classNames';
-import Image from 'next/image';
+import Image, { StaticImageData } from 'next/image';
 import cls from './AltZone.module.scss';
 import { AppExternalLinks } from '@/shared/appLinks/appExternalLinks';
 import instaIcon from '@/shared/assets/images/Insta2.svg';
@@ -22,7 +22,7 @@ export type Props = {
     };
     socialMediaLinks: string[];
     videoLink: string;
-    gameImg?: string;
+    gameImg?: StaticImageData;
 };
 
 const AltZone = (props: Props) => {
diff --git a/frontend-next-migration/src/preparedPages/MainPage/ui/_components/sections/ContactSection/ContactSection.tsx b/frontend-next-migration/src/preparedPages/MainPage/ui/_components/sections/ContactSection/ContactSection.tsx
index a27d4dcf4..eb04ec2b5 100644
--- a/frontend-next-migration/src/preparedPages/MainPage/ui/_components/sections/ContactSection/ContactSection.tsx
+++ b/frontend-next-migration/src/preparedPages/MainPage/ui/_components/sections/ContactSection/ContactSection.tsx
@@ -23,6 +23,7 @@ export const ContactSection = (props: Props) => {
                 <Image
                     src={ContactImg}
                     alt={'Side image with hero'}
+                    priority={true}
                     className={cls.sideImg}
                 />
                 <div className={cls.ContentWithNav}>
diff --git a/frontend-next-migration/src/preparedPages/MainPage/ui/_components/sections/PlayWithUs/PlayWithUs.tsx b/frontend-next-migration/src/preparedPages/MainPage/ui/_components/sections/PlayWithUs/PlayWithUs.tsx
index be938f310..c2884d59e 100644
--- a/frontend-next-migration/src/preparedPages/MainPage/ui/_components/sections/PlayWithUs/PlayWithUs.tsx
+++ b/frontend-next-migration/src/preparedPages/MainPage/ui/_components/sections/PlayWithUs/PlayWithUs.tsx
@@ -36,6 +36,7 @@ const PlayWithUs = (props: Props) => {
                         src={sideImg}
                         alt={'Side image with hero'}
                         className={cls.sideImg}
+                        priority={true}
                     />
                 </div>
                 <div className={cls.ContentWithNav}>
diff --git a/frontend-next-migration/src/preparedPages/MainPage/ui/_components/sections/ProjectDescription/ProjectDescription.tsx b/frontend-next-migration/src/preparedPages/MainPage/ui/_components/sections/ProjectDescription/ProjectDescription.tsx
index 7b91d0277..2b53b9dfa 100644
--- a/frontend-next-migration/src/preparedPages/MainPage/ui/_components/sections/ProjectDescription/ProjectDescription.tsx
+++ b/frontend-next-migration/src/preparedPages/MainPage/ui/_components/sections/ProjectDescription/ProjectDescription.tsx
@@ -36,6 +36,7 @@ export const ProjectDescription = (props: Props) => {
             <div className={cls.imgHolder}>
                 <Image
                     src={greenHaired}
+                    priority={true}
                     alt={'description hero'}
                     style={{ objectFit: 'cover' }}
                     className={classNames(cls.Image)}
diff --git a/frontend-next-migration/src/shared/ui/CustomForm/ui/CustomForm.tsx b/frontend-next-migration/src/shared/ui/CustomForm/ui/CustomForm.tsx
index fd24f2b33..eb552c0ed 100644
--- a/frontend-next-migration/src/shared/ui/CustomForm/ui/CustomForm.tsx
+++ b/frontend-next-migration/src/shared/ui/CustomForm/ui/CustomForm.tsx
@@ -10,6 +10,7 @@ import React, {
     InputHTMLAttributes,
     useState,
     useEffect,
+    useId,
 } from 'react';
 import { Button as CustomButton, ButtonTheme } from '@/shared/ui/Button/Button';
 import { classNames } from '@/shared/lib/classNames/classNames';
@@ -18,6 +19,16 @@ import { MultiSelect } from 'react-multi-select-component';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
 
+// Create a safe slug for use in id attributes
+function slugifyLabel(label?: string): string {
+    if (!label) return '';
+    return String(label)
+        .toLowerCase()
+        .trim()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-+|-+$/g, '');
+}
+
 /**
  * Header component for displaying a heading inside the form.
  *
@@ -88,7 +99,13 @@ function InputField({
     className = '',
     showPasswordToggle = false,
 }: InputFieldProps) {
-    const inputId = inputProps?.id || `input-${label}`;
+    const reactId = useId();
+    const slug = slugifyLabel(label);
+    const normalizedReactId = reactId
+        .toString()
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-');
+    const inputId = inputProps?.id || (slug ? `input-${slug}` : `input-${normalizedReactId}`);
     const [showPassword, setShowPassword] = useState(false);
 
     const isPasswordType = inputProps?.type === 'password';
@@ -151,7 +168,13 @@ type CheckboxProps = {
  * <Form.Checkbox label="I agree" error="You must agree" inputProps={{ required: true }} />
  */
 function Checkbox({ label, error, inputProps, className = '' }: CheckboxProps) {
-    const inputId = inputProps?.id || `checkbox-${label}`;
+    const reactId = useId();
+    const slug = slugifyLabel(label);
+    const normalizedReactId = reactId
+        .toString()
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-');
+    const inputId = inputProps?.id || (slug ? `checkbox-${slug}` : `checkbox-${normalizedReactId}`);
     return (
         <div className={classNames(cls.field, {}, [className])}>
             <label htmlFor={inputId}>
diff --git a/frontend-next-migration/src/shared/ui/v2/BarIndicator/ui/BarIndicator.tsx b/frontend-next-migration/src/shared/ui/v2/BarIndicator/ui/BarIndicator.tsx
index 521328cd8..d0c14ff31 100644
--- a/frontend-next-migration/src/shared/ui/v2/BarIndicator/ui/BarIndicator.tsx
+++ b/frontend-next-migration/src/shared/ui/v2/BarIndicator/ui/BarIndicator.tsx
@@ -60,39 +60,32 @@ interface BarIndicatorProps {
 const BarIndicator = ({ value, maxValue = 24, label, developmentThreshold }: BarIndicatorProps) => {
     const { t } = useClientTranslation('barIndicator');
     const base: number[] = Array(24).fill(0);
-    let icon;
 
-    if (typeof value === 'string') {
-        maxValue = 0;
-    }
+    // Map label to icon with a simple lookup to keep complexity low
+    const ICONS: Record<string, any> = {
+        hp,
+        resistance,
+        size,
+        speed,
+        strike,
+    };
+    const normalizedLabel = label?.toLowerCase();
+    const icon = normalizedLabel ? ICONS[normalizedLabel] : undefined;
+
+    // Treat string values as "no bars enabled"
+    const isStringValue = typeof value === 'string';
+    const maxEnabled = isStringValue ? 0 : maxValue;
 
-    if (label) {
-        switch (label.toLowerCase()) {
-            case 'hp':
-                icon = hp;
-                break;
-            case 'resistance':
-                icon = resistance;
-                break;
-            case 'size':
-                icon = size;
-                break;
-            case 'speed':
-                icon = speed;
-                break;
-            case 'strike':
-                icon = strike;
-        }
-    }
     const Indicator = (
         <div className={cls.barIndicatorContainer}>
             {base.map((_, index) => {
-                let variantClass = cls.barWhite;
-                if (typeof value === 'number' && index < value) {
-                    variantClass = cls.barPrimary;
-                } else if (index < maxValue) {
-                    variantClass = cls.barBlack;
-                }
+                const isActive = typeof value === 'number' && index < value;
+                const isEnabled = index < (maxEnabled ?? 0);
+                const variantClass = isActive
+                    ? cls.barPrimary
+                    : isEnabled
+                      ? cls.barBlack
+                      : cls.barWhite;
                 return (
                     <div
                         key={index}
diff --git a/frontend-next-migration/src/shared/ui/v2/DescriptionCard/ui/DescriptionCard.tsx b/frontend-next-migration/src/shared/ui/v2/DescriptionCard/ui/DescriptionCard.tsx
index b6fbcd2e0..aa7a54973 100644
--- a/frontend-next-migration/src/shared/ui/v2/DescriptionCard/ui/DescriptionCard.tsx
+++ b/frontend-next-migration/src/shared/ui/v2/DescriptionCard/ui/DescriptionCard.tsx
@@ -213,8 +213,7 @@ const DescriptionCardImage = memo((props: DescriptionCardImageProps) => {
                 <Image
                     src={src}
                     alt={alt}
-                    objectFit="contain"
-                    objectPosition="center"
+                    style={{ objectFit: 'contain', objectPosition: 'center' }}
                     quality={100}
                     height={height}
                 />
@@ -226,6 +225,7 @@ const DescriptionCardImage = memo((props: DescriptionCardImageProps) => {
                 className={classNames(cls.Cover, {}, [className])}
                 src={src}
                 alt={alt}
+                priority={true}
                 fill
                 sizes="100%"
             />
diff --git a/frontend-next-migration/src/shared/ui/v2/Footer/ui/FooterDesktop/RandomCharacter.tsx b/frontend-next-migration/src/shared/ui/v2/Footer/ui/FooterDesktop/RandomCharacter.tsx
index ddfa108ae..311702b1a 100644
--- a/frontend-next-migration/src/shared/ui/v2/Footer/ui/FooterDesktop/RandomCharacter.tsx
+++ b/frontend-next-migration/src/shared/ui/v2/Footer/ui/FooterDesktop/RandomCharacter.tsx
@@ -35,12 +35,10 @@ export const RandomCharacter = ({ size }: RandomCharacterProps) => {
             width={numericSize}
             height={numericSize}
             style={{
-                width: imageSize,
                 height: imageSize,
+                width: 'auto',
                 objectFit: 'contain',
             }}
-            priority={false}
-            loading="lazy"
             placeholder="empty"
             onError={(error) => {
                 error.currentTarget.src = HannuHodari.src;
diff --git a/frontend-next-migration/src/shared/ui/v2/FurniturePopup/ui/FurniturePopup.module.scss b/frontend-next-migration/src/shared/ui/v2/FurniturePopup/ui/FurniturePopup.module.scss
index 55fc76d08..69df2652f 100644
--- a/frontend-next-migration/src/shared/ui/v2/FurniturePopup/ui/FurniturePopup.module.scss
+++ b/frontend-next-migration/src/shared/ui/v2/FurniturePopup/ui/FurniturePopup.module.scss
@@ -92,9 +92,8 @@
 
 .PopupTitle {
     color: var(--primary-color);
-    font-size: 48px;
+    font: var(--font-sw-xxxl);
     margin: 0;
-    font-family: var(--font-family-title);
     font-weight: 100;
 }
 
@@ -156,3 +155,6 @@
         object-fit: contain;
     }
 }
+.Image {
+    width: auto;
+}
diff --git a/frontend-next-migration/src/shared/ui/v2/FurniturePopup/ui/FurniturePopup.tsx b/frontend-next-migration/src/shared/ui/v2/FurniturePopup/ui/FurniturePopup.tsx
index 2fcd656bd..0235880a7 100644
--- a/frontend-next-migration/src/shared/ui/v2/FurniturePopup/ui/FurniturePopup.tsx
+++ b/frontend-next-migration/src/shared/ui/v2/FurniturePopup/ui/FurniturePopup.tsx
@@ -110,11 +110,12 @@ export const FurniturePopup: React.FC<FurniturePopupProps> = ({
                         </div>
                         <div className={cls.ImageColumn}>
                             <Image
+                                className={cls.Image}
                                 src={item.cover}
                                 alt={t(`${setPath}.items.${item.path}.name`)}
                                 width={300}
                                 height={300}
-                                objectFit="contain"
+                                style={{ objectFit: 'contain' }}
                             />
                         </div>
                     </div>
diff --git a/frontend-next-migration/src/shared/ui/v2/MobileCard/ui/MobileCard.tsx b/frontend-next-migration/src/shared/ui/v2/MobileCard/ui/MobileCard.tsx
index cda10b8c1..6bba4ab1c 100644
--- a/frontend-next-migration/src/shared/ui/v2/MobileCard/ui/MobileCard.tsx
+++ b/frontend-next-migration/src/shared/ui/v2/MobileCard/ui/MobileCard.tsx
@@ -201,6 +201,8 @@ const MobileCardImageSection = memo(
                         src={src}
                         alt={alt}
                         fill
+                        priority={true}
+                        sizes="(min-width: 512px) 50vw, 100vw"
                     />
                 ) : (
                     <Image
diff --git a/frontend-next-migration/src/shared/ui/v2/ModularCard/ui/ModularCard.tsx b/frontend-next-migration/src/shared/ui/v2/ModularCard/ui/ModularCard.tsx
index 22d9bbea2..1dfa414e7 100644
--- a/frontend-next-migration/src/shared/ui/v2/ModularCard/ui/ModularCard.tsx
+++ b/frontend-next-migration/src/shared/ui/v2/ModularCard/ui/ModularCard.tsx
@@ -211,8 +211,7 @@ const ModularCardImage = memo((props: ModularCardImageProps) => {
             className={classNames(cls.ModularCardImage, {}, [className])}
             src={src}
             alt={alt}
-            width={width}
-            height={height}
+            priority={true}
         />
     );
 });