diff --git a/src/components/FAQs/FAQs.tsx b/src/components/FAQs/FAQs.tsx
index b80aae3c9..9da9ef96a 100644
--- a/src/components/FAQs/FAQs.tsx
+++ b/src/components/FAQs/FAQs.tsx
@@ -9,9 +9,6 @@ type FAQsProps = {
 
 export function FAQs(props: FAQsProps) {
   const { faqs } = props;
-  if (faqs.length === 0) {
-    return null;
-  }
 
   const [activeQuestionIndex, setActiveQuestionIndex] = useState(0);
 
@@ -25,35 +22,18 @@ export function FAQs(props: FAQsProps) {
         </div>
 
         <div className="flex flex-col gap-1 pb-14">
-          {faqs.map((faq, questionIndex) => {
-            const isTextDescription =
-              typeof faq?.description === 'string' &&
-              faq?.description?.length > 0;
-
-            return (
-              <Question
-                key={faq._id}
-                isActive={questionIndex === activeQuestionIndex}
-                question={faq.title}
-                onClick={() => setActiveQuestionIndex(questionIndex)}
-              >
-                <div
-                  className="text-md rounded-br-md rounded-bl-md border-t border-t-gray-300 bg-gray-100 p-2 text-left text-sm leading-relaxed text-gray-800 sm:p-4 sm:text-base [&>p:not(:last-child)]:mb-3 [&>p>a]:text-blue-700 [&>p>a]:underline"
-                  {...(isTextDescription
-                    ? {
-                        dangerouslySetInnerHTML: {
-                          __html: faq.description,
-                        },
-                      }
-                    : {})}
-                >
-                  {!isTextDescription
-                    ? guideRenderer.render(faq.description)
-                    : null}
-                </div>
-              </Question>
-            );
-          })}
+          {faqs.map((faq, questionIndex) => (
+            <Question
+              key={faq._id}
+              isActive={questionIndex === activeQuestionIndex}
+              question={faq.title}
+              onClick={() => setActiveQuestionIndex(questionIndex)}
+            >
+              <div className="text-md rounded-br-md rounded-bl-md border-t border-t-gray-300 bg-gray-100 p-2 text-left text-sm leading-relaxed text-gray-800 sm:p-4 sm:text-base [&>p:not(:last-child)]:mb-3 [&>p>a]:text-blue-700 [&>p>a]:underline">
+                {guideRenderer.render(faq.description)}
+              </div>
+            </Question>
+          ))}
         </div>
       </div>
     </div>
diff --git a/src/pages/[roadmapId]/courses.astro b/src/pages/[roadmapId]/courses.astro
index 028279fdd..17b4514a4 100644
--- a/src/pages/[roadmapId]/courses.astro
+++ b/src/pages/[roadmapId]/courses.astro
@@ -1,20 +1,19 @@
----
+<!-- ---
 import RoadmapHeader from '../../components/RoadmapHeader.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
+import { type RoadmapFrontmatter, getRoadmapIds } from '../../lib/roadmap';
+import CourseStep from '../../components/courses/CourseStep.astro';
+import Milestone from '../../components/courses/Milestone.astro';
 import { getProjectsByRoadmapId } from '../../lib/project';
-import {
-  listOfficialRoadmaps,
-  officialRoadmapDetails,
-} from '../../queries/official-roadmap';
 
 export const prerender = true;
 
 export async function getStaticPaths() {
-  const roadmaps = await listOfficialRoadmaps();
+  const roadmapIds = await getRoadmapIds();
 
-  return roadmaps.map((roadmap) => ({
-    params: { roadmapId: roadmap.slug },
+  return roadmapIds.map((roadmapId) => ({
+    params: { roadmapId },
   }));
 }
 
@@ -23,14 +22,15 @@ interface Params extends Record<string, string | undefined> {
 }
 
 const { roadmapId } = Astro.params as Params;
-const roadmapData = await officialRoadmapDetails(roadmapId);
-if (!roadmapData) {
-  return Astro.redirect('/404', 404);
-}
+const roadmapFile = await import(
+  `../../data/roadmaps/${roadmapId}/${roadmapId}.md`
+);
+
+const roadmapData = roadmapFile.frontmatter as RoadmapFrontmatter;
 
 // update og for projects
 const ogImageUrl =
-  roadmapData?.openGraph?.image ||
+  roadmapData?.seo?.ogImageUrl ||
   getOpenGraphImageUrl({
     group: 'roadmap',
     resourceId: roadmapId,
@@ -43,26 +43,23 @@ const descriptionNoun: Record<string, string> = {
   'Product Manager': 'Product Management',
 };
 
-const title = `${roadmapData?.title.card} Courses`;
-const description = `Premium courses to help you master ${descriptionNoun[roadmapData?.title.card] || roadmapData?.title.card}`;
+const title = `${roadmapData.briefTitle} Courses`;
+const description = `Premium courses to help you master ${descriptionNoun[roadmapData.briefTitle] || roadmapData.briefTitle}`;
 
-const seoTitle = `${roadmapData?.title.card} Courses`;
+const seoTitle = `${roadmapData.briefTitle} Courses`;
 const nounTitle =
-  descriptionNoun[roadmapData.title.card] || roadmapData.title.card;
+  descriptionNoun[roadmapData.briefTitle] || roadmapData.briefTitle;
 const seoDescription = `Seeking ${nounTitle.toLowerCase()} courses to enhance your skills? Explore our top free and paid courses to help you become a ${nounTitle} expert!`;
 
 const projects = await getProjectsByRoadmapId(roadmapId);
 const courses = roadmapData.courses || [];
-const question = roadmapData?.questions?.find(
-  (question) => question.type === 'main',
-);
 ---
 
 <BaseLayout
   permalink={`/${roadmapId}`}
   title={seoTitle}
   description={seoDescription}
-  briefTitle={roadmapData.title.card}
+  briefTitle={roadmapData.briefTitle}
   ogImageUrl={ogImageUrl}
   keywords={roadmapData.seo.keywords}
   resourceId={roadmapId}
@@ -75,7 +72,10 @@ const question = roadmapData?.questions?.find(
       description={description}
       partner={roadmapData.partner}
       roadmapId={roadmapId}
-      isForkable={true}
+      hasTopics={roadmapData.hasTopics}
+      isUpcoming={roadmapData.isUpcoming}
+      isForkable={roadmapData.isForkable}
+      question={roadmapData.question}
       coursesCount={courses.length}
       projectCount={projects.length}
       activeTab='courses'
@@ -163,4 +163,4 @@ const question = roadmapData?.questions?.find(
       </div>
     </div>
   </div>
-</BaseLayout>
+</BaseLayout> -->
diff --git a/src/pages/[roadmapId]/index.astro b/src/pages/[roadmapId]/index.astro
index 40356bbbd..ecf9988b2 100644
--- a/src/pages/[roadmapId]/index.astro
+++ b/src/pages/[roadmapId]/index.astro
@@ -83,7 +83,7 @@ if (faqs.length) {
 }
 
 const projects = await getProjectsByRoadmapId(roadmapId);
-const courses = roadmapData.courses || [];
+// const courses = roadmapData.courses || [];
 ---
 
 <BaseLayout
@@ -123,7 +123,7 @@ const courses = roadmapData.courses || [];
       roadmapId={roadmapId}
       isForkable={true}
       projectCount={projects.length}
-      coursesCount={courses.length}
+      coursesCount={0}
       hasAIChat={true}
     />
 
diff --git a/src/queries/official-roadmap.ts b/src/queries/official-roadmap.ts
index 867ba3d94..89a2138c1 100644
--- a/src/queries/official-roadmap.ts
+++ b/src/queries/official-roadmap.ts
@@ -19,21 +19,8 @@ export type OfficialRoadmapQuestion = {
   description: any;
 };
 
-export type OfficialRoadmapCourse = {
-  _id: string;
-  title: string;
-  description: string;
-  link: string;
-  instructor: {
-    name: string;
-    image: string;
-    title: string;
-  };
-  features: string[];
-};
-
 export interface OfficialRoadmapDocument {
-  _id?: string;
+  _id: string;
   order: number;
 
   title: {
@@ -43,12 +30,12 @@ export interface OfficialRoadmapDocument {
   description: string;
 
   slug: string;
-  nodes: any[];
-  edges: any[];
+  nodes: Node[];
+  edges: Edge[];
 
   draft: {
-    nodes: any[];
-    edges: any[];
+    nodes: Node[];
+    edges: Edge[];
   };
 
   seo: {
@@ -72,7 +59,6 @@ export interface OfficialRoadmapDocument {
 
   questions?: OfficialRoadmapQuestion[];
   relatedRoadmaps?: string[];
-  courses?: OfficialRoadmapCourse[];
 
   createdAt: Date;
   updatedAt: Date;