diff --git a/src/components/Index.astro b/src/components/Index.astro
new file mode 100644
index 0000000..66c34d7
--- /dev/null
+++ b/src/components/Index.astro
@@ -0,0 +1,16 @@
+--- 
+import { sections } from "../constants/sections.ts";
+---
+
+{sections.map((section) => (
+  <>
+    <div class="bold">{section.title}</h2>
+    {section.description && <p>{section.description}</p>}
+  </>
+))}
+
+
+
+
+
+
diff --git a/src/components/Toc.astro b/src/components/Toc.astro
index 23aa50a..6f1faf2 100644
--- a/src/components/Toc.astro
+++ b/src/components/Toc.astro
@@ -1,59 +1,6 @@
 ---
-type PageItem = {
-	url: string;
-	title: string;
-};
-
-type Section = {
-	title: string;
-	items: PageItem[];
-};
-
-async function getSectionPages(sectionPath: string): Promise<PageItem[]> {
-	const allPages = await import.meta.glob(`../pages/**/*.mdx`);
-
-	const filteredPages = Object.entries(allPages).filter(([path, _]) =>
-		path.includes(`/pages/${sectionPath}/`),
-	);
-
-	const files = await Promise.all(
-		filteredPages.map(async ([filePath, resolver]) => {
-			const module = await resolver();
-			return {
-				file: filePath,
-				title: module.title || module.frontmatter?.title || "",
-				url: module.url || "",
-			};
-		}),
-	);
-
-	return files;
-}
-
+import { sections } from "../constants/sections.ts";
 const currentPath = Astro.url.pathname;
-
-const sections: Section[] = [];
-const sectionPaths = [
-	"html",
-	"js",
-	"cli",
-	"php",
-	"sql",
-	"git",
-	"tips",
-	"reference",
-	"final-work",
-];
-
-for (const path of sectionPaths) {
-	const pages = await getSectionPages(path);
-	if (pages.length > 0) {
-		sections.push({
-			title: path.charAt(0).toUpperCase() + path.slice(1),
-			items: pages,
-		});
-	}
-}
 ---
 
 <div class="toc-wrapper">
diff --git a/src/constants/sections.ts b/src/constants/sections.ts
new file mode 100644
index 0000000..8249c9d
--- /dev/null
+++ b/src/constants/sections.ts
@@ -0,0 +1,111 @@
+import type { MDXInstance } from "astro";
+
+export type PageItem = {
+	url: string;
+	file: string;
+	title: string;
+};
+
+export type Section = {
+	title: string;
+	key: string;
+	items: PageItem[];
+	description?: string;
+};
+
+// "html",
+// "js",
+// "cli",
+// "php",
+// "sql",
+// "git",
+// "tips",
+// "reference",
+// "final-work",
+
+const sections: Section[] = [
+	{
+		key: "html",
+		title: "HTML",
+		items: [],
+		description: "",
+	},
+	{
+		key: "js",
+		title: "JavaScript",
+		items: [],
+		description: "自分のページに振る舞い方を教えよう。",
+	},
+	{
+		key: "cli",
+		title: "コマンドライン",
+		items: [],
+		description: "文字だけの世界で、パソコンと会話しよう。",
+	},
+	{
+		key: "php",
+		title: "PHP",
+		items: [],
+		description: "",
+	},
+	{
+		key: "sql",
+		title: "SQL",
+		items: [],
+		description: "",
+	},
+	{
+		key: "git",
+		title: "Git",
+		items: [],
+		description: "",
+	},
+	{
+		key: "tips",
+		title: "Tips",
+		items: [],
+	},
+	{
+		key: "reference",
+		title: "参考資料",
+		items: [],
+	},
+	{
+		key: "final-work",
+		title: "最終課題",
+		items: [],
+	},
+];
+
+type Article = {
+	title?: string;
+};
+
+async function getSectionPages(sectionPath: string): Promise<PageItem[]> {
+	const allPages = import.meta.glob<MDXInstance<Article>>(`../pages/**/*.mdx`);
+	const filteredPages = Object.entries(allPages).filter(([path, _]) =>
+		path.includes(`/pages/${sectionPath}/`),
+	);
+
+	const files = await Promise.all(
+		filteredPages.map(async ([filePath, resolver]) => {
+			const module = await resolver();
+			const page: PageItem = {
+				file: filePath,
+				title: module.frontmatter?.title || "",
+				url: module.url || "",
+			};
+
+			return page;
+		}),
+	);
+
+	return files;
+}
+
+sections.forEach(async (section) => {
+	const pages = await getSectionPages(section.key);
+	section.items = pages.sort((a, b) => a.title.localeCompare(b.title));
+});
+
+export { sections };
diff --git a/src/pages/index.mdx b/src/pages/index.mdx
index fe807f1..67518e5 100644
--- a/src/pages/index.mdx
+++ b/src/pages/index.mdx
@@ -2,36 +2,9 @@
 layout: "@/layouts/MarkdownLayout.astro"
 ---
 
+import Index from "@/components/Index.astro";
 export const title = "Hello, Programmer World!";
 
 # {title}
 
-ようこそ、プログラミングの世界へ！
-
-このサイトは、初めてプログラミングに触れる方のための研修資料です。  
-プログラミングは難しそうに見えるかもしれませんが、一歩ずつ進んでいけば必ず理解できます。
-
-## 学習コンテンツ
-
-### [CLI (Command Line Interface)](/cli/00-introduction)
-
-コンピューターを文字で操作する世界について学びます。  
-プログラミングの基礎となる重要なスキルです。
-
-### [HTML](/html/00-introduction)
-
-ウェブページを作成するための基本的なマークアップ言語を学びます。  
-インターネット上のあらゆるページはHTMLで構築されています。
-
-### [JavaScript](/js/00-introduction)
-
-ウェブページに動きをつけるプログラミング言語を学びます。  
-現代のウェブ開発に欠かせない技術です。
-
-### [Tips](/tips/terminal)
-
-開発に役立つ便利な情報やツールをまとめています。
-
----
-
-さあ、プログラミングの旅を始めましょう！
+<Index />