diff --git a/next.config.mjs b/next.config.mjs
index f3abdd7..63a8d9f 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,15 +1,15 @@
-import nextMDX from '@next/mdx'
-import remarkGfm from 'remark-gfm'
-import rehypePrism from '@mapbox/rehype-prism'
+import nextMDX from '@next/mdx';
+import remarkGfm from 'remark-gfm';
+import rehypePrism from '@mapbox/rehype-prism';
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  pageExtensions: ['jsx', 'mdx'],
+  pageExtensions: ['jsx', 'mdx', 'js'],
   reactStrictMode: true,
   experimental: {
-    scrollRestoration: true,
+    // scrollRestoration: true, // Comment out or remove this line
   },
-}
+};
 
 const withMDX = nextMDX({
   extension: /\.mdx?$/,
@@ -17,6 +17,6 @@ const withMDX = nextMDX({
     remarkPlugins: [remarkGfm],
     rehypePlugins: [rehypePrism],
   },
-})
+});
 
-export default withMDX(nextConfig)
+export default withMDX(nextConfig);
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 1e1c817..b1a2167 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,7 @@
         "@next/mdx": "^13.0.2",
         "@tailwindcss/typography": "^0.5.4",
         "autoprefixer": "^10.4.12",
-        "axios": "^1.2.0",
+        "axios": "^1.7.2",
         "clsx": "^2.0.0",
         "fast-glob": "^3.2.11",
         "feed": "^4.2.2",
@@ -1363,11 +1363,11 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz",
-      "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
+      "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
       "dependencies": {
-        "follow-redirects": "^1.15.0",
+        "follow-redirects": "^1.15.6",
         "form-data": "^4.0.0",
         "proxy-from-env": "^1.1.0"
       }
