diff --git a/src/features/common/components/hero/hero.component.tsx b/src/features/common/components/hero/hero.component.tsx
index 2f709d8c..9e09259c 100644
--- a/src/features/common/components/hero/hero.component.tsx
+++ b/src/features/common/components/hero/hero.component.tsx
@@ -5,13 +5,20 @@ import { BoxComponent } from "@/features/common/components/box/box.component";
 import styles from "./hero.module.scss";
 import { HomeDictionaryModel } from "@/features/localization/models/home-dictionary.model";
 import Link from "next/link";
+import { clsx } from "clsx";
+import { getLocalizedSecondaryFont } from "@/libs/theme/fonts";
 
 interface HeroComponentProps {
   languageCode: string;
+  title: string;
   dictionary: HomeDictionaryModel["info"];
 }
 
-export const HeroComponent: React.FC<HeroComponentProps> = ({ dictionary }) => {
+export const HeroComponent: React.FC<HeroComponentProps> = ({
+  languageCode,
+  title,
+  dictionary,
+}) => {
   const description = dictionary.description.split(
     dictionary.resources.spec.name
   );
@@ -23,6 +30,11 @@ export const HeroComponent: React.FC<HeroComponentProps> = ({ dictionary }) => {
       wrapperClassName={styles.wrapper}
     >
       <div className={styles.hero}>
+        <h1
+          className={clsx(styles.title, getLocalizedSecondaryFont(languageCode))}
+        >
+          {title}
+        </h1>
         <p className={styles.modal}>
           <span className={styles.modal__text}>
             {
diff --git a/src/features/common/components/hero/hero.module.scss b/src/features/common/components/hero/hero.module.scss
index 69476e93..dfd90c30 100644
--- a/src/features/common/components/hero/hero.module.scss
+++ b/src/features/common/components/hero/hero.module.scss
@@ -22,7 +22,9 @@
 .hero {
   z-index: 1;
   display: flex;
+  flex-direction: column;
   justify-content: center;
+  align-items: center;
   width: 100%;
   padding: 1.25rem 0;
   text-align: center;
@@ -32,6 +34,26 @@
   }
 }
 
+.title {
+  width: 100%;
+  max-width: 42rem;
+  margin: 0;
+  color: var(--color_fg_bold);
+  font-size: 2rem;
+  line-height: 1.15;
+  font-weight: 500;
+  letter-spacing: -0.8px;
+  text-wrap-style: balance;
+
+  @media #{$breakpoint-dimension-xs} {
+    font-size: 2.5rem;
+  }
+
+  @media #{$breakpoint-dimension-sm} {
+    font-size: 3rem;
+  }
+}
+
 .modal {
   max-width: 608px;
   padding: 2.5rem 0;
diff --git a/src/features/home/components/home-page/home-page.component.tsx b/src/features/home/components/home-page/home-page.component.tsx
index 6ec77ab5..1b088239 100644
--- a/src/features/home/components/home-page/home-page.component.tsx
+++ b/src/features/home/components/home-page/home-page.component.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import styles from "./home-page.module.scss"
 import { HeroComponent } from "@/features/common/components/hero/hero.component";
 import {
   getHomeDictionary,
@@ -126,9 +125,9 @@ export const HomePageComponent: React.FC<HomePageComponentProps> = ({
           },
         ]}
       />
-      <h1 className={styles.visually_hidden}>{homeDictionary.metadata.title}</h1>
       <HeroComponent
         languageCode={languageCode}
+        title={homeDictionary.hero.title}
         dictionary={homeDictionary.info}
       />
       <DebuggerWidgetComponent
diff --git a/src/features/home/components/home-page/home-page.module.scss b/src/features/home/components/home-page/home-page.module.scss
deleted file mode 100644
index 21eb3d36..00000000
--- a/src/features/home/components/home-page/home-page.module.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.visually_hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border: 0
-}
\ No newline at end of file