diff --git a/app/about/resume/page.tsx b/app/about/resume/page.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/app/content.mdx b/app/content.mdx
new file mode 100644
index 0000000..ad2fdac
--- /dev/null
+++ b/app/content.mdx
@@ -0,0 +1,21 @@
+# Mikayla Dobson | Software Engineer
+
+Software design at the confluence of efficiency, ingenuity, and artistry.
+
+## Why do you want me on your team?
+
+Here are some things I've provided for my teams in the past:
+
+- Connecting the dots
+    - My strength lies in the big picture. My background as a composer of classical music has given me a lasting sense
+    for how to assemble the pieces of a project into a cohesive whole.
+    - As a software engineer, this means:
+        - I'm comfortable living in the world between the front-end and back-end
+        - I love solving emergent problems as a project's stack is expanding
+
+---
+
+## Want to know more?
+
+You're in the right place! This site is the best place to learn about the work I've done, what I know, and what I've
+done with the knowledge I have.
diff --git a/app/layout.tsx b/app/layout.tsx
index 71b3fbf..f6d39b3 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,11 +1,13 @@
-import './globals.css'
+import Navbar from '@/components/Navbar'
+import { MDXProvider } from '@mdx-js/react'
 import { Inter } from 'next/font/google'
+import './globals.css'
 
 const inter = Inter({ subsets: ['latin'] })
 
 export const metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
+  title: 'Mikayla Dobson | Software Engineer',
+  description: 'Integrating artistry and technology to create beautiful software',
 }
 
 export default function RootLayout({
@@ -15,7 +17,14 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <MDXProvider /* components={components} */>
+        <body className={inter.className}>
+          <>
+          <Navbar />
+          {children}
+          </>
+        </body>
+      </MDXProvider>
     </html>
   )
 }
diff --git a/app/page.tsx b/app/page.tsx
index c86f13b..99539c6 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,7 +1,9 @@
+import Content from "./content.mdx"
+
 export default function Home() {
   return (
     <main>
-      <h1>Hi am Mikayla</h1>
+      <Content />
     </main>
   )
 }
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
new file mode 100644
index 0000000..1240fa4
--- /dev/null
+++ b/components/Navbar.tsx
@@ -0,0 +1,8 @@
+export default function Navbar() {
+    return (
+        <div id="navbar" className="w-full h-auto flex flex-nowrap justify-between px-8 py-4 bg-black text-white">
+            <h1>Mikayla Dobson</h1>
+            <button>Button</button>
+        </div>
+    )
+}
diff --git a/components/SiteTree.tsx b/components/SiteTree.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/components/mdx/index.tsx b/components/mdx/index.tsx
new file mode 100644
index 0000000..c3ef96f
--- /dev/null
+++ b/components/mdx/index.tsx
@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+
+export const P1TAG = ({ children }: { children: ReactNode }) => (
+    <h1>{children}</h1>
+)
