diff --git a/src/components/Index.astro b/src/components/Index.astro
index 66c34d7..dba8204 100644
--- a/src/components/Index.astro
+++ b/src/components/Index.astro
@@ -1,16 +1,3 @@
 --- 
 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 6f1faf2..40c3279 100644
--- a/src/components/Toc.astro
+++ b/src/components/Toc.astro
@@ -3,122 +3,30 @@
 const currentPath = Astro.url.pathname;
 ---
 
-<div class="toc-wrapper">
-  <nav class="toc">
-    <ul class="toc-list">
-      <li class="toc-item">
-        <a href="/" class="toc-link">Introduction</a>
-      </li>
+<ul class="menu bg-base-200 rounded-box p-2 w-56 h-full overflow-y-auto">
+  <li>
+    <a href="/" class="menu-item">Introduction</a>
+  </li>
 
-      {sections.map(section => {
-      const isActive = section.items.some(item => currentPath.startsWith(item.url));
-      return (
-      <li class="toc-item">
-        <details open={isActive}>
-          <summary class="toc-section-title">{section.title}</summary>
-          <ul class="toc-sublist">
-            {section.items.map(item => (
-            <li class="toc-subitem">
-              <a href={item.url} class="toc-link">{item.title}</a>
-            </li>
-            ))}
-          </ul>
-        </details>
-      </li>
-      );
-      })}
-    </ul>
-  </nav>
-</div>
+  {sections.map(section => {
+    const isActive = section.items.some(item => currentPath.startsWith(item.url));
 
-<style>
-  .toc {
-    font-size: 14px;
-    position: sticky;
-    top: 32px;
-  }
+    return (
+    <li>
+      <details open={isActive}>
+        <summary class="toc-section-title">{section.title}</summary>
+        <ul class="toc-sublist">
+          {section.items.map(item => (
+          <li class="toc-subitem">
+            <a href={item.url} class="toc-link">{item.title}</a>
+          </li>
+          ))}
+        </ul>
+      </details>
+    </li>
+    );
+  })}
 
-  .toc-list {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
+</ul>
 
-  .toc-item {
-    margin: 0;
-  }
 
-  .toc-link {
-    display: block;
-    padding: 4px 8px;
-    color: #0969da;
-    text-decoration: none;
-    border-radius: 6px;
-  }
-
-  .toc-link:hover {
-    background-color: #f6f8fa;
-    text-decoration: none;
-  }
-
-  details {
-    margin: 4px 0;
-  }
-
-  summary {
-    cursor: pointer;
-    padding: 4px 8px;
-    font-weight: 600;
-    color: #1f2328;
-    border-radius: 6px;
-    list-style: none;
-  }
-
-  summary::-webkit-details-marker {
-    display: none;
-  }
-
-  summary::before {
-    content: '▶';
-    display: inline-block;
-    margin-right: 6px;
-    font-size: 10px;
-    transition: transform 0.2s;
-  }
-
-  details[open] summary::before {
-    transform: rotate(90deg);
-  }
-
-  summary:hover {
-    background-color: #f6f8fa;
-  }
-
-  .toc-sublist {
-    list-style: none;
-    padding-left: 16px;
-    margin: 4px 0;
-  }
-
-  .toc-subitem {
-    margin: 0;
-  }
-
-  @media (prefers-color-scheme: dark) {
-    .toc-link {
-      color: #4493f8;
-    }
-
-    .toc-link:hover {
-      background-color: #161b22;
-    }
-
-    summary {
-      color: #e6edf3;
-    }
-
-    summary:hover {
-      background-color: #161b22;
-    }
-  }
-</style>
diff --git a/src/constants/sections.ts b/src/constants/sections.ts
index 8249c9d..06183b3 100644
--- a/src/constants/sections.ts
+++ b/src/constants/sections.ts
@@ -1,16 +1,16 @@
 import type { MDXInstance } from "astro";
 
 export type PageItem = {
-	url: string;
-	file: string;
-	title: string;
+  url: string;
+  file: string;
+  title: string;
 };
 
 export type Section = {
-	title: string;
-	key: string;
-	items: PageItem[];
-	description?: string;
+  title: string;
+  key: string;
+  items: PageItem[];
+  description?: string;
 };
 
 // "html",
@@ -24,88 +24,91 @@
 // "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: [],
-	},
+  {
+    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;
+  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 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 || "",
-			};
+  const files = await Promise.all(
+    filteredPages.map(async ([filePath, resolver]) => {
+      const module = await resolver();
 
-			return page;
-		}),
-	);
+      console.log(module.title);
 
-	return files;
+      const page: PageItem = {
+        file: filePath,
+        title: module.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));
+  const pages = await getSectionPages(section.key);
+  section.items = pages.sort((a, b) => a.title.localeCompare(b.title));
 });
 
 export { sections };