diff --git a/src/best-practices/frontend-performance/content/minimize-iframes.md b/src/best-practices/frontend-performance/content/minimize-iframes.md
new file mode 100644
index 000000000..9a3ffca75
--- /dev/null
+++ b/src/best-practices/frontend-performance/content/minimize-iframes.md
@@ -0,0 +1 @@
+# Sup
\ No newline at end of file
diff --git a/src/lib/best-practice-topic.ts b/src/lib/best-practice-topic.ts
index 208e8c17d..13cced97e 100644
--- a/src/lib/best-practice-topic.ts
+++ b/src/lib/best-practice-topic.ts
@@ -15,7 +15,7 @@ function generateTopicUrl(filePath: string) {
     .replace(/\.md$/, ''); // Remove `.md` from the end of file
 }
 
-interface TopicFileType {
+export interface BestPracticeTopicFileType {
   url: string;
   heading: string;
   file: MarkdownFileType;
@@ -27,12 +27,12 @@ interface TopicFileType {
  * Gets all the topic files available for all the best practices
  * @returns Hashmap containing the topic slug and the topic file content
  */
-async function getTopicFiles(): Promise<Record<string, TopicFileType>> {
+export async function getAllBestPracticeTopicFiles(): Promise<Record<string, BestPracticeTopicFileType>> {
   const contentFiles = await import.meta.glob<string>('/src/best-practices/*/content/**/*.md', {
     eager: true,
   });
 
-  const mapping: Record<string, TopicFileType> = {};
+  const mapping: Record<string, BestPracticeTopicFileType> = {};
 
   for (let filePath of Object.keys(contentFiles)) {
     const fileContent: MarkdownFileType = contentFiles[filePath] as any;
@@ -63,8 +63,8 @@ async function getTopicFiles(): Promise<Record<string, TopicFileType>> {
  *
  * @returns Promise<TopicFileType[]>
  */
-export async function getTopicsByBestPracticeId(bestPracticeId: string): Promise<TopicFileType[]> {
-  const topicFileMapping = await getTopicFiles();
+export async function getTopicsByBestPracticeId(bestPracticeId: string): Promise<BestPracticeTopicFileType[]> {
+  const topicFileMapping = await getAllBestPracticeTopicFiles();
   const allTopics = Object.values(topicFileMapping);
 
   return allTopics.filter((topic) => topic.bestPracticeId === bestPracticeId);
diff --git a/src/pages/best-practices/[bestPracticeId]/[...topicId].astro b/src/pages/best-practices/[bestPracticeId]/[...topicId].astro
new file mode 100644
index 000000000..a06c049f1
--- /dev/null
+++ b/src/pages/best-practices/[bestPracticeId]/[...topicId].astro
@@ -0,0 +1,40 @@
+---
+import BaseLayout from '../../../layouts/BaseLayout.astro';
+import { BestPracticeTopicFileType, getAllBestPracticeTopicFiles } from '../../../lib/best-practice-topic';
+
+export async function getStaticPaths() {
+  const topicPathMapping = await getAllBestPracticeTopicFiles();
+
+  return Object.keys(topicPathMapping).map((topicSlug) => {
+    const topicDetails = topicPathMapping[topicSlug];
+    const bestPracticeId = topicDetails.bestPracticeId;
+    const topicId = topicSlug.replace(`/${bestPracticeId}/`, '');
+
+    return {
+      params: {
+        topicId,
+        bestPracticeId,
+      },
+      props: topicDetails,
+    };
+  });
+}
+
+const { topicId } = Astro.params;
+const { file, bestPracticeId, bestPractice, heading } = Astro.props as BestPracticeTopicFileType;
+---
+
+<BaseLayout
+  title={`${heading} - roadmap.sh`}
+  description={`Free resources to learn ${heading} in ${bestPractice.featuredTitle}. Everything you need to know about ${heading} and how it realtes to ${bestPractice.featuredTitle}.`}
+  noIndex={true}
+  permalink={`/${topicId}`}
+>
+  <div class='bg-gray-50'>
+    <div class='container pb-16 prose prose-p:mt-0 prose-h1:mb-4 prose-h2:mb-3 prose-h2:mt-0'>
+      <main id='main-content'>
+        <file.Content />
+      </main>
+    </div>
+  </div>
+</BaseLayout>