diff --git a/public/blog/semantic-release-hero.png b/public/images/blog/automate-release-with-semantic-release/semantic-release-hero.png
similarity index 100%
rename from public/blog/semantic-release-hero.png
rename to public/images/blog/automate-release-with-semantic-release/semantic-release-hero.png
diff --git a/public/blog/digital-warfarin-management.png b/public/images/blog/awesome-warfarin-open-source/digital-warfarin-management.png
similarity index 100%
rename from public/blog/digital-warfarin-management.png
rename to public/images/blog/awesome-warfarin-open-source/digital-warfarin-management.png
diff --git a/public/blog/confident-typing-at-work-2.png b/public/images/blog/benefits-of-touch-typing/confident-typing-at-work-2.png
similarity index 100%
rename from public/blog/confident-typing-at-work-2.png
rename to public/images/blog/benefits-of-touch-typing/confident-typing-at-work-2.png
diff --git a/public/blog/confident-typing-at-work.png b/public/images/blog/benefits-of-touch-typing/confident-typing-at-work.png
similarity index 100%
rename from public/blog/confident-typing-at-work.png
rename to public/images/blog/benefits-of-touch-typing/confident-typing-at-work.png
diff --git a/public/blog/typing-on-keyboard-hero.png b/public/images/blog/benefits-of-touch-typing/typing-on-keyboard-hero.png
similarity index 100%
rename from public/blog/typing-on-keyboard-hero.png
rename to public/images/blog/benefits-of-touch-typing/typing-on-keyboard-hero.png
diff --git a/public/blog/12-git-commands-cheatsheet.jpeg b/public/images/blog/essential-git-commands-guide/12-git-commands-cheatsheet.jpeg
similarity index 100%
rename from public/blog/12-git-commands-cheatsheet.jpeg
rename to public/images/blog/essential-git-commands-guide/12-git-commands-cheatsheet.jpeg
diff --git a/public/blog/12-git-commands-cheatsheet.png b/public/images/blog/essential-git-commands-guide/12-git-commands-cheatsheet.png
similarity index 100%
rename from public/blog/12-git-commands-cheatsheet.png
rename to public/images/blog/essential-git-commands-guide/12-git-commands-cheatsheet.png
diff --git a/public/blog/rust-variables-hero.png b/public/images/blog/rust-variables-and-mutability/rust-variables-hero.png
similarity index 100%
rename from public/blog/rust-variables-hero.png
rename to public/images/blog/rust-variables-and-mutability/rust-variables-hero.png
diff --git a/public/blog/eslint-antfu-setup.png b/public/images/blog/vue-standard-protocol-antfu/eslint-antfu-setup.png
similarity index 100%
rename from public/blog/eslint-antfu-setup.png
rename to public/images/blog/vue-standard-protocol-antfu/eslint-antfu-setup.png
diff --git a/public/blog-placeholder-1.png b/public/images/common/blog-placeholder-1.png
similarity index 100%
rename from public/blog-placeholder-1.png
rename to public/images/common/blog-placeholder-1.png
diff --git a/public/blog-placeholder-2.png b/public/images/common/blog-placeholder-2.png
similarity index 100%
rename from public/blog-placeholder-2.png
rename to public/images/common/blog-placeholder-2.png
diff --git a/public/blog-placeholder-3.png b/public/images/common/blog-placeholder-3.png
similarity index 100%
rename from public/blog-placeholder-3.png
rename to public/images/common/blog-placeholder-3.png
diff --git a/public/blog-placeholder-4.png b/public/images/common/blog-placeholder-4.png
similarity index 100%
rename from public/blog-placeholder-4.png
rename to public/images/common/blog-placeholder-4.png
diff --git a/public/blog-placeholder-5.png b/public/images/common/blog-placeholder-5.png
similarity index 100%
rename from public/blog-placeholder-5.png
rename to public/images/common/blog-placeholder-5.png
diff --git a/public/blog-placeholder-6.png b/public/images/common/blog-placeholder-6.png
similarity index 100%
rename from public/blog-placeholder-6.png
rename to public/images/common/blog-placeholder-6.png
diff --git a/public/blog-placeholder-7.png b/public/images/common/blog-placeholder-7.png
similarity index 100%
rename from public/blog-placeholder-7.png
rename to public/images/common/blog-placeholder-7.png
diff --git a/public/blog-placeholder-8.png b/public/images/common/blog-placeholder-8.png
similarity index 100%
rename from public/blog-placeholder-8.png
rename to public/images/common/blog-placeholder-8.png
diff --git a/public/blog-placeholder-python-course.png b/public/images/common/blog-placeholder-python-course.png
similarity index 100%
rename from public/blog-placeholder-python-course.png
rename to public/images/common/blog-placeholder-python-course.png
diff --git a/public/profile-placeholder.jpg b/public/images/common/profile-placeholder.jpg
similarity index 100%
rename from public/profile-placeholder.jpg
rename to public/images/common/profile-placeholder.jpg
diff --git a/src/content/blog/automate-release-with-semantic-release.mdx b/src/content/blog/automate-release-with-semantic-release/index.mdx
similarity index 99%
rename from src/content/blog/automate-release-with-semantic-release.mdx
rename to src/content/blog/automate-release-with-semantic-release/index.mdx
index dc1e3cb..a0d650b 100644
--- a/src/content/blog/automate-release-with-semantic-release.mdx
+++ b/src/content/blog/automate-release-with-semantic-release/index.mdx
@@ -2,7 +2,7 @@
 title: 'เลิกทำ Manual Release เปลี่ยนมาใช้ Semantic Release กันเถอะ'
 description: 'คู่มือการตั้งค่าระบบ Automated Release บน GitHub Actions เปลี่ยนการจัดการเวอร์ชัน เขียน Changelog และติด Tag ที่ยุ่งยากให้เป็นเรื่องอัตโนมัติด้วย Semantic Release'
 pubDate: '2025-12-24'
