diff --git a/bun.lockb b/bun.lockb
index 6babaab..daef6a4 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/next.config.js b/next.config.js
index 767719f..7b6e466 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,4 +1,10 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {}
+const withMDX = require("@next/mdx")();
 
-module.exports = nextConfig
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // Configure `pageExtensions` to include MDX files
+  pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"],
+  // Optionally, add any other Next.js config below
+};
+
+module.exports = withMDX(nextConfig);
diff --git a/package.json b/package.json
index 322464d..69cbcd6 100644
--- a/package.json
+++ b/package.json
@@ -9,26 +9,31 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@mdx-js/loader": "^3.0.0",
+    "@mdx-js/react": "^3.0.0",
+    "@n8n/chat": "^0.5.2",
+    "@next/mdx": "^14.0.4",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-slot": "^1.0.2",
+    "@types/mdx": "^2.0.10",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "framer-motion": "^10.16.4",
-    "next": "14.0.0",
+    "next": "latest",
     "react": "^18",
     "react-dom": "^18",
     "tailwind-merge": "^1.14.0",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^10",
+    "eslint": "^8",
+    "eslint-config-next": "14.0.0",
     "postcss": "^8",
     "tailwindcss": "^3",
-    "eslint": "^8",
-    "eslint-config-next": "14.0.0"
+    "typescript": "^5"
   }
 }
diff --git a/src/app/(home)/header.tsx b/src/app/(home)/header.tsx
deleted file mode 100644
index 9601e54..0000000
--- a/src/app/(home)/header.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-"use client";
-import Image from "next/image";
-import profile_img from "./profile.png";
-import { motion } from "framer-motion";
-
-export function Header() {
-  return (
-    <motion.div
-      initial={{ opacity: 0, y: -100 }}
-      animate={{ opacity: 1, y: 0 }}
-    >
-      <Profile />
-    </motion.div>
-  );
-}
-
-function Profile() {
-  return (
-    <div className="gap-2 items-center justify-center flex">
-      <Image
-        className="rounded-full"
-        alt="profile image"
-        src={profile_img}
-        width={30}
-        height={30}
-      />
-      <h1 className="text-2xl font-bold text-center">./raj</h1>
-    </div>
-  );
-}
diff --git a/src/app/(home)/profile.png b/src/app/(home)/profile.png
deleted file mode 100644
index 0ea27c6..0000000
Binary files a/src/app/(home)/profile.png and /dev/null differ
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
deleted file mode 100644
index 718d6fe..0000000
Binary files a/src/app/favicon.ico and /dev/null differ
diff --git a/src/app/globals.css b/src/app/globals.css
deleted file mode 100644
index e4e2494..0000000
--- a/src/app/globals.css
+++ /dev/null
@@ -1,76 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
- 
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 20 14.3% 4.1%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 20 14.3% 4.1%;
- 
-    --popover: 0 0% 100%;
-    --popover-foreground: 20 14.3% 4.1%;
- 
-    --primary: 24 9.8% 10%;
-    --primary-foreground: 60 9.1% 97.8%;
- 
-    --secondary: 60 4.8% 95.9%;
-    --secondary-foreground: 24 9.8% 10%;
- 
-    --muted: 60 4.8% 95.9%;
-    --muted-foreground: 25 5.3% 44.7%;
- 
-    --accent: 60 4.8% 95.9%;
-    --accent-foreground: 24 9.8% 10%;
- 
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 60 9.1% 97.8%;
-
-    --border: 20 5.9% 90%;
-    --input: 20 5.9% 90%;
-    --ring: 20 14.3% 4.1%;
- 
-    --radius: 0.5rem;
-  }
- 
-  .dark {
-    --background: 20 14.3% 4.1%;
-    --foreground: 60 9.1% 97.8%;
- 
-    --card: 20 14.3% 4.1%;
-    --card-foreground: 60 9.1% 97.8%;
- 
-    --popover: 20 14.3% 4.1%;
-    --popover-foreground: 60 9.1% 97.8%;
- 
-    --primary: 60 9.1% 97.8%;
-    --primary-foreground: 24 9.8% 10%;
- 
-    --secondary: 12 6.5% 15.1%;
-    --secondary-foreground: 60 9.1% 97.8%;
- 
-    --muted: 12 6.5% 15.1%;
-    --muted-foreground: 24 5.4% 63.9%;
- 
-    --accent: 12 6.5% 15.1%;
-    --accent-foreground: 60 9.1% 97.8%;
- 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 60 9.1% 97.8%;
- 
-    --border: 12 6.5% 15.1%;
-    --input: 12 6.5% 15.1%;
-    --ring: 24 5.7% 82.9%;
-  }
-}
- 
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index b470a32..e69de29 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,22 +0,0 @@
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import "./globals.css";
-
-const inter = Inter({ subsets: ["latin"] });
-
-export const metadata: Metadata = {
-  title: "./raj",
-  description: "My home dashboard",
-};
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
-    </html>
-  );
-}
diff --git a/src/app/page.tsx b/src/app/page.tsx
deleted file mode 100644
index 106f2d6..0000000
--- a/src/app/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Header } from "./(home)/header";
-
-export default function Home() {
-  return (
-    <main className="flex items-center h-screen justify-center">
-      <Header />
-    </main>
-  );
-}
diff --git a/src/mdx-components.tsx b/src/mdx-components.tsx
new file mode 100644
index 0000000..9ff7229
--- /dev/null
+++ b/src/mdx-components.tsx
@@ -0,0 +1,7 @@
+import type { MDXComponents } from "mdx/types";
+
+export function useMDXComponents(components: MDXComponents): MDXComponents {
+  return {
+    ...components,
+  };
+}