diff --git a/src/components/TranslationChartImage/TranslationChartImage.stories.tsx b/src/components/TranslationChartImage/TranslationChartImage.stories.tsx
new file mode 100644
index 00000000000..f61a7e2f74b
--- /dev/null
+++ b/src/components/TranslationChartImage/TranslationChartImage.stories.tsx
@@ -0,0 +1,24 @@
+import { Meta, StoryObj } from "@storybook/react"
+
+import TranslationChartImageComponent from "."
+
+const meta = {
+  title: "Atoms / Media & Icons / TranslationChartImage",
+  component: TranslationChartImageComponent,
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="max-w-3xl">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof TranslationChartImageComponent>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const TranslationChartImage: Story = {}
diff --git a/src/components/TranslationChartImage.tsx b/src/components/TranslationChartImage/index.tsx
similarity index 75%
rename from src/components/TranslationChartImage.tsx
rename to src/components/TranslationChartImage/index.tsx
index 51bf3acc6dc..f819899b6b8 100644
--- a/src/components/TranslationChartImage.tsx
+++ b/src/components/TranslationChartImage/index.tsx
@@ -1,6 +1,6 @@
 import { useColorModeValue } from "@chakra-ui/react"
 
-import { Image } from "@/components/Image"
+import { TwImage } from "@/components/Image"
 
 import pageviewsDark from "@/public/images/translation-program/pageviews-dark.png"
 import pageviewsLight from "@/public/images/translation-program/pageviews-light.png"
@@ -9,13 +9,10 @@ const TranslationChartImage = () => {
   const ethImage = useColorModeValue(pageviewsLight, pageviewsDark)
 
   return (
-    <Image
+    <TwImage
       src={ethImage}
       alt=""
-      style={{ objectFit: "contain" }}
-      minW="263px"
-      h={500}
-      w="auto"
+      className="h-[500px] w-auto min-w-[263px] object-contain"
     />
   )
 }