diff --git a/README.es-ES.md b/README.es-ES.md
index d2c86fc..f114ac6 100644
--- a/README.es-ES.md
+++ b/README.es-ES.md
@@ -33,7 +33,7 @@
 </p>
 
 <p align="center">
-  <img src="assets/hero.jpg" alt="Understand Anything — Convierte cualquier código fuente en un grafo de conocimiento interactivo" width="800" />
+  <img src="assets/hero.png" alt="Understand Anything — Convierte cualquier código fuente en un grafo de conocimiento interactivo" width="800" />
 </p>
 
 ---
diff --git a/README.ja-JP.md b/README.ja-JP.md
index c84bc48..5e44a6a 100644
--- a/README.ja-JP.md
+++ b/README.ja-JP.md
@@ -34,7 +34,7 @@
 </p>
 
 <p align="center">
-  <img src="assets/hero.jpg" alt="Understand Anything — あらゆるコードベースをインタラクティブなナレッジグラフに変換" width="800" />
+  <img src="assets/hero.png" alt="Understand Anything — あらゆるコードベースをインタラクティブなナレッジグラフに変換" width="800" />
 </p>
 
 ---
diff --git a/README.ko-KR.md b/README.ko-KR.md
index 6d7f610..0f239bd 100644
--- a/README.ko-KR.md
+++ b/README.ko-KR.md
@@ -33,7 +33,7 @@
 </p>
 
 <p align="center">
-  <img src="assets/hero.jpg" alt="Understand Anything — 모든 코드베이스를 인터랙티브 지식 그래프로 변환" width="800" />
+  <img src="assets/hero.png" alt="Understand Anything — 모든 코드베이스를 인터랙티브 지식 그래프로 변환" width="800" />
 </p>
 
 ---
diff --git a/README.md b/README.md
index d66d7db..2e83ee3 100644
--- a/README.md
+++ b/README.md
@@ -34,7 +34,7 @@
 </p>
 
 <p align="center">
-  <img src="assets/hero.jpg" alt="Understand Anything — Turn any codebase into an interactive knowledge graph" width="800" />
+  <img src="assets/hero.png" alt="Understand Anything — Turn any codebase into an interactive knowledge graph" width="800" />
 </p>
 
 ---
diff --git a/README.tr-TR.md b/README.tr-TR.md
index 222e456..3a41c50 100644
--- a/README.tr-TR.md
+++ b/README.tr-TR.md
@@ -34,7 +34,7 @@
 </p>
 
 <p align="center">
-  <img src="assets/hero.jpg" alt="Understand Anything — Herhangi bir kod tabanını interaktif bir bilgi grafiğine dönüştür" width="800" />
+  <img src="assets/hero.png" alt="Understand Anything — Herhangi bir kod tabanını interaktif bir bilgi grafiğine dönüştür" width="800" />
 </p>
 
 ---
diff --git a/README.zh-CN.md b/README.zh-CN.md
index a6f6783..3305b6e 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -33,7 +33,7 @@
 </p>
 
 <p align="center">
-  <img src="assets/hero.jpg" alt="Understand Anything — 将任何代码库转换为交互式知识图谱" width="800" />
+  <img src="assets/hero.png" alt="Understand Anything — 将任何代码库转换为交互式知识图谱" width="800" />
 </p>
 
 ---
diff --git a/README.zh-TW.md b/README.zh-TW.md
index 2e18c1f..9a1df97 100644
--- a/README.zh-TW.md
+++ b/README.zh-TW.md
@@ -33,7 +33,7 @@
 </p>
 
 <p align="center">
-  <img src="assets/hero.jpg" alt="Understand Anything — 將任何程式碼庫轉換為互動式知識圖譜" width="800" />
+  <img src="assets/hero.png" alt="Understand Anything — 將任何程式碼庫轉換為互動式知識圖譜" width="800" />
 </p>
 
 ---
diff --git a/assets/hero.jpg b/assets/hero.jpg
deleted file mode 100644
index 25e660e..0000000
Binary files a/assets/hero.jpg and /dev/null differ
diff --git a/assets/hero.png b/assets/hero.png
new file mode 100644
index 0000000..b2995b7
Binary files /dev/null and b/assets/hero.png differ
diff --git a/homepage/src/components/Hero.astro b/homepage/src/components/Hero.astro
index 63885a6..7fc3cb2 100644
--- a/homepage/src/components/Hero.astro
+++ b/homepage/src/components/Hero.astro
@@ -4,7 +4,7 @@ const githubUrl = 'https://github.com/Lum1104/Understand-Anything';
 
 <section class="hero">
   <div class="hero-bg">
-    <img src="/images/hero.jpg" alt="" class="hero-bg-img" loading="eager" />
+    <img src="/images/hero.png" alt="" class="hero-bg-img" loading="eager" />
     <div class="hero-overlay"></div>
   </div>