@@ -3237,9 +3237,9 @@
       "integrity": "sha512-Rwix9pBtC1Nuy5wysTmKy+UjbDJpIfg8eHjw0rjZ1mX4GNLz1Bmd16uDpI3Gk1i70Fgcs8Csg2lPm8HULFg9DQ=="
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.2",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
-      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
       "funding": [
         {
           "type": "individual",
diff --git a/package.json b/package.json
index a26b950..83c48ce 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "@next/mdx": "^13.0.2",
     "@tailwindcss/typography": "^0.5.4",
     "autoprefixer": "^10.4.12",
-    "axios": "^1.2.0",
+    "axios": "^1.7.2",
     "clsx": "^2.0.0",
     "fast-glob": "^3.2.11",
     "feed": "^4.2.2",
diff --git a/src/api/axiosConfig.js b/src/api/axiosConfig.js
index bd45cb2..d7b802e 100644
--- a/src/api/axiosConfig.js
+++ b/src/api/axiosConfig.js
@@ -1,12 +1,10 @@
-import axios from "axios"
-import { isHyperlink } from '@/lib/isHyperlink'
+import axios from 'axios';
 
-const BASE_URL = process.env.DOTNET_SERVER_URL
+const axiosInstance = axios.create({
+  baseURL: 'http://localhost:5000/api',
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
 
-const AXIOS_BASE = axios.create({
-    baseURL: BASE_URL,
-  })
-
-const JSON_CLIENT = isHyperlink(BASE_URL) ? AXIOS_BASE : false
-
-export default JSON_CLIENT
+export default axiosInstance;
\ No newline at end of file
diff --git a/src/api/postsApi.js b/src/api/postsApi.js
index 54f8964..f5267c6 100644
--- a/src/api/postsApi.js
+++ b/src/api/postsApi.js
@@ -1,23 +1,51 @@
-import API from './axiosConfig'
+// src/api/postsApi.js
 
-export const getPosts = () => {
+const apiUrl = process.env.DOTNET_SERVER_URL || 'http://localhost:5000';
+
+export const getPosts = async () => {
   try {
-    return API.get('/posts/')
-      .then((res) => res.data)
-  }
-  catch (e) {
-    console.error(e)
-    return []
+    const response = await fetch(`${apiUrl}/api/posts`);
+    if (!response.ok) {
+      const errorDetails = await response.text();
+      throw new Error(`Error fetching posts: ${response.status} ${response.statusText} - ${errorDetails}`);
+    }
+    return await response.json();
+  } catch (error) {
+    console.error('Error fetching posts:', error);
+    throw error;
   }
-}
+};
 
-export const getPost = (postSlug) => {
+export const getPost = async (slug) => {
   try {
-    return API.get(`/posts/${postSlug}`)
-      .then((res) => res.data)
+    const response = await fetch(`${apiUrl}/api/posts/${slug}`);
+    if (!response.ok) {
+      const errorDetails = await response.text();
+      throw new Error(`Error fetching post: ${response.status} ${response.statusText} - ${errorDetails}`);
+    }
+    return await response.json();
+  } catch (error) {
+    console.error('Error fetching post:', error);
+    throw error;
   }
-  catch (e) {
-    console.error(e)
-    return {}
+};
+
+export const createPost = async (post) => {
+  try {
+    const response = await fetch(`${apiUrl}/api/posts`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(post),
+    });
+    if (!response.ok) {
+      const errorDetails = await response.text();
+      throw new Error(`Error creating post: ${response.status} ${response.statusText} - ${errorDetails}`);
+    }
+    return await response.json();
+  } catch (error) {
+    console.error('Error creating post:', error);
+    throw error;
   }
-}
+};
diff --git a/src/components/CreatePostForm.js b/src/components/CreatePostForm.js
new file mode 100644
index 0000000..7ea6f3d
--- /dev/null
+++ b/src/components/CreatePostForm.js
@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import { createPost } from '../api/postsApi';
+
+const CreatePostForm = () => {
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [body, setBody] = useState('');
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      const newPost = { title, description, body };
+      const response = await createPost(newPost);
+      console.log('Post created successfully:', response);
+      // Optionally, reset the form or handle post-creation logic
+      setTitle('');
+      setDescription('');
+      setBody('');
+    } catch (error) {
+      console.error('Error creating post:', error);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <div>
+        <label>Title:</label>
+        <input
+          type="text"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          required
+        />
+      </div>
+      <div>
+        <label>Description:</label>
+        <input
+          type="text"
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          required
+        />
+      </div>
+      <div>
+        <label>Body:</label>
+        <textarea
+          value={body}
+          onChange={(e) => setBody(e.target.value)}
+          required
+        />
+      </div>
+      <button type="submit">Create Post</button>
+    </form>
+  );
+};
+
+export default CreatePostForm;
\ No newline at end of file
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index b90f29e..6c72c14 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -1,13 +1,16 @@
-import { Fragment, useEffect, useRef } from 'react'
-import Image from 'next/image'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import { Popover, Transition } from '@headlessui/react'
-import clsx from 'clsx'
+import { Fragment, useEffect, useRef } from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { Popover, Transition } from '@headlessui/react';
+import clsx from 'clsx';
 
-import { Container } from '@/components/Container'
-import LoginLogoutLink from "@/components/LoginLogoutLink"
-import avatarImage from '@/images/avatar.jpg'
+import { Container } from '@/components/Container';
+import LoginLogoutLink from "@/components/LoginLogoutLink";
+import avatarImage from '@/images/avatar.jpg';
+
+// Import the CreatePostForm directly
+import CreatePostForm from './CreatePostForm';
 
 function CloseIcon(props) {
   return (
@@ -21,7 +24,7 @@ function CloseIcon(props) {
         strokeLinejoin="round"
       />
     </svg>
-  )
+  );
 }
 
 function ChevronDownIcon(props) {
@@ -35,17 +38,26 @@ function ChevronDownIcon(props) {
         strokeLinejoin="round"
       />
     </svg>
-  )
+  );
 }
 
 function MobileNavItem({ href, children }) {
+  const router = useRouter();
+  const isActive = router.pathname === href;
+
+  const handleClick = (e) => {
+    if (isActive) {
+      e.preventDefault();
+    }
+  };
+
   return (
     <li>
-      <Popover.Button as={Link} href={href} className="block py-2">
+      <Popover.Button as={Link} href={href} onClick={handleClick} className="block py-2">
         {children}
       </Popover.Button>
     </li>
-  )
+  );
 }
 
 function MobileNavigation(props) {
@@ -95,6 +107,7 @@ function MobileNavigation(props) {
                 <MobileNavItem href="/projects">Projects</MobileNavItem>
                 <MobileNavItem href="/speaking">Speaking</MobileNavItem>
                 <MobileNavItem href="/uses">Uses</MobileNavItem>
+                <MobileNavItem href="/posts/new">New Post</MobileNavItem>
                 <LoginLogoutLink />
               </ul>
             </nav>
@@ -102,21 +115,27 @@ function MobileNavigation(props) {
         </Transition.Child>
       </Transition.Root>
     </Popover>
-  )
+  );
 }
 
 function NavItem({ href, children }) {
-  let isActive = useRouter().pathname === href
+  const router = useRouter();
+  const isActive = router.pathname === href;
+
+  const handleClick = (e) => {
+    if (isActive) {
+      e.preventDefault();
+    }
+  };
 
   return (
     <li>
       <Link
         href={href}
+        onClick={handleClick}
         className={clsx(
           'relative block px-3 py-2 transition',
-          isActive
-            ? 'text-teal-500'
-            : 'hover:text-teal-500'
+          isActive ? 'text-teal-500' : 'hover:text-teal-500'
         )}
       >
         {children}
@@ -125,7 +144,7 @@ function NavItem({ href, children }) {
         )}
       </Link>
     </li>
-  )
+  );
 }
 
 function DesktopNavigation(props) {
@@ -137,16 +156,17 @@ function DesktopNavigation(props) {
         <NavItem href="/projects">Projects</NavItem>
         <NavItem href="/speaking">Speaking</NavItem>
         <NavItem href="/uses">Uses</NavItem>
+        <NavItem href="/posts/new">New Post</NavItem>
         <LoginLogoutLink />
       </ul>
     </nav>
-  )
+  );
 }
 
 function clamp(number, a, b) {
-  let min = Math.min(a, b)
-  let max = Math.max(a, b)
-  return Math.min(Math.max(number, min), max)
+  let min = Math.min(a, b);
+  let max = Math.max(a, b);
+  return Math.min(Math.max(number, min), max);
 }
 
 function AvatarContainer({ className, ...props }) {
@@ -158,7 +178,7 @@ function AvatarContainer({ className, ...props }) {
       )}
       {...props}
     />
