diff --git a/src/app/learn/LearnContent.tsx b/src/app/learn/LearnContent.tsx
new file mode 100644
index 000000000..7a7157100
--- /dev/null
+++ b/src/app/learn/LearnContent.tsx
@@ -0,0 +1,90 @@
+'use client'
+
+import Link from 'next/link'
+import { useSearchParams } from 'next/navigation'
+
+import { learnLevels, LearnLevelType, LearnContentType } from './constants'
+
+const LearnItem = ({
+  index,
+  id,
+  content
+}: {
+  index: number
+  id: string
+  content: LearnContentType
+}) => {
+  return (
+    <div className="group w-full items-center justify-between py-1">
+      <Link
+        href={{
+          pathname: `/learn/content/${id}_${content.value}`
+        }}
+        className="flex w-full rounded-xl px-6 py-3 font-display shadow-md transition group-hover:shadow-lg dark:bg-slate-700"
+      >
+        <span className="flex w-full flex-col">
+          <p className="py-1 text-sm font-medium text-gray-500 dark:text-gray-100">
+            {index}. {content.label}
+          </p>
+        </span>
+      </Link>
+    </div>
+  )
+}
+
+const LearnList = ({ level }: { level: LearnLevelType }) => {
+  return (
+    <div className="m-6 flex gap-6">
+      <div className="relative flex-1">
+        <h2 className="my-5 text-3xl text-gray-500">{level.label}</h2>
+        <div className="space-y-6">
+          {level.sections.map(section => {
+            return (
+              <div key={section.value} className="relative pl-6">
+                {/* Section header */}
+                <h3 className="text-2xl text-gray-500">{section.label}</h3>
+
+                {/* Section items */}
+                {true && (
+                  <ul className="mt-2 space-y-1">
+                    {section.content.map((content, idx) => (
+                      <li
+                        key={content.value}
+                        className="flex items-center gap-2 text-sm"
+                      >
+                        <LearnItem
+                          index={idx + 1}
+                          id={`${level.value}_${section.value}`}
+                          content={content}
+                        />
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export const LearnContent = () => {
+  const searchParams = useSearchParams()
+  const level = searchParams.get('level')
+
+  return (
+    <div className="h-full w-full">
+      <div className="w-full px-6 font-display">
+        {learnLevels.map(learnLevel => {
+          return !level || level == learnLevel.value ? (
+            <LearnList key={learnLevel.value} level={learnLevel} />
+          ) : (
+            <></>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
diff --git a/src/app/learn/LearnSidebar.tsx b/src/app/learn/LearnSidebar.tsx
new file mode 100644
index 000000000..bcd5cf511
--- /dev/null
+++ b/src/app/learn/LearnSidebar.tsx
@@ -0,0 +1,52 @@
+'use client'
+
+import Link from 'next/link'
+import { useSearchParams } from 'next/navigation'
+
+import clsx from 'clsx'
+
+import { learnSidebarSelects } from './constants'
+
+export const LearnSidebar = () => {
+  const searchParams = useSearchParams()
+
+  const level = searchParams.get('level')
+
+  return (
+    <div>
+      <div className="mx-4 hidden w-52 shrink flex-col gap-4 divide-y font-display md:flex">
+        <div className="flex shrink flex-col font-display">
+          {learnSidebarSelects.map(learnLevelSelect => {
+            return (
+              <Link
+                key={learnLevelSelect.value}
+                href={{
+                  pathname: '/learn',
+                  query:
+                    learnLevelSelect.value === 'overview'
+                      ? null
+                      : learnLevelSelect.value && {
+                          level: learnLevelSelect.value
+                        }
+                }}
+                type="button"
+                className={clsx(
+                  'flex h-9 w-full items-center justify-center rounded-md transition-colors',
+                  (!level && learnLevelSelect.value === null) ||
+                    learnLevelSelect.value === String(level) ||
+                    (learnLevelSelect.value === 'overview' && !level)
+                    ? 'bg-gray-100 dark:bg-slate-700'
+                    : 'hover:bg-gray-50 dark:hover:bg-slate-600'
+                )}
+              >
+                <p className="text-sm text-gray-500 dark:text-gray-200">
+                  {learnLevelSelect.label}
+                </p>
+              </Link>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/app/learn/constants.ts b/src/app/learn/constants.ts
new file mode 100644
index 000000000..6c7f09c04
--- /dev/null
+++ b/src/app/learn/constants.ts
@@ -0,0 +1,231 @@
+export type LearnContentType = {
+  label: string
+  value: string
+}
+
+export type LearnSectionType = {
+  label: string
+  value: string
+  content: LearnContentType[]
+}
+
+export type LearnLevelType = {
+  label: string
+  value: string
+  sections: LearnSectionType[]
+}
+
+export const learnLevels: LearnLevelType[] = [
+  {
+    label: 'เตรียมตัวก่อนเข้าค่าย',
+    value: 'pre-posn',
+    sections: [
+      {
+        label: 'คณิตศาสตร์',
+        value: 'math',
+        content: [
+          {
+            label: 'บทนำ',
+            value: 'intro'
+          },
+          {
+            label: 'จำนวน ระบบจำนวน การดำเนินการของจำนวน',
+            value: 'number-operation'
+          },
+          {
+            label: 'ความสัมพันธ์ ฟังก์ชัน',
+            value: 'function-relation'
+          },
+          {
+            label: 'สมการ และ อสมการ',
+            value: 'equation-inequality'
+          },
+          {
+            label: 'เซต และ ตรรกศาสตร์',
+            value: 'logic-set'
+          },
+          {
+            label: 'การวัดและเรขาคณิต',
+            value: 'geometry'
+          },
+          {
+            label: 'สถิติและความน่าจะเป็น',
+            value: 'prob-stats'
+          }
+        ]
+      },
+      {
+        label: 'กระบวนการคิด',
+        value: 'problem-solving',
+        content: [
+          {
+            label: 'กระบวนการแก้ปัญหาที่มีการใช้ตรรกะ และฟังก์ชัน',
+            value: 'problem-solving'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    label: 'ค่ายสอวน. 1',
+    value: 'posn',
+    sections: [
+      {
+        label: 'คณิตศาสตร์',
+        value: 'math',
+        content: [
+          {
+            label: 'ทฤษฎีตัวเลข เมทริกซ์',
+            value: 'matrix'
+          },
+          {
+            label: 'ลำดับและอนุกรม',
+            value: 'sequence-series'
+          },
+          {
+            label: 'เลขฐาน',
+            value: 'radix'
+          }
+        ]
+      },
+      {
+        label: 'การเขียนโปรแกรม',
+        value: 'programming',
+        content: [
+          {
+            label: 'ทำไมถึงใช้ C++',
+            value: 'why-cpp'
+          },
+          {
+            label: 'การติดตั้งโปรแกรม',
+            value: 'installation'
+          },
+          {
+            label: 'พื้นฐานภาษา C และ C++',
+            value: 'cpp-basic'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    label: 'ค่ายสอวน. 2 และระดับชาติ',
+    value: 'toi',
+    sections: [
+      {
+        label: 'คณิตศาสตร์',
+        value: 'math',
+        content: [
+          {
+            label: 'เวกเตอร์และระบบพิกัดคาร์ทีเซียน',
+            value: 'vector-cartesian'
+          },
+          {
+            label: 'การนับ',
+            value: 'counting'
+          },
+          {
+            label: 'ทฤษฎีกราฟ',
+            value: 'graph'
+          }
+        ]
+      },
+      {
+        label: 'Data Structure',
+        value: 'datastructure',
+        content: [
+          {
+            label: 'Intro To DS',
+            value: 'intro'
+          },
+          {
+            label: 'Primitive',
+            value: 'primitive'
+          },
+          {
+            label: 'Array and Vector',
+            value: 'array-vector'
+          },
+          {
+            label: 'string',
+            value: 'string'
+          },
+          {
+            label: 'pair',
+            value: 'pair'
+          },
+          {
+            label: 'stack and queue',
+            value: 'stack-queue'
+          },
+          {
+            label: 'priority queue',
+            value: 'priority-queue'
+          },
+          {
+            label: 'set and map',
+            value: 'set-map'
+          },
+          {
+            label: 'choosing datastructure',
+            value: 'choosing-ds'
+          }
+        ]
+      },
+      {
+        label: 'Algorithm',
+        value: 'algorithm',
+        content: [
+          {
+            label: 'intro',
+            value: 'intro'
+          },
+          {
+            label: 'bruteforce',
+            value: 'bruteforce'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    label: 'สสวท.',
+    value: 'ipst',
+    sections: [
+      {
+        label: 'คณิตศาสตร์',
+        value: 'math',
+        content: [
+          {
+            label: 'คณิตศาสตร์ระดับสูง',
+            value: 'advanced-math'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    label: 'IOI',
+    value: 'ioi',
+    sections: [
+      {
+        label: 'คณิตศาสตร์',
+        value: 'math',
+        content: [
+          {
+            label: 'คณิตศาสตร์ระดับสูง',
+            value: 'advanced-math'
+          }
+        ]
+      }
+    ]
+  }
+]
+
+export const learnSidebarSelects = [
+  {
+    label: 'Overview',
+    value: 'overview'
+  },
+  ...learnLevels.map(({ label, value }) => ({ label, value }))
+]
diff --git a/src/app/learn/content/[...id]/RenderContent.tsx b/src/app/learn/content/[...id]/RenderContent.tsx
new file mode 100644
index 000000000..3fc54f26f
--- /dev/null
+++ b/src/app/learn/content/[...id]/RenderContent.tsx
@@ -0,0 +1,37 @@
+'use client'
+
+import { ExclamationCircleIcon } from '@heroicons/react/24/solid'
+import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote'
+
+import components from '@/components/common/MDXComponents'
+
+const RenderUnderConstruction = () => {
+  return (
+    <div className="flex w-full flex-col items-center justify-center gap-2 pt-10">
+      <ExclamationCircleIcon className="my-4 h-8 w-8 text-gray-500 dark:text-gray-100" />
+
+      <h1 className="font-bold text-gray-600 dark:text-gray-50">
+        เนื้อหาส่วนนี้ยังไม่สมบูรณ์
+      </h1>
+      <p className="text-gray-400 dark:text-gray-100">ขออภัยในความไม่สะดวก</p>
+    </div>
+  )
+}
+
+export const RenderContent = ({
+  content_md
+}: {
+  content_md: MDXRemoteSerializeResult | null
+}) => {
+  if (!content_md) return <RenderUnderConstruction />
+
+  return (
+    <div className="item-center m-6 mx-auto flex flex-col justify-center gap-6">
+      <div className="max-w-5xl">
+        <article className="prose mt-4 w-full max-w-none dark:prose-invert dark:prose-headings:text-white">
+          <MDXRemote {...content_md} components={components} />
+        </article>
+      </div>
+    </div>
+  )
+}
diff --git a/src/app/learn/content/[...id]/page.tsx b/src/app/learn/content/[...id]/page.tsx
new file mode 100644
index 000000000..0d3824bfb
--- /dev/null
+++ b/src/app/learn/content/[...id]/page.tsx
@@ -0,0 +1,58 @@
+import { Suspense } from 'react'
+
+import Link from 'next/link'
+
+import { ArrowLeftIcon } from '@heroicons/react/24/solid'
+
+import { getLearnMaterial } from '@/lib/api/queries/getLearnMaterial'
+
+import { RenderContent } from './RenderContent'
+import { learnLevels } from '../../constants'
+
+const ContentSidebar = ({ id }: { id: string }) => {
+  const path = id.split('_')
+  if (path.length != 3) return <></>
+  const levelLabel = learnLevels.filter(lev => lev.value == path[0])[0].label
+  const label = learnLevels
+    .filter(lev => lev.value == path[0])[0]
+    .sections.filter(sec => sec.value == path[1])[0]
+    .content.filter(con => con.value == path[2])[0].label
+
+  return (
+    <div>
+      <div className="mx-4 hidden w-60 shrink flex-col gap-4 divide-y font-display md:flex">
+        <div className="flex shrink flex-col pt-6 font-display">
+          <Link href="/learn">
+            <span className="group flex items-center gap-1">
+              <ArrowLeftIcon className="h-5 w-5 text-gray-500 group-hover:text-gray-800" />
+              <span className="text-gray-500 group-hover:text-gray-800">
+                exit
+              </span>
+            </span>
+          </Link>
+          <h1 className="mt-5 text-lg"> เนื้อหา{levelLabel} </h1>
+          <h1 className="mt-5 text-2xl"> เรื่อง {label} </h1>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const Page = async ({ params }: { params: { id: string[] } }) => {
+  const learnMaterial = await getLearnMaterial(params.id[0])
+  return (
+    <div className="flex w-auto justify-center">
+      <div className="flex min-h-[calc(100vh-2.5rem)] w-full max-w-7xl flex-col items-center">
+        <div className="flex w-full flex-col items-center pb-6 pt-6" />
+        <div className="flex w-full flex-col md:flex-row">
+          <Suspense>
+            <ContentSidebar id={params.id[0]} />
+            <RenderContent content_md={learnMaterial} />
+          </Suspense>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Page
diff --git a/src/app/learn/page.tsx b/src/app/learn/page.tsx
index 1d5ca449f..73d323500 100644
--- a/src/app/learn/page.tsx
+++ b/src/app/learn/page.tsx
@@ -1,6 +1,9 @@
+import { Suspense } from 'react'
+
 import { Metadata, type NextPage } from 'next'
 
-import Link from 'next/link'
+import { LearnContent } from './LearnContent'
+import { LearnSidebar } from './LearnSidebar'
 
 export const metadata: Metadata = {
   title: 'Learn | programming.in.th'
@@ -8,14 +11,24 @@ export const metadata: Metadata = {
 
 const Learn: NextPage = () => {
   return (
-    <section className="mt-24 flex min-h-screen flex-col items-center text-center">
-      <h1 className="text-2xl font-semibold text-prog-primary-500 sm:text-4xl">
-        Coming Soon...
-      </h1>
-      <Link href="/" className="mt-2 text-prog-gray-500 dark:text-white">
-        กลับหน้าหลัก
-      </Link>
-    </section>
+    <div className="flex w-auto justify-center">
+      <div className="flex min-h-[calc(100vh-2.5rem)] w-full max-w-7xl flex-col items-center">
+        <div className="flex w-full flex-col items-center pb-6 pt-6">
+          <p className="text-3xl font-medium text-gray-500 dark:text-gray-100">
+            Learn
+          </p>
+          <p className="text-md text-gray-500 dark:text-gray-300">
+            Learn with programing.in.th
+          </p>
+        </div>
+        <div className="flex w-full flex-col md:flex-row">
+          <Suspense>
+            <LearnSidebar />
+            <LearnContent />
+          </Suspense>
+        </div>
+      </div>
+    </div>
   )
 }
 
diff --git a/src/lib/api/queries/getLearnMaterial.ts b/src/lib/api/queries/getLearnMaterial.ts
new file mode 100644
index 000000000..1c047a0cd
--- /dev/null
+++ b/src/lib/api/queries/getLearnMaterial.ts
@@ -0,0 +1,34 @@
+import 'server-only'
+
+import { notFound } from 'next/navigation'
+
+import { MDXRemoteSerializeResult } from 'next-mdx-remote'
+
+import { mdxToHtml } from '@/lib/renderMarkdown'
+
+/**
+ * Get learn material (md file), only used in server components
+ *
+ * @throws 404 Error
+ */
+export async function getLearnMaterial(
+  id: string
+): Promise<MDXRemoteSerializeResult | null> {
+  if (!id) return notFound()
+
+  let solution = null
+
+  try {
+    const solutionRes = await fetch(
+      `${process.env.NEXT_PUBLIC_AWS_URL}/tutorial/${id.replaceAll('_', '/')}.md`
+    )
+
+    if (solutionRes.status === 200) {
+      const raw = await solutionRes.text()
+      solution = await mdxToHtml(raw)
+    }
+  } catch (error) {
+    console.log(error)
+  }
+  return solution
+}