diff --git a/src/app/api/paths/[pathSlug]/[topicSlug]/route.ts b/src/app/api/paths/[pathSlug]/[topicSlug]/route.ts
new file mode 100644
index 0000000..97c31cf
--- /dev/null
+++ b/src/app/api/paths/[pathSlug]/[topicSlug]/route.ts
@@ -0,0 +1,11 @@
+import { getTopic } from "@/data";
+
+export async function GET(req: Request, { params }: { params: Promise<{ pathSlug: string; topicSlug: string }> }) {
+    const { pathSlug, topicSlug } = await params
+
+    const topics = getTopic(pathSlug, topicSlug)
+
+    if (!topics) return Response.json(false)
+
+    return Response.json(topics)
+}
\ No newline at end of file
diff --git a/src/app/api/paths/[pathSlug]/route.ts b/src/app/api/paths/[pathSlug]/route.ts
new file mode 100644
index 0000000..3139068
--- /dev/null
+++ b/src/app/api/paths/[pathSlug]/route.ts
@@ -0,0 +1,14 @@
+import { getPath } from "@/data"
+
+
+export async function GET(req: Request, 
+    { params } : {params: Promise<{pathSlug: string}>}) {
+    
+    const { pathSlug } = await params
+
+    const paths = getPath(pathSlug)
+
+    if (!paths) return Response.json(false)
+
+    return Response.json(paths)
+}
\ No newline at end of file
diff --git a/src/app/api/paths/route.ts b/src/app/api/paths/route.ts
new file mode 100644
index 0000000..d3d3af3
--- /dev/null
+++ b/src/app/api/paths/route.ts
@@ -0,0 +1,6 @@
+import { paths } from "@/data";
+
+export async function GET() {
+
+    return Response.json(paths)
+}
diff --git a/src/app/paths/[pathSlug]/[topicSlug]/page.tsx b/src/app/paths/[pathSlug]/[topicSlug]/page.tsx
index ea2b90d..7dfd1bb 100644
--- a/src/app/paths/[pathSlug]/[topicSlug]/page.tsx
+++ b/src/app/paths/[pathSlug]/[topicSlug]/page.tsx
@@ -1,6 +1,6 @@
 import { notFound } from "next/navigation";
 import Link from "next/link";
-import { paths, getTopic } from "@/data";
+import { paths, getTopic, Path, Topic } from "@/data";
 import ReactMarkdown from "react-markdown";
 
 export function generateStaticParams() {
@@ -31,7 +31,8 @@ export default async function TopicPage({
   params: Promise<{ pathSlug: string; topicSlug: string }>;
 }) {
   const { pathSlug, topicSlug } = await params;
-  const result = getTopic(pathSlug, topicSlug);
+  const response = await fetch(`http://localhost:3000/api/paths/${pathSlug}/${topicSlug}`) 
+  const result = await response.json() as { path: Path; topic: Topic } | undefined;
   if (!result) notFound();
 
   const { path, topic } = result;
diff --git a/src/app/paths/[pathSlug]/page.tsx b/src/app/paths/[pathSlug]/page.tsx
index 3214150..a289481 100644
--- a/src/app/paths/[pathSlug]/page.tsx
+++ b/src/app/paths/[pathSlug]/page.tsx
@@ -27,7 +27,10 @@ export default async function PathPage({
   params: Promise<{ pathSlug: string }>;
 }) {
   const { pathSlug } = await params;
-  const path = getPath(pathSlug);
+
+  const response = await fetch(`http://localhost:3000/api/paths/${pathSlug}`)
+  const path = await response.json()
+
   if (!path) notFound();
 
   const sorted = [...path.topics].sort((a, b) => a.order - b.order);
diff --git a/src/app/paths/page.tsx b/src/app/paths/page.tsx
index e333a13..79dfabc 100644
--- a/src/app/paths/page.tsx
+++ b/src/app/paths/page.tsx
@@ -1,5 +1,4 @@
 import PathsClient from "@/components/PathsClient";
-import { paths } from "@/data";
 
 
 export const metadata = {
@@ -7,7 +6,11 @@ export const metadata = {
   description: "Explore all web development learning paths.",
 };
 
-export default function PathsPage() {
+export default async function PathsPage() {
+
+  const response = await fetch("http://localhost:3000/api/paths");
+  const paths = await response.json()
+
   return (
     <>
       <div className="page-header">