-  )
+  );
 }
 
 function Avatar({ large = false, className, ...props }) {
@@ -180,111 +200,111 @@ function Avatar({ large = false, className, ...props }) {
         priority
       />
     </Link>
-  )
+  );
 }
 
 export function Header() {
-  let isHomePage = useRouter().pathname === '/'
+  const isHomePage = useRouter().pathname === '/';
 
-  let headerRef = useRef()
-  let avatarRef = useRef()
-  let isInitial = useRef(true)
+  const headerRef = useRef();
+  const avatarRef = useRef();
+  const isInitial = useRef(true);
 
   useEffect(() => {
-    let downDelay = avatarRef.current?.offsetTop ?? 0
-    let upDelay = 64
+    const downDelay = avatarRef.current?.offsetTop ?? 0;
+    const upDelay = 64;
 
     function setProperty(property, value) {
-      document.documentElement.style.setProperty(property, value)
+      document.documentElement.style.setProperty(property, value);
     }
 
     function removeProperty(property) {
-      document.documentElement.style.removeProperty(property)
+      document.documentElement.style.removeProperty(property);
     }
 
     function updateHeaderStyles() {
-      let { top, height } = headerRef.current.getBoundingClientRect()
-      let scrollY = clamp(
+      const { top, height } = headerRef.current.getBoundingClientRect();
+      const scrollY = clamp(
         window.scrollY,
         0,
         document.body.scrollHeight - window.innerHeight
-      )
+      );
 
       if (isInitial.current) {
-        setProperty('--header-position', 'sticky')
+        setProperty('--header-position', 'sticky');
       }
 
-      setProperty('--content-offset', `${downDelay}px`)
+      setProperty('--content-offset', `${downDelay}px`);
 
       if (isInitial.current || scrollY < downDelay) {
-        setProperty('--header-height', `${downDelay + height}px`)
-        setProperty('--header-mb', `${-downDelay}px`)
+        setProperty('--header-height', `${downDelay + height}px`);
+        setProperty('--header-mb', `${-downDelay}px`);
       } else if (top + height < -upDelay) {
-        let offset = Math.max(height, scrollY - upDelay)
-        setProperty('--header-height', `${offset}px`)
-        setProperty('--header-mb', `${height - offset}px`)
+        const offset = Math.max(height, scrollY - upDelay);
+        setProperty('--header-height', `${offset}px`);
+        setProperty('--header-mb', `${height - offset}px`);
       } else if (top === 0) {
-        setProperty('--header-height', `${scrollY + height}px`)
-        setProperty('--header-mb', `${-scrollY}px`)
+        setProperty('--header-height', `${scrollY + height}px`);
+        setProperty('--header-mb', `${-scrollY}px`);
       }
 
       if (top === 0 && scrollY > 0 && scrollY >= downDelay) {
-        setProperty('--header-inner-position', 'fixed')
-        removeProperty('--header-top')
-        removeProperty('--avatar-top')
+        setProperty('--header-inner-position', 'fixed');
+        removeProperty('--header-top');
+        removeProperty('--avatar-top');
       } else {
-        removeProperty('--header-inner-position')
-        setProperty('--header-top', '0px')
-        setProperty('--avatar-top', '0px')
+        removeProperty('--header-inner-position');
+        setProperty('--header-top', '0px');
+        setProperty('--avatar-top', '0px');
       }
     }
 
     function updateAvatarStyles() {
       if (!isHomePage) {
-        return
+        return;
       }
 
-      let fromScale = 1
-      let toScale = 36 / 64
-      let fromX = 0
-      let toX = 2 / 16
+      const fromScale = 1;
+      const toScale = 36 / 64;
+      const fromX = 0;
+      const toX = 2 / 16;
 
-      let scrollY = downDelay - window.scrollY
+      const scrollY = downDelay - window.scrollY;
 
-      let scale = (scrollY * (fromScale - toScale)) / downDelay + toScale
-      scale = clamp(scale, fromScale, toScale)
+      let scale = (scrollY * (fromScale - toScale)) / downDelay + toScale;
+      scale = clamp(scale, fromScale, toScale);
 
-      let x = (scrollY * (fromX - toX)) / downDelay + toX
-      x = clamp(x, fromX, toX)
+      let x = (scrollY * (fromX - toX)) / downDelay + toX;
+      x = clamp(x, fromX, toX);
 
       setProperty(
         '--avatar-image-transform',
         `translate3d(${x}rem, 0, 0) scale(${scale})`
-      )
+      );
 
-      let borderScale = 1 / (toScale / scale)
-      let borderX = (-toX + x) * borderScale
-      let borderTransform = `translate3d(${borderX}rem, 0, 0) scale(${borderScale})`
+      const borderScale = 1 / (toScale / scale);
+      const borderX = (-toX + x) * borderScale;
+      const borderTransform = `translate3d(${borderX}rem, 0, 0) scale(${borderScale})`;
 
-      setProperty('--avatar-border-transform', borderTransform)
-      setProperty('--avatar-border-opacity', scale === toScale ? 1 : 0)
+      setProperty('--avatar-border-transform', borderTransform);
+      setProperty('--avatar-border-opacity', scale === toScale ? 1 : 0);
     }
 
     function updateStyles() {
-      updateHeaderStyles()
-      updateAvatarStyles()
-      isInitial.current = false
+      updateHeaderStyles();
+      updateAvatarStyles();
+      isInitial.current = false;
     }
 
-    updateStyles()
-    window.addEventListener('scroll', updateStyles, { passive: true })
-    window.addEventListener('resize', updateStyles)
+    updateStyles();
+    window.addEventListener('scroll', updateStyles, { passive: true });
+    window.addEventListener('resize', updateStyles);
 
     return () => {
-      window.removeEventListener('scroll', updateStyles, { passive: true })
-      window.removeEventListener('resize', updateStyles)
-    }
-  }, [isHomePage])
+      window.removeEventListener('scroll', updateStyles, { passive: true });
+      window.removeEventListener('resize', updateStyles);
+    };
+  }, [isHomePage]);
 
   return (
     <>
@@ -348,13 +368,16 @@ export function Header() {
                 <MobileNavigation className="pointer-events-auto md:hidden" />
                 <DesktopNavigation className="pointer-events-auto hidden md:block" />
               </div>
-              <div className="flex justify-end md:flex-1">
-              </div>
+              <div className="flex justify-end md:flex-1"></div>
             </div>
           </Container>
         </div>
       </header>
+
+      {/* Insert the CreatePostForm component here */}
+      {isHomePage && <CreatePostForm />}
+
       {isHomePage && <div style={{ height: 'var(--content-offset)' }} />}
     </>
-  )
+  );
 }
