diff --git a/Frontend/docs/home.md b/Frontend/docs/home.mdx
similarity index 91%
rename from Frontend/docs/home.md
rename to Frontend/docs/home.mdx
index 0b0f139..80fdda7 100644
--- a/Frontend/docs/home.md
+++ b/Frontend/docs/home.mdx
@@ -5,4 +5,4 @@ summary: 'utinam delicata nominavi ornare eirmod pharetra decore interesset nece
 ---
 
 # bob
-HELLO JOHN
\ No newline at end of file
+HELLO **JOHN**
\ No newline at end of file
diff --git a/Frontend/package.json b/Frontend/package.json
index d926b6b..2ee7723 100644
--- a/Frontend/package.json
+++ b/Frontend/package.json
@@ -38,6 +38,7 @@
     "react-dom": "^18",
     "react-hook-form": "^7.51.3",
     "remark-gfm": "^4.0.0",
+    "remote-mdx": "^0.0.4",
     "restfulmc-lib": "^1.1.3",
     "shadcn-ui": "0.8.0",
     "sharp": "^0.33.3",
diff --git a/Frontend/src/app/(pages)/docs/[[...slug]]/page.tsx b/Frontend/src/app/(pages)/docs/[[...slug]]/page.tsx
index 8cb2d3b..3336664 100644
--- a/Frontend/src/app/(pages)/docs/[[...slug]]/page.tsx
+++ b/Frontend/src/app/(pages)/docs/[[...slug]]/page.tsx
@@ -11,6 +11,7 @@ import {
     BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
 import { capitalize } from "@/lib/stringUtils";
+import { CustomMDX } from "@/mdx-components";
 
 /**
  * The page to display content
@@ -59,6 +60,9 @@ const ContentPage = ({ params }: PageProps): ReactElement => {
                     )}
                 </BreadcrumbList>
             </Breadcrumb>
+
+            {/* Content */}
+            <CustomMDX source={content.content} />
         </main>
     );
 };
diff --git a/Frontend/src/app/(pages)/docs/layout.tsx b/Frontend/src/app/(pages)/docs/layout.tsx
index 017c089..6385cd7 100644
--- a/Frontend/src/app/(pages)/docs/layout.tsx
+++ b/Frontend/src/app/(pages)/docs/layout.tsx
@@ -12,7 +12,7 @@ const DocumentationLayout = ({
 }: Readonly<{
     children: ReactNode;
 }>): ReactElement => (
-    <section className="h-screen flex justify-center items-center">
+    <section className="h-screen pt-64 flex justify-center">
         <div className="flex gap-10">
             <Sidebar />
             {children}
diff --git a/Frontend/src/mdx-components.tsx b/Frontend/src/mdx-components.tsx
index 107f5c3..eece960 100644
--- a/Frontend/src/mdx-components.tsx
+++ b/Frontend/src/mdx-components.tsx
@@ -1,10 +1,20 @@
-import type { MDXComponents } from "mdx/types";
+import { ReactElement, ReactNode } from "react";
+import { MDXRemote } from "remote-mdx/rsc";
 
-export const useMDXComponents = (components: MDXComponents): MDXComponents => {
-    return {
-        h1: ({ children }) => (
-            <h1 className="text-6xl font-semibold">{children}</h1>
-        ),
-        ...components,
-    };
+const components: any = {
+    h1: ({ children }: { children: ReactNode }) => (
+        <h1 className="text-3xl">{children}</h1>
+    ),
+};
+
+export const CustomMDX = (props: any): ReactElement => {
+    return (
+        <MDXRemote
+            {...props}
+            components={{
+                ...components,
+                ...(props.components || {}),
+            }}
+        />
+    );
 };
diff --git a/Frontend/tailwind.config.ts b/Frontend/tailwind.config.ts
index b6750b8..a894293 100644
--- a/Frontend/tailwind.config.ts
+++ b/Frontend/tailwind.config.ts
@@ -4,7 +4,7 @@ const { screens } = require("tailwindcss/defaultTheme");
 
 const config = {
     darkMode: ["class"],
-    content: ["./src/app/**/*.{ts,tsx,mdx}"],
+    content: ["./src/app/**/*.{ts,tsx}"],
     theme: {
         container: {
             center: true,