-heroImage: '/blog/semantic-release-hero.png'
+heroImage: '/images/blog/automate-release-with-semantic-release/semantic-release-hero.png'
 category: 'DevOps'
 tags: ['CI/CD', 'GitHub Actions', 'Automation', 'Semantic Release', 'Workflow']
 featured: true
diff --git a/src/content/blog/awesome-warfarin-open-source.mdx b/src/content/blog/awesome-warfarin-open-source/index.mdx
similarity index 99%
rename from src/content/blog/awesome-warfarin-open-source.mdx
rename to src/content/blog/awesome-warfarin-open-source/index.mdx
index d9996e1..d34de9f 100644
--- a/src/content/blog/awesome-warfarin-open-source.mdx
+++ b/src/content/blog/awesome-warfarin-open-source/index.mdx
@@ -2,7 +2,7 @@
 title: 'เมื่อเภสัชกรเขียนโค้ด: สำรวจโปรเจกต์โอเพนซอร์สจัดการยา Warfarin'
 description: 'เจาะลึกโลก Health Tech ผ่าน Awesome Warfarin List ที่รวบรวมโปรเจกต์โอเพนซอร์ส ตั้งแต่เว็บแอปคำนวณขนาดยา ไปจนถึงโมเดล Machine Learning เพื่อการจ่ายยาที่แม่นยำ'
 pubDate: '2025-11-12'
-heroImage: '/blog/digital-warfarin-management.png'
+heroImage: '/images/blog/awesome-warfarin-open-source/digital-warfarin-management.png'
 category: 'Web Development'
 tags: ['Warfarin', 'Health Tech', 'Open Source', 'Pharmacist', 'Programming']
 featured: true
diff --git a/src/content/blog/benefits-of-touch-typing.mdx b/src/content/blog/benefits-of-touch-typing/index.mdx
similarity index 99%
rename from src/content/blog/benefits-of-touch-typing.mdx
rename to src/content/blog/benefits-of-touch-typing/index.mdx
index 3cedd31..3d3d70f 100644
--- a/src/content/blog/benefits-of-touch-typing.mdx
+++ b/src/content/blog/benefits-of-touch-typing/index.mdx
@@ -2,7 +2,7 @@
 title: '7 ประโยชน์ของการพิมพ์สัมผัส (Touch Typing)'
 description: 'การพิมพ์สัมผัสเป็นมากกว่าแค่ความเร็ว มันช่วยเพิ่มสมาธิ (Flow State) เพิ่มประสิทธิภาพการทำงานกับ AI และสร้างความมั่นใจได้อีกด้วย'
 pubDate: '2025-11-04'
-heroImage: '/blog/typing-on-keyboard-hero.png'
+heroImage: '/images/blog/benefits-of-touch-typing/typing-on-keyboard-hero.png'
 category: 'Career & Soft Skills'
 tags: ['Productivity', 'Skill Development', 'Touch Typing', 'Career']
 featured: true
@@ -47,7 +47,7 @@ featured: true
 </FeatureGrid>
 
 <Image
-  src="/blog/confident-typing-at-work.png"
+  src="/images/blog/benefits-of-touch-typing/confident-typing-at-work.png"
   alt="ภาพผู้หญิงกำลังยิ้มและพิมพ์คีย์บอร์ดอย่างมั่นใจระหว่างการประชุมออนไลน์ โดยมีเพื่อนร่วมงานปรากฏบนหน้าจอ"
   caption="การพิมพ์สัมผัสช่วยสร้างความมั่นใจในการทำงานร่วมกับผู้อื่นได้อย่างมืออาชีพ"
 />