diff --git a/src/lib/generateRssFeed.js b/src/lib/generateRssFeed.js
index 3609c9c..ec7a38d 100644
--- a/src/lib/generateRssFeed.js
+++ b/src/lib/generateRssFeed.js
@@ -1,53 +1,60 @@
-import ReactDOMServer from 'react-dom/server'
-import { Feed } from 'feed'
-import { mkdir, writeFile } from 'fs/promises'
-
-import { getPosts } from "@/api/postsApi"
+import ReactDOMServer from 'react-dom/server';
+import { Feed } from 'feed';
+import { mkdir, writeFile } from 'fs/promises';
+import { getPosts } from '../api/postsApi'; // Correct the import path
 
 export async function generateRssFeed() {
-  const posts = await getPosts()
-  const siteUrl = process.env.NEXT_PUBLIC_SITE_URL
-  const author = {
-    name: 'Spencer Sharp',
-    email: 'spencer@planetaria.tech',
-  }
+  try {
+    console.log('Fetching posts...');
+    const posts = await getPosts();
+    console.log('Posts fetched:', posts);
+    const siteUrl = process.env.NEXT_PUBLIC_SITE_URL;
+    console.log('Site URL:', siteUrl);
+    const author = {
+      name: 'Spencer Sharp',
+      email: 'spencer@planetaria.tech',
+    };
 
-  const feed = new Feed({
-    title: author.name,
-    description: 'Your blog description',
-    author,
-    id: siteUrl,
-    link: siteUrl,
-    image: `${siteUrl}/favicon.ico`,
-    favicon: `${siteUrl}/favicon.ico`,
-    copyright: `All rights reserved ${new Date().getFullYear()}`,
-    feedLinks: {
-      rss2: `${siteUrl}/rss/feed.xml`,
-      json: `${siteUrl}/rss/feed.json`,
-    },
-  })
+    const feed = new Feed({
+      title: author.name,
+      description: 'Your blog description',
+      author,
+      id: siteUrl,
+      link: siteUrl,
+      image: `${siteUrl}/favicon.ico`,
+      favicon: `${siteUrl}/favicon.ico`,
+      copyright: `All rights reserved ${new Date().getFullYear()}`,
+      feedLinks: {
+        rss2: `${siteUrl}/rss/feed.xml`,
+        json: `${siteUrl}/rss/feed.json`,
+      },
+    });
 
-  posts.forEach((post) => {
-    const url = `${siteUrl}/posts/${post.slug}`
-    const html = ReactDOMServer.renderToStaticMarkup(
-      <div>{post.body}</div>
-    )
+    posts.forEach((post) => {
+      const url = `${siteUrl}/posts/${post.slug}`;
+      const html = ReactDOMServer.renderToStaticMarkup(
+        <div>{post.body}</div>
+      );
 
-    feed.addItem({
-      title: post.title,
-      id: url,
-      link: url,
-      description: post.body,
-      content: html,
-      author: [author],
-      contributor: [author],
-      date: new Date(post.createdDate),
-    })
-  })
+      feed.addItem({
+        title: post.title,
+        id: url,
+        link: url,
+        description: post.body,
+        content: html,
+        author: [author],
+        contributor: [author],
+        date: new Date(post.createdDate),
+      });
+    });
 
-  await mkdir('./public/rss', { recursive: true })
-  await Promise.all([
-    writeFile('./public/rss/feed.xml', feed.rss2(), 'utf8'),
-    writeFile('./public/rss/feed.json', feed.json1(), 'utf8'),
-  ])
+    await mkdir('./public/rss', { recursive: true });
+    await Promise.all([
+      writeFile('./public/rss/feed.xml', feed.rss2(), 'utf8'),
+      writeFile('./public/rss/feed.json', feed.json1(), 'utf8'),
+    ]);
+  } catch (error) {
+    console.error('Error generating RSS feed:', error);
+    throw error;
+  }
 }
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index f1e7140..4bfb8bb 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -1,200 +1,70 @@
-import Image from 'next/image'
-import Head from 'next/head'
-import Link from 'next/link'
-import clsx from 'clsx'
-
-import { Button } from '@/components/Button'
-import { Card } from '@/components/Card'
-import { Container } from '@/components/Container'
-import {
-  TwitterIcon,
-  InstagramIcon,
-  GitHubIcon,
-  LinkedInIcon,
-} from '@/components/SocialIcons'
-import image1 from '@/images/photos/image-1.jpg'
-import image2 from '@/images/photos/image-2.jpg'
-import image3 from '@/images/photos/image-3.jpg'
-import image4 from '@/images/photos/image-4.jpg'
-import image5 from '@/images/photos/image-5.jpg'
-import { generateRssFeed } from '@/lib/generateRssFeed'
-import { formatDate } from '@/lib/formatDate'
-import { getPosts } from "@/api/postsApi"
-
-function MailIcon(props) {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      fill="none"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden="true"
-      {...props}
-    >
-      <path
-        d="M2.75 7.75a3 3 0 0 1 3-3h12.5a3 3 0 0 1 3 3v8.5a3 3 0 0 1-3 3H5.75a3 3 0 0 1-3-3v-8.5Z"
-        className="fill-zinc-100 stroke-zinc-400"
-      />
-      <path
-        d="m4 6 6.024 5.479a2.915 2.915 0 0 0 3.952 0L20 6"
-        className="stroke-zinc-400"
-      />
-    </svg>
-  )
-}
+import Head from 'next/head';
+import { Card } from '@/components/Card';
+import { SimpleLayout } from '@/components/SimpleLayout';
+import { formatDate } from '@/lib/formatDate';
+import { getPosts } from '@/api/postsApi'; // Adjust the path if necessary
 
 function Post({ post }) {
-  const date = new Date(post.createdDate)
+  const date = new Date(post.createdDate);
 
   return (
-    <Card as="article">
-      <Card.Title href={`/posts/${post.slug}`}>
-        {post.title}
-      </Card.Title>
-      <Card.Eyebrow as="time" dateTime={date} decorate>
+    <article className="md:grid md:grid-cols-4 md:items-baseline">
+      <Card className="md:col-span-3">
+        <Card.Title href={`/posts/${post.slug}`}>
+          {post.title}
+        </Card.Title>
+        <Card.Eyebrow
+          as="time"
+          dateTime={date}
+          className="md:hidden"
+          decorate
+        >
+          {formatDate(date)}
+        </Card.Eyebrow>
+        <Card.Description>{post.body}</Card.Description>
+        <Card.Cta>Read post</Card.Cta>
+      </Card>
+      <Card.Eyebrow
+        as="time"
+        dateTime={date}
+        className="mt-1 hidden md:block"
+      >
         {formatDate(date)}
       </Card.Eyebrow>
-      <Card.Description>{post.description}</Card.Description>
-      <Card.Cta>Read post</Card.Cta>
-    </Card>
-  )
-}
-
-function SocialLink({ icon: Icon, ...props }) {
-  return (
-    <Link className="group -m-1 p-1" {...props}>
-      <Icon className="h-6 w-6 fill-zinc-500 transition group-hover:fill-zinc-600" />
-    </Link>
-  )
-}
-
-function Newsletter() {
-  return (
-    <form
-      action="/thank-you"
-      className="rounded-2xl border border-zinc-100 p-6"
-    >
-      <h2 className="flex text-sm font-semibold text-zinc-900">
-        <MailIcon className="h-6 w-6 flex-none" />
-        <span className="ml-3">Stay up to date</span>
-      </h2>
-      <p className="mt-2 text-sm text-zinc-600">
-        Get notified when I publish something new, and unsubscribe at any time.
-      </p>
-      <div className="mt-6 flex">
-        <input
-          type="email"
-          placeholder="Email address"
-          aria-label="Email address"
-          required
-          className="min-w-0 flex-auto appearance-none rounded-md border border-zinc-900/10 bg-white px-3 py-[calc(theme(spacing.2)-1px)] shadow-md shadow-zinc-800/5 placeholder:text-zinc-400 focus:border-teal-500 focus:outline-none focus:ring-4 focus:ring-teal-500/10 sm:text-sm"
-        />
-        <Button type="submit" className="ml-4 flex-none">
-          Join
-        </Button>
-      </div>
-    </form>
-  )
-}
-
-function Photos() {
-  let rotations = ['rotate-2', '-rotate-2', 'rotate-2', 'rotate-2', '-rotate-2']
-
-  return (
-    <div className="mt-16 sm:mt-20">
-      <div className="-my-4 flex justify-center gap-5 overflow-hidden py-4 sm:gap-8">
-        {[image1, image2, image3, image4, image5].map((image, imageIndex) => (
-          <div
-            key={image.src}
-            className={clsx(
-              'relative aspect-[9/10] w-44 flex-none overflow-hidden rounded-xl bg-zinc-100 sm:w-72 sm:rounded-2xl',
-              rotations[imageIndex % rotations.length]
-            )}
-          >
-            <Image
-              src={image}
-              alt=""
-              sizes="(min-width: 640px) 18rem, 11rem"
-              className="absolute inset-0 h-full w-full object-cover"
-            />
-          </div>
-        ))}
-      </div>
-    </div>
-  )
+    </article>
+  );
 }
 
