diff --git a/todoblue/src/app/[lang]/(page)/CreateBoardChapter.tsx b/todoblue/src/app/[lang]/(page)/CreateBoardChapter.tsx
new file mode 100644
index 0000000..8514c89
--- /dev/null
+++ b/todoblue/src/app/[lang]/(page)/CreateBoardChapter.tsx
@@ -0,0 +1,19 @@
+import {useTranslation} from "@/app/(i18n)/server"
+import {CreatePrivateBoardPanel} from "@/app/[lang]/(page)/CreatePrivateBoardPanel"
+import {CreatePublicBoardPanel} from "@/app/[lang]/(page)/CreatePublicBoardPanel"
+import {default as React} from "react"
+
+
+export async function CreateBoardChapter({lng}: {lng: string}) {
+	const {t} = await useTranslation(lng, "root")
+
+	return (
+		<div className={"chapter-2"}>
+			<h2>
+				{t("createBoardTitle")}
+			</h2>
+			<CreatePublicBoardPanel lng={lng}/>
+			<CreatePrivateBoardPanel lng={lng}/>
+		</div>
+	)
+}
diff --git a/todoblue/src/app/[lang]/(page)/ExistingBoardChapter.tsx b/todoblue/src/app/[lang]/(page)/ExistingBoardChapter.tsx
new file mode 100644
index 0000000..fdf2e8a
--- /dev/null
+++ b/todoblue/src/app/[lang]/(page)/ExistingBoardChapter.tsx
@@ -0,0 +1,19 @@
+import {useTranslation} from "@/app/(i18n)/server"
+import {KnownBoardsPanel} from "@/app/[lang]/(page)/KnownBoardsPanel"
+import {StarredBoardsPanel} from "@/app/[lang]/(page)/StarredBoardsPanel"
+import {default as React} from "react"
+
+
+export async function ExistingBoardChapter({lng}: {lng: string}) {
+	const {t} = await useTranslation(lng, "root")
+
+	return (
+		<div className={"chapter-2"}>
+			<h2>
+				{t("existingBoardTitle")}
+			</h2>
+			<KnownBoardsPanel lng={lng}/>
+			<StarredBoardsPanel lng={lng}/>
+		</div>
+	)
+}
diff --git a/todoblue/src/app/[lang]/(page)/RootMain.tsx b/todoblue/src/app/[lang]/(page)/RootMain.tsx
index 965a197..be7845e 100644
--- a/todoblue/src/app/[lang]/(page)/RootMain.tsx
+++ b/todoblue/src/app/[lang]/(page)/RootMain.tsx
@@ -1,31 +1,14 @@
-import {useTranslation} from "@/app/(i18n)/server"
-import {CreatePrivateBoardPanel} from "@/app/[lang]/(page)/CreatePrivateBoardPanel"
-import {CreatePublicBoardPanel} from "@/app/[lang]/(page)/CreatePublicBoardPanel"
-import {KnownBoardsPanel} from "@/app/[lang]/(page)/KnownBoardsPanel"
+import {CreateBoardChapter} from "@/app/[lang]/(page)/CreateBoardChapter"
+import {ExistingBoardChapter} from "@/app/[lang]/(page)/ExistingBoardChapter"
 import style from "@/app/[lang]/page.module.css"
-import {StarredBoardsPanel} from "@/app/[lang]/(page)/StarredBoardsPanel"
 import {default as React} from "react"
 
 
 export async function RootMain({lng}: {lng: string}) {
-	const {t} = await useTranslation(lng, "root")
-
 	return (
 		<main className={style.pageMain}>
-			<div className={"chapter-2"}>
-				<h2>
-					{t("createBoardTitle")}
-				</h2>
-				<CreatePublicBoardPanel lng={lng}/>
-				<CreatePrivateBoardPanel lng={lng}/>
-			</div>
-			<div className={"chapter-2"}>
-				<h2>
-					{t("existingBoardTitle")}
-				</h2>
-				<KnownBoardsPanel lng={lng}/>
-				<StarredBoardsPanel lng={lng}/>
-			</div>
+			<CreateBoardChapter lng={lng}/>
+			<ExistingBoardChapter lng={lng}/>
 		</main>
 	)
 }