@@ -88,7 +88,7 @@ featured: true
 การที่สามารถพิมพ์ได้อย่างราบรื่นต่อหน้าคนอื่นนั้นเป็นพลังอย่างหนึ่ง คุณสามารถจดโน้ต ร่างข้อความ หรือเขียนโค้ดสดๆ ได้โดยไม่สะดุด ความมั่นใจนั้นยังส่งผลต่อไปยังการนำเสนอ การทำ Pair Programming และทุกสถานการณ์ที่คนอื่นสามารถมองเห็นหน้าจอของคุณได้
 
 <Image
-  src="/blog/confident-typing-at-work-2.png"
+  src="/images/blog/benefits-of-touch-typing/confident-typing-at-work-2.png"
   alt="ภาพที่แสดงถึงความมั่นใจ อาจจะเป็นคนกำลังยิ้มขณะนำเสนองานผ่านจอคอมพิวเตอร์ หรือกำลังทำ Pair Programming อย่างมั่นใจ"
   caption="การพิมพ์สัมผัสช่วยเขียนโค้ดสดๆ ได้โดยไม่สะดุด"
 />
diff --git a/src/content/blog/essential-git-commands-guide.mdx b/src/content/blog/essential-git-commands-guide/index.mdx
similarity index 99%
rename from src/content/blog/essential-git-commands-guide.mdx
rename to src/content/blog/essential-git-commands-guide/index.mdx
index 45bb137..ce3fa1b 100644
--- a/src/content/blog/essential-git-commands-guide.mdx
+++ b/src/content/blog/essential-git-commands-guide/index.mdx
@@ -2,7 +2,7 @@
 title: '12 คำสั่ง Git ที่นักพัฒนาทุกคนต้องรู้'
 description: 'เจาะลึก 12 คำสั่ง Git ที่สำคัญ ตั้งแต่ git init, commit, push ไปจนถึง pull, merge, reset พร้อมตัวอย่างที่นำไปใช้ได้จริง'
 pubDate: '2025-11-06'
-heroImage: '/blog/12-git-commands-cheatsheet.png'
+heroImage: '/images/blog/essential-git-commands-guide/12-git-commands-cheatsheet.png'
 category: 'Version Control'
 tags: ['Git', 'Best Practice', 'DevOps', 'Beginner', 'Guide']
 featured: true