-export default function Home({ posts }) {
+export default function PostsIndex({ posts }) {
   return (
     <>
       <Head>
-        <title>
-          Spencer Sharp - Software designer, founder, and amateur astronaut
-        </title>
+        <title>Posts - Spencer Sharp</title>
         <meta
           name="description"
-          content="I’m Spencer, a software designer and entrepreneur based in New York City. I’m the founder and CEO of Planetaria, where we develop technologies that empower regular people to explore space on their own terms."
+          content="All of my long-form thoughts on programming, leadership, product design, and more, collected in chronological order."
         />
       </Head>
-      <Container className="mt-9">
-        <div className="max-w-2xl">
-          <h1 className="text-4xl font-bold tracking-tight text-zinc-800 sm:text-5xl">
-            Software designer, founder, and amateur astronaut.
-          </h1>
-          <p className="mt-6 text-base text-zinc-600">
-            I’m Spencer, a software designer and entrepreneur based in New York
-            City. I’m the founder and CEO of Planetaria, where we develop
-            technologies that empower regular people to explore space on their
-            own terms.
-          </p>
-          <div className="mt-6 flex gap-6">
-            <SocialLink
-              href="https://twitter.com"
-              aria-label="Follow on Twitter"
-              icon={TwitterIcon}
-            />
-            <SocialLink
-              href="https://instagram.com"
-              aria-label="Follow on Instagram"
-              icon={InstagramIcon}
-            />
-            <SocialLink
-              href="https://github.com"
-              aria-label="Follow on GitHub"
-              icon={GitHubIcon}
-            />
-            <SocialLink
-              href="https://linkedin.com"
-              aria-label="Follow on LinkedIn"
-              icon={LinkedInIcon}
-            />
-          </div>
-        </div>
-      </Container>
-      <Photos />
-      <Container className="mt-24 md:mt-28">
-        <div className="mx-auto grid max-w-xl grid-cols-1 gap-y-20 lg:max-w-none">
-          <div className="flex flex-col gap-16">
+      <SimpleLayout
+        title="Writing on software design, company building, and the aerospace industry."
+        intro="All of my long-form thoughts on programming, leadership, product design, and more, collected in chronological order."
+      >
+        <div className="md:border-l md:border-zinc-100 md:pl-6">
+          <div className="flex max-w-3xl flex-col space-y-16">
             {posts.map((post) => (
               <Post key={post.slug} post={post} />
             ))}
-            <Newsletter />
           </div>
         </div>
-      </Container>
+      </SimpleLayout>
     </>
-  )
+  );
 }
 
 export async function getStaticProps() {
-  if (process.env.NODE_ENV === 'production' || true) {
-    await generateRssFeed()
-  }
-
   return {
     props: {
-      posts: ( await getPosts() || [{}] )
+      posts: (await getPosts()) || [],
     },
-  }
-}
+  };
+}
\ No newline at end of file
diff --git a/src/pages/posts/[slug].jsx b/src/pages/posts/[slug].jsx
index b71f258..b3f8196 100644
--- a/src/pages/posts/[slug].jsx
+++ b/src/pages/posts/[slug].jsx
@@ -1,38 +1,77 @@
-import { ArticleLayout } from '@/components/ArticleLayout'
-import { getPost, getPosts } from "@/api/postsApi"
-import { postParameters } from "@/lib/postUtilities"
+// src/pages/posts/[slug].jsx
 
