diff --git a/.storybook/main.ts b/.storybook/main.ts
index cfa9176163a..7fc65a2c201 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -77,5 +77,8 @@ const config: StorybookConfig = {
 
     reactDocgen: "react-docgen-typescript",
   },
+  features: {
+    experimentalRSC: true,
+  },
 }
 export default config
diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
index 26dfd6cf9cd..816818b7c5e 100644
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@@ -447,7 +447,7 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
           </Link>
         </p>
       </BannerNotification>
-      <HomeHero heroImg={Hero} className="w-full" />
+      <HomeHero heroImg={Hero} className="w-full" locale={locale} />
       <div className="w-full space-y-32 px-4 md:mx-6 lg:space-y-48">
         <div className="my-20 grid w-full grid-cols-2 gap-x-4 gap-y-8 md:grid-cols-4 md:gap-x-10">
           {subHeroCTAs.map(
diff --git a/src/components/Hero/HomeHero/HomeHero.stories.tsx b/src/components/Hero/HomeHero/HomeHero.stories.tsx
deleted file mode 100644
index 4019017e809..00000000000
--- a/src/components/Hero/HomeHero/HomeHero.stories.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react"
-
-import { langViewportModes } from "@/storybook/modes"
-
-import HomeHeroComponent from "."
-
-import homeHeroImg from "@/public/images/home/hero.png"
-
-const meta = {
-  title: "Organisms / Layouts / Hero",
-  component: HomeHeroComponent,
-  parameters: {
-    layout: "none",
-    chromatic: {
-      modes: {
-        ...langViewportModes,
-      },
-    },
-  },
-  argTypes: {
-    heroImg: {
-      table: {
-        disable: true,
-      },
-    },
-  },
-} satisfies Meta<typeof HomeHeroComponent>
-
-export default meta
-
-export const HomeHero: StoryObj<typeof meta> = {
-  args: {
-    heroImg: homeHeroImg,
-  },
-}
diff --git a/src/components/Hero/HomeHero/index.tsx b/src/components/Hero/HomeHero/index.tsx
index d84354946f1..8d41eb1d20a 100644
--- a/src/components/Hero/HomeHero/index.tsx
+++ b/src/components/Hero/HomeHero/index.tsx
@@ -1,21 +1,24 @@
-import type { ClassNameProp, CommonHeroProps } from "@/lib/types"
+import { getTranslations } from "next-intl/server"
+
+import type { ClassNameProp, CommonHeroProps, Lang } from "@/lib/types"
 
 import LanguageMorpher from "@/components/Homepage/LanguageMorpher"
 import { Image } from "@/components/Image"
 
-import useTranslation from "@/hooks/useTranslation"
-
-export type HomeHeroProps = Pick<CommonHeroProps, "heroImg"> & ClassNameProp
+export type HomeHeroProps = Pick<CommonHeroProps, "heroImg"> &
+  ClassNameProp & {
+    locale: Lang
+  }
 
-const HomeHero = ({ heroImg, className }: HomeHeroProps) => {
-  const { t } = useTranslation("page-index")
+const HomeHero = async ({ heroImg, className, locale }: HomeHeroProps) => {
+  const t = await getTranslations({ locale, namespace: "page-index" })
 
   return (
     <div className={className}>
       <div className="h-[240px] md:h-[380px] lg:h-[480px]">
         <Image
           src={heroImg}
-          alt={t("page-index:page-index-hero-image-alt")}
+          alt={t("page-index-hero-image-alt")}
           // TODO: adjust value when the old theme breakpoints are removed (src/theme.ts)
           sizes="(max-width: 1504px) 100vw, 1504px"
           className="h-full w-full object-cover"
@@ -25,9 +28,9 @@ const HomeHero = ({ heroImg, className }: HomeHeroProps) => {
       <div className="flex flex-col items-center border-t-[3px] border-primary-low-contrast px-4 py-10 text-center">
         <LanguageMorpher />
         <div className="flex flex-col items-center gap-y-5 lg:max-w-2xl">
-          <h1 className="font-black">{t("page-index:page-index-title")}</h1>
+          <h1 className="font-black">{t("page-index-title")}</h1>
           <p className="max-w-96 text-md text-body-medium lg:text-lg">
-            {t("page-index:page-index-description")}
+            {t("page-index-description")}
           </p>
         </div>
       </div>