diff --git a/src/app/courses/course-selection.tsx b/src/app/courses/course-selection.tsx
new file mode 100644
index 0000000..e6e95b3
--- /dev/null
+++ b/src/app/courses/course-selection.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import { type FormEvent, useState } from "react";
+
+export default function CourseSelection() {
+  const [selectedLanguage, setSelectedLanguage] = useState("");
+
+  const handleLanguageChange = (
+    event: React.ChangeEvent<HTMLSelectElement>,
+  ) => {
+    setSelectedLanguage(event.target.value);
+  };
+
+  const handleSubmit = (event: FormEvent) => {
+    event.preventDefault();
+    // Handle form submission logic here, e.g., send selectedLanguage to the server
+    console.log("Selected language:", selectedLanguage);
+  };
+
+  return (
+    <form className="flex flex-col gap-y-2" onSubmit={handleSubmit}>
+      <label htmlFor="course-select">Select a language:</label>
+      <select
+        id="course-select"
+        name="course"
+        value={selectedLanguage}
+        onChange={handleLanguageChange}
+        className="border"
+      >
+        <option value="">Select...</option>
+        <option value="Japanese">Japanese 🇯🇵</option>
+        <option value="French">French 🇫🇷</option>
+      </select>
+      <button type="submit" className="border">
+        Submit
+      </button>
+    </form>
+  );
+}
diff --git a/src/app/courses/page.tsx b/src/app/courses/page.tsx
new file mode 100644
index 0000000..d4eaa9e
--- /dev/null
+++ b/src/app/courses/page.tsx
@@ -0,0 +1,11 @@
+import CourseSelection from "~/app/courses/course-selection";
+
+export default async function Course() {
+  return (
+    <main className="">
+      <h1 className="text-2xl font-bold">Course</h1>
+      <h2 className="text-lg font-medium">Available languages</h2>
+      <CourseSelection />
+    </main>
+  );
+}
diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx
new file mode 100644
index 0000000..60b81b1
--- /dev/null
+++ b/src/app/home/page.tsx
@@ -0,0 +1,7 @@
+export default async function Home() {
+  return (
+    <main className="">
+      <h1 className="text-2xl font-bold">Home</h1>
+    </main>
+  );
+}
diff --git a/src/app/lesson/page.tsx b/src/app/lesson/page.tsx
new file mode 100644
index 0000000..0c025ed
--- /dev/null
+++ b/src/app/lesson/page.tsx
@@ -0,0 +1,7 @@
+export default async function Lesson() {
+  return (
+    <main className="">
+      <h1 className="text-2xl font-bold">Lesson</h1>
+    </main>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 366d442..69c1a65 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,7 +1,7 @@
 export default async function Landing() {
   return (
     <main className="">
-      <h1>Landing</h1>
+      <h1 className="text-2xl font-bold">Landing</h1>
     </main>
   );
 }
diff --git a/src/app/practice/page.tsx b/src/app/practice/page.tsx
new file mode 100644
index 0000000..bb34009
--- /dev/null
+++ b/src/app/practice/page.tsx
@@ -0,0 +1,7 @@
+export default async function Practice() {
+  return (
+    <main className="">
+      <h1 className="text-2xl font-bold">Practice</h1>
+    </main>
+  );
+}
diff --git a/src/app/profile/[username]/page.tsx b/src/app/profile/[username]/page.tsx
new file mode 100644
index 0000000..e282bd0
--- /dev/null
+++ b/src/app/profile/[username]/page.tsx
@@ -0,0 +1,12 @@
+import { currentUser } from "@clerk/nextjs";
+
+export default async function Profile() {
+  const user = await currentUser();
+
+  return (
+    <main className="">
+      <h1 className="text-2xl font-bold">Profile</h1>
+      <pre>{JSON.stringify(user, undefined, 2)}</pre>
+    </main>
+  );
+}
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
new file mode 100644
index 0000000..e282bd0
--- /dev/null
+++ b/src/app/profile/page.tsx
@@ -0,0 +1,12 @@
+import { currentUser } from "@clerk/nextjs";
+
+export default async function Profile() {
+  const user = await currentUser();
+
+  return (
+    <main className="">
+      <h1 className="text-2xl font-bold">Profile</h1>
+      <pre>{JSON.stringify(user, undefined, 2)}</pre>
+    </main>
+  );
+}
diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx
new file mode 100644
index 0000000..106083c
--- /dev/null
+++ b/src/app/settings/page.tsx
@@ -0,0 +1,7 @@
+export default async function Settings() {
+  return (
+    <main className="">
+      <h1 className="text-2xl font-bold">Settings</h1>
+    </main>
+  );
+}