diff --git a/web/app/(pages)/topics/ls/page.tsx b/web/app/(pages)/topics/ls/page.tsx
new file mode 100644
index 00000000..f9eb82cf
--- /dev/null
+++ b/web/app/(pages)/topics/ls/page.tsx
@@ -0,0 +1,5 @@
+import { TopicLearningStateRoute } from "@/components/routes/topics/learning-state/TopicLearningStateRoute"
+
+export default function TopicLearningStatePage() {
+	return <TopicLearningStateRoute />
+}
diff --git a/web/app/(pages)/topics/page.tsx b/web/app/(pages)/topics/page.tsx
new file mode 100644
index 00000000..282cb668
--- /dev/null
+++ b/web/app/(pages)/topics/page.tsx
@@ -0,0 +1,5 @@
+import { TopicRoute } from "@/components/routes/topics/TopicRoute"
+
+export default function TopicPage() {
+	return <TopicRoute />
+}
diff --git a/web/components/routes/topics/TopicRoute.tsx b/web/components/routes/topics/TopicRoute.tsx
new file mode 100644
index 00000000..4a951694
--- /dev/null
+++ b/web/components/routes/topics/TopicRoute.tsx
@@ -0,0 +1,5 @@
+"use client"
+
+export const TopicRoute: React.FC = () => {
+	return <div>TopicRoute</div>
+}
diff --git a/web/components/routes/topics/learning-state/TopicLearningStateRoute.tsx b/web/components/routes/topics/learning-state/TopicLearningStateRoute.tsx
new file mode 100644
index 00000000..b3d6f0d5
--- /dev/null
+++ b/web/components/routes/topics/learning-state/TopicLearningStateRoute.tsx
@@ -0,0 +1,12 @@
+"use client"
+
+import { LEARNING_STATES } from "@/lib/constants"
+import { parseAsStringLiteral, useQueryState } from "nuqs"
+
+export const TopicLearningStateRoute: React.FC = () => {
+	const [learningState, setLearningState] = useQueryState(
+		"state",
+		parseAsStringLiteral(LEARNING_STATES.map(ls => ls.value))
+	)
+	return <div>TopicLearningStateRoute</div>
+}