-export async function getStaticPaths() {
-  const posts = await getPosts()
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+import { useRouter } from 'next/router';
+import { ArticleLayout } from '@/components/ArticleLayout';
+import { getPost, getPosts } from "@/api/postsApi";
+import { postParameters } from "@/lib/postUtilities";
 
-  const postParams = posts ? postParameters(posts) : []
+export async function getStaticPaths() {
+  const posts = await getPosts();
+  const postParams = posts ? postParameters(posts) : [];
 
   return {
     paths: postParams,
     fallback: false,
-  }
+  };
 }
 
 export async function getStaticProps(context) {
-  const currentPost = await getPost(context.params.slug)
+  const currentPost = await getPost(context.params.slug);
 
   return {
     props: { post: currentPost || {} },
-  }
+  };
 }
 
-export default function Post({ post }) {
+const Post = ({ post }) => {
+  const [error, setError] = useState(null);
+  const [fetchedPost, setFetchedPost] = useState(post);
+  const router = useRouter();
+  const { slug } = router.query; // Get the dynamic route parameter
+
+  useEffect(() => {
+    if (slug && !post) {
+      axios.get(`/api/posts/${slug}`) // Fetch the post data using the slug
+        .then(response => {
+          console.log('API Response:', response.data); // Log the response data
+          setFetchedPost(response.data);
+        })
+        .catch(error => {
+          console.error('Error Response:', error); // Log the full error response
+          if (error.response) {
+            console.error('Error Response Data:', error.response.data); // Log error response data
+            const errorMessage = error.response.data.message || 'An unknown error occurred.';
+            setError(`Failed to load post: ${errorMessage}`);
+          } else {
+            setError('Failed to load post: An unknown error occurred.');
+          }
+        });
+    }
+  }, [post, slug]);
+
+  if (error) return <p>{error}</p>;
+  if (!fetchedPost) return <p>Loading...</p>; // Show loading state while data is being fetched
+
+  const formattedDate = new Date(fetchedPost.createdDate).toLocaleDateString();
 
   const meta = {
     author: 'Spencer Sharp',
-    date: post.createdDate,
-    title: post.title,
-    description: post.body,
-  }
+    date: fetchedPost.createdDate,
+    title: fetchedPost.title,
+    description: fetchedPost.body,
+  };
 
   return (
     <ArticleLayout meta={meta}>
-      {post.body}
+      <div>
+        <h1>{fetchedPost.title}</h1>
+        <p>{fetchedPost.body}</p>
+        <p>Created on: {formattedDate}</p>
+      </div>
     </ArticleLayout>
-  )
-}
+  );
+};
+
+export default Post;
diff --git a/src/pages/posts/index.jsx b/src/pages/posts/index.jsx
index c0daf46..6a6d7f5 100644
--- a/src/pages/posts/index.jsx
+++ b/src/pages/posts/index.jsx
@@ -1,12 +1,11 @@
-import Head from 'next/head'
-
-import { Card } from '@/components/Card'
-import { SimpleLayout } from '@/components/SimpleLayout'
-import { formatDate } from '@/lib/formatDate'
-import { getPosts, getPost } from "@/api/postsApi"
+import Head from 'next/head';
+import { Card } from '@/components/Card';
+import { SimpleLayout } from '@/components/SimpleLayout';
+import { formatDate } from '@/lib/formatDate';
+import { getPosts } from '@/api/postsApi'; // Adjust the path if necessary
 
 function Post({ post }) {
-  const date = new Date(post.createdDate)
+  const date = new Date(post.createdDate);
 
   return (
     <article className="md:grid md:grid-cols-4 md:items-baseline">
@@ -33,7 +32,7 @@ function Post({ post }) {
         {formatDate(date)}
       </Card.Eyebrow>
     </article>
-  )
+  );
 }
 
 export default function PostsIndex({ posts }) {
@@ -59,13 +58,13 @@ export default function PostsIndex({ posts }) {
         </div>
       </SimpleLayout>
     </>
-  )
+  );
 }
 
 export async function getStaticProps() {
   return {
     props: {
-      posts: (await getPosts() || []),
+      posts: (await getPosts()) || [],
     },
-  }
+  };
 }
