diff --git a/imgs/category_backend_data.png b/imgs/category_backend_data.png
new file mode 100644
index 0000000..dc95822
Binary files /dev/null and b/imgs/category_backend_data.png differ
diff --git a/imgs/category_framework_tools.png b/imgs/category_framework_tools.png
new file mode 100644
index 0000000..12b1bfb
Binary files /dev/null and b/imgs/category_framework_tools.png differ
diff --git a/imgs/category_frontend.png b/imgs/category_frontend.png
new file mode 100644
index 0000000..bcbf4c6
Binary files /dev/null and b/imgs/category_frontend.png differ
diff --git a/imgs/category_network.png b/imgs/category_network.png
new file mode 100644
index 0000000..68d48af
Binary files /dev/null and b/imgs/category_network.png differ
diff --git a/imgs/category_web_overview.png b/imgs/category_web_overview.png
new file mode 100644
index 0000000..5be0a5c
Binary files /dev/null and b/imgs/category_web_overview.png differ
diff --git a/imgs/category_web_structure.png b/imgs/category_web_structure.png
new file mode 100644
index 0000000..08baef3
Binary files /dev/null and b/imgs/category_web_structure.png differ
diff --git a/script.js b/script.js
index 88b4e61..881f4ef 100644
--- a/script.js
+++ b/script.js
@@ -4,7 +4,7 @@ const nodes = [
     type: "root",
     title: "웹 개발",
     subtitle: "클릭해서 펼치기",
-    image: "imgs/frontend_backend.png",
+    image: "imgs/category_web_overview.png",
     category: "전체 개요",
     focus: "웹 개발이 프론트엔드, 백엔드, 통신, 데이터 흐름으로 나뉘는 큰 그림을 봅니다.",
     x: 1020,
@@ -16,7 +16,7 @@ const nodes = [
     type: "category",
     title: "웹의 뼈대",
     subtitle: "브라우저와 화면 구성",
-    image: "imgs/html_css.png",
+    image: "imgs/category_web_structure.png",
     category: "웹의 뼈대",
     focus: "HTML, CSS, 브라우저, DOM이 화면을 구성하는 기본 흐름을 봅니다.",
     x: 1020,
@@ -28,7 +28,7 @@ const nodes = [
     type: "category",
     title: "프론트엔드",
     subtitle: "UI를 만드는 도구",
-    image: "imgs/frontend_backend.png",
+    image: "imgs/category_frontend.png",
     category: "프론트엔드",
     focus: "사용자가 보는 화면과 백엔드가 만나는 경계를 먼저 파악합니다.",
     x: 1360,
@@ -40,7 +40,7 @@ const nodes = [
     type: "category",
     title: "통신",
     subtitle: "요청과 응답",
-    image: "imgs/httpReq_Res.png",
+    image: "imgs/category_network.png",
     category: "통신",
     focus: "요청과 응답, 상태 코드, 헤더, 바디가 웹 통신에서 맡는 역할을 봅니다.",
     x: 1320,
@@ -52,19 +52,19 @@ const nodes = [
     type: "category",
     title: "백엔드·데이터",
     subtitle: "서버와 저장소",
-    image: "imgs/database.png",
+    image: "imgs/category_backend_data.png",
     category: "백엔드·데이터",
     focus: "서버가 요청을 처리하고 데이터를 저장·조회하는 큰 흐름을 봅니다.",
     x: 1020,
     y: 1030,
-    children: ["web-server", "database", "postgres", "json"],
+    children: ["web-server", "database", "json"],
   },
   {
     id: "workflow",
     type: "category",
     title: "프레임워크·도구",
     subtitle: "개발 흐름",
-    image: "imgs/nextJS.png",
+    image: "imgs/category_framework_tools.png",
     category: "프레임워크·도구",
     focus: "Next.js 같은 프레임워크가 라우팅, 렌더링, 개발 흐름을 어떻게 묶는지 봅니다.",
     x: 660,
@@ -218,7 +218,7 @@ const nodes = [
   {
     id: "database",
     parent: "backend",
-    type: "term",
+    type: "category",
     title: "데이터베이스",
     subtitle: "백엔드·데이터",
     image: "imgs/database.png",
@@ -226,10 +226,11 @@ const nodes = [
     focus: "애플리케이션 데이터가 테이블, 문서, 키-값 등으로 저장되는 방식을 봅니다.",
     x: 880,
     y: 1280,
+    children: ["postgres"],
   },
   {
     id: "postgres",
-    parent: "backend",
+    parent: "database",
     type: "term",
     title: "PostgreSQL",
     subtitle: "백엔드·데이터",