@@ -13,7 +13,7 @@ Git คือหัวใจของการพัฒนาซอฟต์แ
 บทความนี้คือคู่มือที่จะพาคุณเจาะลึก 12 คำสั่ง Git ที่สำคัญที่สุด ซึ่งเป็นเครื่องมือที่คุณจะได้ใช้ทุกวัน โดยอ้างอิงและขยายความจาก Cheat Sheet ที่ยอดเยี่ยมของ [Sysxplore](https://sysxplore.com/)
 
 <Image
-  src="/blog/12-git-commands-cheatsheet.jpeg"
+  src="/images/blog/essential-git-commands-guide/12-git-commands-cheatsheet.jpeg"
   alt="Cheat Sheet สรุป 12 คำสั่ง Git ที่สำคัญ"
   caption="ภาพรวม 12 คำสั่ง Git พื้นฐานที่เราจะมาเจาะลึกกันในบทความนี้"
 />
diff --git a/src/content/blog/frontend-developer-roadmap-part-1.mdx b/src/content/blog/frontend-developer-roadmap-part-1/index.mdx
similarity index 99%
rename from src/content/blog/frontend-developer-roadmap-part-1.mdx
rename to src/content/blog/frontend-developer-roadmap-part-1/index.mdx
index 139923f..83ed9fc 100644
--- a/src/content/blog/frontend-developer-roadmap-part-1.mdx
+++ b/src/content/blog/frontend-developer-roadmap-part-1/index.mdx
@@ -2,7 +2,7 @@
 title: 'Frontend Developer Roadmap (Part 1): React.js'
 description: 'เจาะลึก React.js อย่างละเอียด: ตั้งแต่พื้นฐาน จนถึง Hooks, Ecosystem, และการใช้งานจริง'
 pubDate: '2025-08-23'
-heroImage: '/blog-placeholder-1.png'
+heroImage: '/images/common/blog-placeholder-1.png'
 category: 'Frontend Frameworks' 
 tags: ['React.js', 'JavaScript', 'Web Development'] 
 featured: false
diff --git a/src/content/blog/frontend-developer-roadmap-part-2.mdx b/src/content/blog/frontend-developer-roadmap-part-2/index.mdx
similarity index 99%
rename from src/content/blog/frontend-developer-roadmap-part-2.mdx
rename to src/content/blog/frontend-developer-roadmap-part-2/index.mdx
index 32cb8f7..bf95ca0 100644
--- a/src/content/blog/frontend-developer-roadmap-part-2.mdx
+++ b/src/content/blog/frontend-developer-roadmap-part-2/index.mdx
@@ -2,7 +2,7 @@
 title: 'Frontend Developer Roadmap (Part 2): Vue.js'
 description: 'เจาะลึก Vue.js อย่างละเอียด: ตั้งแต่พื้นฐาน จนถึง Composition API, Reactivity, และการใช้งานจริง'
 pubDate: '2025-08-25'
-heroImage: '/blog-placeholder-2.png'
+heroImage: '/images/common/blog-placeholder-2.png'
 category: 'Frontend Frameworks' 
 tags: ['Vue.js', 'JavaScript', 'Web Development'] 
 featured: false
diff --git a/src/content/blog/git-commit-messages.mdx b/src/content/blog/git-commit-messages/index.mdx
similarity index 99%
rename from src/content/blog/git-commit-messages.mdx
rename to src/content/blog/git-commit-messages/index.mdx
index 00199eb..3baa666 100644
--- a/src/content/blog/git-commit-messages.mdx
+++ b/src/content/blog/git-commit-messages/index.mdx
@@ -2,7 +2,7 @@
 title: คู่มือการเขียน Git Commit Message อย่างมืออาชีพ
 description: เรียนรู้วิธีการเขียนข้อความ Commit ที่ดีตั้งแต่พื้นฐานจนถึงระดับมืออาชีพ เพื่อการสื่อสารที่มีประสิทธิภาพในทีมพัฒนา
 pubDate: 2025-09-16
-heroImage: '/blog-placeholder-4.png'
+heroImage: '/images/common/blog-placeholder-4.png'
 category: 'Version Control' 
 tags: ['Git', 'Best Practice', 'DevOps'] 
 featured: true 
diff --git a/src/content/blog/google-app-script-drug-search-app.mdx b/src/content/blog/google-app-script-drug-search-app/index.mdx
similarity index 99%
rename from src/content/blog/google-app-script-drug-search-app.mdx
rename to src/content/blog/google-app-script-drug-search-app/index.mdx
index fcc1449..40543e5 100644
--- a/src/content/blog/google-app-script-drug-search-app.mdx
+++ b/src/content/blog/google-app-script-drug-search-app/index.mdx
@@ -2,7 +2,7 @@
 title: "สร้างระบบสืบค้นบัญชียาของโรงพยาบาล ด้วย Google Sheets และ Google Apps Script"
 description: "คู่มือในการสร้างเว็บแอปค้นหาข้อมูลบัญชียาของโรงพยาบาลแบบเรียลไทม์"
 pubDate: "2025-10-28"
-heroImage: "/blog-placeholder-8.png"
+heroImage: "/images/common/blog-placeholder-8.png"
 category: "Google Apps Script"
 tags:
   [
diff --git a/src/content/blog/google-app-script.mdx b/src/content/blog/google-app-script/index.mdx
similarity index 99%
rename from src/content/blog/google-app-script.mdx
rename to src/content/blog/google-app-script/index.mdx
index e3a6268..2aa1764 100644
--- a/src/content/blog/google-app-script.mdx
+++ b/src/content/blog/google-app-script/index.mdx
@@ -2,7 +2,7 @@
 title: 'สร้างเว็บแอปกรอกข้อมูลด้วย Google Sheets + Apps Script (ฉบับมือใหม่)'
 description: 'เรียนรู้วิธีสร้างเว็บฟอร์มสำหรับกรอกข้อมูลที่บันทึกลง Google Sheets แบบเรียลไทม์ โดยใช้ Google Apps Script เหมาะสำหรับผู้เริ่มต้นที่ไม่มีพื้นฐานโปรแกรมมิ่ง'
 pubDate: '2025-08-27'
-heroImage: '/blog-placeholder-3.png'
+heroImage: '/images/common/blog-placeholder-3.png'
 category: 'Google Apps Script' 
 tags: ['Google App Script', 'Google Sheets', 'Web Development',] 
 featured: false
diff --git a/src/content/blog/haskell-ep1.mdx b/src/content/blog/haskell-ep1/index.mdx
similarity index 99%
rename from src/content/blog/haskell-ep1.mdx
rename to src/content/blog/haskell-ep1/index.mdx
index 3ee1792..1a51186 100644
--- a/src/content/blog/haskell-ep1.mdx
+++ b/src/content/blog/haskell-ep1/index.mdx
@@ -2,7 +2,7 @@
 title: 'เริ่มต้นกับ Haskell: EP.1 บทนำ'
 description: "แปลและเรียบเรียงจากบทนำของ 'Learn You a Haskell for Great Good!' เพื่อให้โปรแกรมเมอร์ที่มีประสบการณ์กับภาษาอย่าง C, Java, Python ได้เข้าใจแก่นของ Functional Programming ผ่าน Haskell"
 pubDate: '2025-10-13'
-heroImage: '/blog-placeholder-6.png'
+heroImage: '/images/common/blog-placeholder-6.png'
 category: 'Programming Languages'
 tags: ['Haskell', 'Functional Programming', 'Beginner'] 
 featured: true
diff --git a/src/content/blog/haskell-ep2.mdx b/src/content/blog/haskell-ep2/index.mdx
similarity index 99%
rename from src/content/blog/haskell-ep2.mdx
rename to src/content/blog/haskell-ep2/index.mdx
index cd59b6b..485e215 100644
--- a/src/content/blog/haskell-ep2.mdx
+++ b/src/content/blog/haskell-ep2/index.mdx
@@ -2,7 +2,7 @@
 title: 'เริ่มต้นกับ Haskell: EP.2 ลงมือปฏิบัติ'
 description: 'เริ่มต้นลงมือปฏิบัติ มาลองใช้งาน GHCi ซึ่งเป็นโหมดโต้ตอบของ Haskell เพื่อทำความเข้าใจกับการคำนวณพื้นฐาน, Boolean, และวิธีเรียกใช้ฟังก์ชันแบบ prefix และ infix'
 pubDate: '2025-10-17'
-heroImage: '/blog-placeholder-7.png'
+heroImage: '/images/common/blog-placeholder-7.png'
 category: 'Programming Languages'
 tags: ['Haskell', 'Functional Programming', 'GHCi', 'Beginner']
 featured: false
diff --git a/src/content/blog/learn-python-with-ritesh-chauhan.mdx b/src/content/blog/learn-python-with-ritesh-chauhan/index.mdx
similarity index 99%
rename from src/content/blog/learn-python-with-ritesh-chauhan.mdx
rename to src/content/blog/learn-python-with-ritesh-chauhan/index.mdx
index e4603cf..665e452 100644
--- a/src/content/blog/learn-python-with-ritesh-chauhan.mdx
+++ b/src/content/blog/learn-python-with-ritesh-chauhan/index.mdx
@@ -2,7 +2,7 @@
 title: 'เส้นทางสู่ Python Master: คู่มือการเรียนรู้จาก Repository Python by Ritesh Chauhan'
 description: 'เจาะลึกการเรียน Python ตั้งแต่พื้นฐานสู่ OOP ผ่าน 35 ไฟล์โค้ดพร้อมแบบฝึกหัดกว่า 200 ข้อใน Repository เดียว'
 pubDate: '2025-11-03'
-heroImage: '/blog-placeholder-python-course.png'
+heroImage: '/images/common/blog-placeholder-python-course.png'
 category: 'Programming Languages'
 tags: ['Python', 'Beginner', 'Programming', 'OOP', 'Guide']
 featured: true
diff --git a/src/content/blog/rust-variables-and-mutability.mdx b/src/content/blog/rust-variables-and-mutability/index.mdx
similarity index 99%
rename from src/content/blog/rust-variables-and-mutability.mdx
rename to src/content/blog/rust-variables-and-mutability/index.mdx
index 44fd5d4..c99dc28 100644
--- a/src/content/blog/rust-variables-and-mutability.mdx
+++ b/src/content/blog/rust-variables-and-mutability/index.mdx
@@ -2,7 +2,7 @@
 title: 'Rust พื้นฐาน: ทำความเข้าใจตัวแปรและการเปลี่ยนแปลงค่าอย่างละเอียด'
 description: 'มาเรียนรู้เรื่องตัวแปรในภาษา Rust อย่างละเอียดครบถ้วน ตั้งแต่ทำไมตัวแปรถึงเป็นแบบไม่เปลี่ยนแปลงโดยค่าเริ่มต้น วิธีการทำให้เปลี่ยนแปลงได้ ค่าคงที่ ไปจนถึงเทคนิคการซ้อนทับตัวแปร'
 pubDate: '2025-11-13'
-heroImage: '/blog/rust-variables-hero.png'
+heroImage: '/images/blog/rust-variables-and-mutability/rust-variables-hero.png'
 category: 'Programming Languages'
 tags: ['Rust', 'Programming', 'Variables', 'Mutability', 'Backend']
 featured: true
diff --git a/src/content/blog/vue-standard-protocol-antfu.mdx b/src/content/blog/vue-standard-protocol-antfu/index.mdx
similarity index 99%
rename from src/content/blog/vue-standard-protocol-antfu.mdx
rename to src/content/blog/vue-standard-protocol-antfu/index.mdx
index 4ac02cd..bb99edc 100644
--- a/src/content/blog/vue-standard-protocol-antfu.mdx
+++ b/src/content/blog/vue-standard-protocol-antfu/index.mdx
@@ -2,7 +2,7 @@
 title: 'Lint Like a Senior Developer: การตั้งค่า eslint + husky + lint staged + github actions'
 description: 'การ Setup โปรเจกต์ Vue ระดับ Production-Ready ครบจบทั้ง Linting, Formatting, Git Hooks และ CI/CD'
 pubDate: '2025-12-08'
-heroImage: '/blog/eslint-antfu-setup.png'
+heroImage: '/images/blog/vue-standard-protocol-antfu/eslint-antfu-setup.png'
 category: 'Development Tools'
 tags: ['Vue.js', 'ESLint', 'Antfu', 'Productivity', 'DX']
 featured: true
diff --git a/src/content/blog/web-accessibility-101.mdx b/src/content/blog/web-accessibility-101/index.mdx
similarity index 99%
rename from src/content/blog/web-accessibility-101.mdx
rename to src/content/blog/web-accessibility-101/index.mdx
index 6526af4..69aa058 100644
--- a/src/content/blog/web-accessibility-101.mdx
+++ b/src/content/blog/web-accessibility-101/index.mdx
@@ -2,7 +2,7 @@
 title: 'Web Accessibility 101: คู่มือสร้างเว็บเพื่อทุกคนที่นักพัฒนา (ทุกคน) ควรรู้'
 description: 'เรียนรู้พื้นฐาน Web Accessibility (a11y) ที่ไม่ใช่แค่เรื่องทางเทคนิค แต่คือหัวใจของการสร้างประสบการณ์ที่ดีสำหรับผู้ใช้ทุกคน พร้อมเครื่องมือและเทคนิคที่นำไปใช้ได้ทันที'
 pubDate: '2025-10-05'
-heroImage: '/blog-placeholder-5.png'
+heroImage: '/images/common/blog-placeholder-5.png'
 category: 'Web Development'
 tags: ['Accessibility', 'a11y', 'Best Practice', 'Web Development', 'UX']
 featured: true
diff --git a/src/pages/about.astro b/src/pages/about.astro
index b201b6a..d321ef1 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -8,27 +8,51 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
       <div class="text-content">
         <h1>จากเภสัชกรสู่โปรแกรมเมอร์</h1>
         <p class="lead">
-          เส้นทางของผมเริ่มต้นที่เคาน์เตอร์จ่ายยาท่ามกลางใบสั่งยาและการดูแลผู้ป่วย มาวันนี้ผมเปลี่ยนมาสร้างสรรค์โซลูชันดิจิทัล เขียนโค้ดที่สะอาดตา และออกแบบประสบการณ์ผู้ใช้ที่เข้าใจง่าย นี่คือเรื่องราวการเดินทางของผมจากบทบาทเภสัชกรสู่การเป็นนักพัฒนาซอฟต์แวร์
+          เส้นทางของผมเริ่มต้นที่เคาน์เตอร์จ่ายยาท่ามกลางใบสั่งยาและการดูแลผู้ป่วย
+          มาวันนี้ผมเปลี่ยนมาสร้างสรรค์โซลูชันดิจิทัล เขียนโค้ดที่สะอาดตา
+          และออกแบบประสบการณ์ผู้ใช้ที่เข้าใจง่าย
+          นี่คือเรื่องราวการเดินทางของผมจากบทบาทเภสัชกรสู่การเป็นนักพัฒนาซอฟต์แวร์
         </p>
         <p>
-          ผมคือเภสัชกรสุรเดช ประถมศักดิ์ ผู้สร้าง RxDev Man ด้วยความหลงใหลในตรรกะ การแก้ปัญหา และประสิทธิภาพ ซึ่งเป็นทักษะที่ได้ฝึกฝนจากงานสายสาธารณสุข ทำให้ผมได้ค้นพบเส้นทางใหม่ในการพัฒนาซอฟต์แวร์ ผมทึ่งกับวิธีที่เทคโนโลยีสามารถแก้ปัญหาที่ซับซ้อนในวงกว้างได้ และตัดสินใจที่จะกระโดดเข้ามาเรียนรู้อย่างเต็มตัว
+          ผมคือเภสัชกรสุรเดช ประถมศักดิ์ ผู้สร้าง RxDev Man
+          ด้วยความหลงใหลในตรรกะ การแก้ปัญหา และประสิทธิภาพ
+          ซึ่งเป็นทักษะที่ได้ฝึกฝนจากงานสายสาธารณสุข
+          ทำให้ผมได้ค้นพบเส้นทางใหม่ในการพัฒนาซอฟต์แวร์
+          ผมทึ่งกับวิธีที่เทคโนโลยีสามารถแก้ปัญหาที่ซับซ้อนในวงกว้างได้
+          และตัดสินใจที่จะกระโดดเข้ามาเรียนรู้อย่างเต็มตัว
         </p>
         <p>
-          เว็บไซต์นี้เปรียบเสมือนคลังความรู้ส่วนตัวและบันทึกการเรียนรู้ที่ผมเปิดเผยสู่สาธารณะ ผมเขียนเกี่ยวกับหัวข้อต่างๆ ที่กำลังศึกษา ตั้งแต่ frontend frameworks อย่าง Astro และ Vue ไปจนถึงความท้าทายเฉพาะทางในซอฟต์แวร์โรงพยาบาลอย่าง HOSxP เป้าหมายของผมคือการสร้างความเข้าใจที่ลึกซึ้งยิ่งขึ้นผ่านการแบ่งปันความรู้ให้ผู้อื่น และเผยแพร่แหล่งข้อมูลที่เป็นประโยชน์ซึ่งผมได้ใช้ตลอดเส้นทางนี้
+          เว็บไซต์นี้เปรียบเสมือนคลังความรู้ส่วนตัวและบันทึกการเรียนรู้ที่ผมเปิดเผยสู่สาธารณะ
+          ผมเขียนเกี่ยวกับหัวข้อต่างๆ ที่กำลังศึกษา ตั้งแต่ frontend frameworks
+          อย่าง Astro และ Vue ไปจนถึงความท้าทายเฉพาะทางในซอฟต์แวร์โรงพยาบาลอย่าง
+          HOSxP
+          เป้าหมายของผมคือการสร้างความเข้าใจที่ลึกซึ้งยิ่งขึ้นผ่านการแบ่งปันความรู้ให้ผู้อื่น
+          และเผยแพร่แหล่งข้อมูลที่เป็นประโยชน์ซึ่งผมได้ใช้ตลอดเส้นทางนี้
         </p>
 
         <h1>ช่องทางการติดต่อ</h1>
         <p>
-          ผมเปิดรับการพูดคุยเกี่ยวกับโปรเจกต์ใหม่ๆ แลกเปลี่ยนความรู้ หรือเรื่องราวเกี่ยวกับเทคโนโลยีเสมอ อย่าลังเลที่จะติดต่อมานะครับ
+          ผมเปิดรับการพูดคุยเกี่ยวกับโปรเจกต์ใหม่ๆ แลกเปลี่ยนความรู้
+          หรือเรื่องราวเกี่ยวกับเทคโนโลยีเสมอ อย่าลังเลที่จะติดต่อมานะครับ
         </p>
         <div class="social-links">
-          <a href="https://github.com/pharmacist-sabot/" target="_blank" rel="noopener noreferrer" class="social-link">GitHub</a>
-          <a href="mailto:pharmacistsabot@gmail.com" class="social-link">อีเมล</a>
+          <a
+            href="https://github.com/pharmacist-sabot/"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="social-link"
+          >GitHub</a
+          >
+          <a
+            href="mailto:pharmacistsabot@gmail.com"
+            class="social-link"
+          >อีเมล</a
+          >
         </div>
       </div>
       <div class="image-content">
         <img
-          src="/profile-placeholder.jpg"
+          src="/images/common/profile-placeholder.jpg"
           alt="A portrait of Sabot"
           class="profile-image-about"
         />
diff --git a/src/pages/index.astro b/src/pages/index.astro
index a1eb587..cb07854 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -3,106 +3,105 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
 ---
 
 <BaseLayout title="Welcome">
-    <div class="home-container">
-        <div class="intro-grid">
-            <div class="intro-text-content">
-                <p class="greeting">HI, I'M SURADET</p>
-                <h1 class="headline">
-                    Pharmacist by Training,<br />Developer by Passion.
-                </h1>
-                <p class="description">
-                    ยินดีต้อนรับสู่ RxDev Man นะครับ ^^
-                    ผมสร้างเว็บบล็อกนี้ขึ้นมาเพื่อบันทึกสิ่งที่ได้เรียนรู้ในโลกของการเขียนโปรแกรม
-                    ในเว็บบล็อกนี้หลักๆก็จะเน้นไปที่บทความครับ
-                    อาจจะมีเครื่องมือที่ผมสร้างขึ้นเองบ้าง
-                    หรืออาจจะมีอะไรเพิ่มเติมในอนาคต ถ้าอยากรู้ว่ามีอะไรบ้าง
-                    มาค้นหากันเลยครับ
-                </p>
-                <a href="/blog" class="cta-button">Explore My Notes</a>
-            </div>
-            <div class="profile-image-container">
-                <img
-                  src="/profile-placeholder.jpg"
-                  alt="A portrait of the author"
-                  class="profile-image"
-                />
-            </div>
-        </div>
+  <div class="home-container">
+    <div class="intro-grid">
+      <div class="intro-text-content">
+        <p class="greeting">HI, I'M SURADET</p>
+        <h1 class="headline">
+          Pharmacist by Training,<br />Developer by Passion.
+        </h1>
+        <p class="description">
+          ยินดีต้อนรับสู่ RxDev Man นะครับ ^^
+          ผมสร้างเว็บบล็อกนี้ขึ้นมาเพื่อบันทึกสิ่งที่ได้เรียนรู้ในโลกของการเขียนโปรแกรม
+          ในเว็บบล็อกนี้หลักๆก็จะเน้นไปที่บทความครับ
+          อาจจะมีเครื่องมือที่ผมสร้างขึ้นเองบ้าง หรืออาจจะมีอะไรเพิ่มเติมในอนาคต
+          ถ้าอยากรู้ว่ามีอะไรบ้าง มาค้นหากันเลยครับ
+        </p>
+        <a href="/blog" class="cta-button">Explore My Notes</a>
+      </div>
+      <div class="profile-image-container">
+        <img
+          src="/images/common/profile-placeholder.jpg"
+          alt="A portrait of the author"
+          class="profile-image"
+        />
+      </div>
     </div>
+  </div>
 </BaseLayout>
 
 <style>
-    .home-container {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        min-height: calc(100vh - 280px);
-        padding: 2rem 0;
-    }
+  .home-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: calc(100vh - 280px);
+    padding: 2rem 0;
+  }
 
-    .intro-grid {
-        display: grid;
-        grid-template-columns: 2fr 1fr;
-        align-items: center;
-        gap: 4rem;
-        max-width: 1100px;
-    }
+  .intro-grid {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    align-items: center;
+    gap: 4rem;
+    max-width: 1100px;
+  }
 
-    .greeting {
-        font-family: var(--font-mono);
-        font-size: 1rem;
-        font-weight: 500;
-        color: var(--font-color-light);
-        margin-bottom: 1rem;
-        letter-spacing: 0.05em;
-    }
+  .greeting {
+    font-family: var(--font-mono);
+    font-size: 1rem;
+    font-weight: 500;
+    color: var(--font-color-light);
+    margin-bottom: 1rem;
+    letter-spacing: 0.05em;
+  }
 
-    .headline {
-        font-size: clamp(2.5rem, 5vw, 3.5rem);
-        margin-bottom: 1.5rem;
-        line-height: 1.1;
-    }
+  .headline {
+    font-size: clamp(2.5rem, 5vw, 3.5rem);
+    margin-bottom: 1.5rem;
+    line-height: 1.1;
+  }
 
-    .description {
-        font-size: 1.15rem;
-        max-width: 600px;
-        margin-bottom: 2.5rem;
-    }
+  .description {
+    font-size: 1.15rem;
+    max-width: 600px;
+    margin-bottom: 2.5rem;
+  }
+
+  .profile-image-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .profile-image {
+    width: 280px;
+    height: 280px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 5px solid var(--card-bg-color);
+    box-shadow: 0 10px 30px var(--shadow-hover-color);
+  }
 
+  @media (max-width: 900px) {
+    .intro-grid {
+      grid-template-columns: 1fr;
+      text-align: center;
+      gap: 3rem;
+    }
+    .intro-text-content {
+      order: 2;
+    }
     .profile-image-container {
-        display: flex;
-        justify-content: center;
-        align-items: center;
+      order: 1;
     }
-
-    .profile-image {
-        width: 280px;
-        height: 280px;
-        border-radius: 50%;
-        object-fit: cover;
-        border: 5px solid var(--card-bg-color);
-        box-shadow: 0 10px 30px var(--shadow-hover-color);
+    .description {
+      margin-left: auto;
+      margin-right: auto;
     }
-
-    @media (max-width: 900px) {
-        .intro-grid {
-            grid-template-columns: 1fr;
-            text-align: center;
-            gap: 3rem;
-        }
-        .intro-text-content {
-            order: 2;
-        }
-        .profile-image-container {
-            order: 1;
-        }
-        .description {
-            margin-left: auto;
-            margin-right: auto;
-        }
-        .profile-image {
-            width: 220px;
-            height: 220px;
-        }
+    .profile-image {
+      width: 220px;
+      height: 220px;
     }
+  }
 </style>