diff --git a/src/pages/posts/new.js b/src/pages/posts/new.js
new file mode 100644
index 0000000..298035b
--- /dev/null
+++ b/src/pages/posts/new.js
@@ -0,0 +1,149 @@
+import { useState } from 'react';
+import { useRouter } from 'next/router';
+import API from '../../api/axiosConfig';
+
+const NewPost = () => {
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [body, setBody] = useState('');
+  const [errors, setErrors] = useState([]);
+  const router = useRouter();
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    setErrors([]); // Clear previous errors
+
+    try {
+      const response = await API.post('/posts/new', { title, description, body });
+      if (response.status === 201) {
+        // Extract necessary data from the response
+        const post = response.data.post;
+        // Redirect to the newly created post's page using its slug
+        router.push(`/posts/${post.slug}`);
+      }
+    } catch (error) {
+      console.error('Error response:', error.response); // Log the full error response
+      if (error.response && error.response.data && error.response.data.errors) {
+        setErrors(error.response.data.errors);
+      } else {
+        setErrors(['An unknown error occurred.']);
+      }
+    }
+  };
+
+  return (
+    <div style={styles.container}>
+      <h1 style={styles.header}>Create New Post</h1>
+      <form onSubmit={handleSubmit} style={styles.form}>
+        <div style={styles.formGroup}>
+          <label htmlFor="title" style={styles.label}>Title:</label>
+          <input
+            type="text"
+            id="title"
+            name="title"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            style={styles.input}
+          />
+        </div>
+        <div style={styles.formGroup}>
+          <label htmlFor="description" style={styles.label}>Description:</label>
+          <input
+            type="text"
+            id="description"
+            name="description"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            style={styles.input}
+          />
+        </div>
+        <div style={styles.formGroup}>
+          <label htmlFor="body" style={styles.label}>Body:</label>
+          <textarea
+            id="body"
+            name="body"
+            value={body}
+            onChange={(e) => setBody(e.target.value)}
+            style={styles.textarea}
+          />
+        </div>
+        <button type="submit" style={styles.button}>Create Post</button>
+        {errors.length > 0 && (
+          <ul style={styles.errorList}>
+            {errors.map((error, index) => (
+              <li key={index} style={styles.errorItem}>{error}</li>
+            ))}
+          </ul>
+        )}
+      </form>
+    </div>
+  );
+};
+
+const styles = {
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '50px',
+    backgroundColor: '#f0f0f0',
+    minHeight: '100vh',
+  },
+  header: {
+    fontSize: '2em',
+    marginBottom: '20px',
+  },
+  form: {
+    width: '100%',
+    maxWidth: '600px',
+    padding: '20px',
+    backgroundColor: '#fff',
+    borderRadius: '8px',
+    boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)',
+  },
+  formGroup: {
+    marginBottom: '15px',
+  },
+  label: {
+    display: 'block',
+    marginBottom: '5px',
+    fontWeight: 'bold',
+  },
+  input: {
+    width: '100%',
+    padding: '10px',
+    fontSize: '1em',
+    borderRadius: '4px',
+    border: '1px solid #ccc',
+  },
+  textarea: {
+    width: '100%',
+    padding: '10px',
+    fontSize: '1em',
+    borderRadius: '4px',
+    border: '1px solid #ccc',
+    minHeight: '100px',
+  },
+  button: {
+    width: '100%',
+    padding: '10px 20px',
+    fontSize: '1em',
+    color: '#fff',
+    backgroundColor: '#0070f3',
+    border: 'none',
+    borderRadius: '4px',
+    cursor: 'pointer',
+  },
+  errorList: {
+    marginTop: '20px',
+    listStyleType: 'none',
+    padding: '0',
+    color: 'red',
+  },
+  errorItem: {
+    marginBottom: '5px',
+  },
+};
+
+export default NewPost;