diff --git a/package-lock.json b/package-lock.json
index 1e1c817..7d069ea 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.3",
         "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.3",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.3.tgz",
+      "integrity": "sha512-Ar7ND9pU99eJ9GpoGQKhKf58GpUOgnzuaB7ueNQ5BMi0p+LZ5oaEnfF999fAArcTIBwXTCHAmGcHOZJaWPq9Nw==",
       "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..a6800b9 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.3",
     "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..531432a 100644
--- a/src/api/axiosConfig.js
+++ b/src/api/axiosConfig.js
@@ -1,12 +1,17 @@
 import axios from "axios"
 import { isHyperlink } from '@/lib/isHyperlink'
 
-const BASE_URL = process.env.DOTNET_SERVER_URL
+
+const BASE_URL = process.env.DOTNET_SERVER_URL || 'http://localhost:5000/api';
+
 
 const AXIOS_BASE = axios.create({
     baseURL: BASE_URL,
-  })
+    timeout: 1000,
+  });
+
 
 const JSON_CLIENT = isHyperlink(BASE_URL) ? AXIOS_BASE : false
 
+
 export default JSON_CLIENT
diff --git a/src/api/postsApi.js b/src/api/postsApi.js
index 54f8964..4a478e9 100644
--- a/src/api/postsApi.js
+++ b/src/api/postsApi.js
@@ -1,23 +1,21 @@
-import API from './axiosConfig'
+import JSON_CLIENT from '@/api/axiosConfig';
 
-export const getPosts = () => {
+export const getPosts = async () => {
   try {
-    return API.get('/posts/')
-      .then((res) => res.data)
+    const response = await JSON_CLIENT.get('/posts');
+    return response.data;
+  } catch (error) {
+    console.error('Failed to fetch posts:', error);
+    return [];
   }
-  catch (e) {
-    console.error(e)
-    return []
-  }
-}
+};
 
-export const getPost = (postSlug) => {
+export const getPost = async (slug) => {
   try {
-    return API.get(`/posts/${postSlug}`)
-      .then((res) => res.data)
-  }
-  catch (e) {
-    console.error(e)
-    return {}
+    const response = await JSON_CLIENT.get(`/posts/${slug}`);
+    return response.data;
+  } catch (error) {
+    console.error('Failed to fetch post:', error);
+    return null;
   }
-}
+};
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index b90f29e..cb51f41 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -5,10 +5,12 @@ 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'
 
+
 function CloseIcon(props) {
   return (
     <svg viewBox="0 0 24 24" aria-hidden="true" {...props}>
@@ -24,6 +26,7 @@ function CloseIcon(props) {
   )
 }
 
+
 function ChevronDownIcon(props) {
   return (
     <svg viewBox="0 0 8 6" aria-hidden="true" {...props}>
@@ -38,6 +41,7 @@ function ChevronDownIcon(props) {
   )
 }
 
+
 function MobileNavItem({ href, children }) {
   return (
     <li>
@@ -48,6 +52,7 @@ function MobileNavItem({ href, children }) {
   )
 }
 
+
 function MobileNavigation(props) {
   return (
     <Popover {...props}>
@@ -92,6 +97,11 @@ function MobileNavigation(props) {
               <ul className="-my-2 divide-y divide-zinc-100 text-base text-zinc-800">
                 <MobileNavItem href="/about">About</MobileNavItem>
                 <MobileNavItem href="/posts">Posts</MobileNavItem>
+                <li>
+                 <Popover.Button as = {Link} href = " /posts/create-post" className = "block py-2">
+                 Create Post
+                 </Popover.Button>
+              </li>
                 <MobileNavItem href="/projects">Projects</MobileNavItem>
                 <MobileNavItem href="/speaking">Speaking</MobileNavItem>
                 <MobileNavItem href="/uses">Uses</MobileNavItem>
@@ -105,9 +115,11 @@ function MobileNavigation(props) {
   )
 }
 
+
 function NavItem({ href, children }) {
   let isActive = useRouter().pathname === href
 
+
   return (
     <li>
       <Link
@@ -128,12 +140,20 @@ function NavItem({ href, children }) {
   )
 }
 
+
 function DesktopNavigation(props) {
   return (
     <nav {...props}>
       <ul className="flex rounded-full bg-white/90 px-3 text-sm font-medium text-zinc-800 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur">
         <NavItem href="/about">About</NavItem>
         <NavItem href="/posts">Posts</NavItem>
+        <li>
+          <Link
+             href = "/posts/create-post"
+             className = "relative block px-3 py-2  transition hover:text-teal-500">
+              Create Post
+             </Link>
+        </li>
         <NavItem href="/projects">Projects</NavItem>
         <NavItem href="/speaking">Speaking</NavItem>
         <NavItem href="/uses">Uses</NavItem>
@@ -143,12 +163,14 @@ function DesktopNavigation(props) {
   )
 }
 
+
 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)
 }
 
+
 function AvatarContainer({ className, ...props }) {
   return (
     <div
@@ -161,6 +183,7 @@ function AvatarContainer({ className, ...props }) {
   )
 }
 
+
 function Avatar({ large = false, className, ...props }) {
   return (
     <Link
@@ -183,25 +206,31 @@ function Avatar({ large = false, className, ...props }) {
   )
 }
 
+
 export function Header() {
   let isHomePage = useRouter().pathname === '/'
 
+
   let headerRef = useRef()
   let avatarRef = useRef()
   let isInitial = useRef(true)
 
+
   useEffect(() => {
     let downDelay = avatarRef.current?.offsetTop ?? 0
     let upDelay = 64
 
+
     function setProperty(property, value) {
       document.documentElement.style.setProperty(property, value)
     }
 
+
     function removeProperty(property) {
       document.documentElement.style.removeProperty(property)
     }
 
+
     function updateHeaderStyles() {
       let { top, height } = headerRef.current.getBoundingClientRect()
       let scrollY = clamp(
@@ -210,12 +239,15 @@ export function Header() {
         document.body.scrollHeight - window.innerHeight
       )
 
+
       if (isInitial.current) {
         setProperty('--header-position', 'sticky')
       }
 
+
       setProperty('--content-offset', `${downDelay}px`)
 
+
       if (isInitial.current || scrollY < downDelay) {
         setProperty('--header-height', `${downDelay + height}px`)
         setProperty('--header-mb', `${-downDelay}px`)
@@ -228,6 +260,7 @@ export function Header() {
         setProperty('--header-mb', `${-scrollY}px`)
       }
 
+
       if (top === 0 && scrollY > 0 && scrollY >= downDelay) {
         setProperty('--header-inner-position', 'fixed')
         removeProperty('--header-top')
@@ -239,53 +272,65 @@ export function Header() {
       }
     }
 
+
     function updateAvatarStyles() {
       if (!isHomePage) {
         return
       }
 
+
       let fromScale = 1
       let toScale = 36 / 64
       let fromX = 0
       let toX = 2 / 16
 
+
       let scrollY = downDelay - window.scrollY
 
+
       let scale = (scrollY * (fromScale - toScale)) / downDelay + toScale
       scale = clamp(scale, fromScale, toScale)
 
+
       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})`
 
+
       setProperty('--avatar-border-transform', borderTransform)
       setProperty('--avatar-border-opacity', scale === toScale ? 1 : 0)
     }
 
+
     function updateStyles() {
       updateHeaderStyles()
       updateAvatarStyles()
       isInitial.current = false
     }
 
+
     updateStyles()
     window.addEventListener('scroll', updateStyles, { passive: true })
     window.addEventListener('resize', updateStyles)
 
+
     return () => {
       window.removeEventListener('scroll', updateStyles, { passive: true })
       window.removeEventListener('resize', updateStyles)
     }
   }, [isHomePage])
 
+
   return (
     <>
       <header
diff --git a/src/pages/posts/[slug].jsx b/src/pages/posts/[slug].jsx
index b71f258..d4fe0c3 100644
--- a/src/pages/posts/[slug].jsx
+++ b/src/pages/posts/[slug].jsx
@@ -3,10 +3,8 @@ import { getPost, getPosts } from "@/api/postsApi"
 import { postParameters } from "@/lib/postUtilities"
 
 export async function getStaticPaths() {
-  const posts = await getPosts()
-
-  const postParams = posts ? postParameters(posts) : []
-
+  const posts = await getPosts();
+  const postParams = posts ? postParameters(posts) : [];
   return {
     paths: postParams,
     fallback: false,
@@ -14,21 +12,20 @@ export async function getStaticPaths() {
 }
 
 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 }) {
 
+export default function Post({ post }) {
   const meta = {
     author: 'Spencer Sharp',
-    date: post.createdDate,
+    date: post.createdDate, //bug fixes
     title: post.title,
     description: post.body,
-  }
+  };
 
   return (
     <ArticleLayout meta={meta}>
diff --git a/src/pages/posts/create-post.jsx b/src/pages/posts/create-post.jsx
new file mode 100644
index 0000000..5aa17f5
--- /dev/null
+++ b/src/pages/posts/create-post.jsx
@@ -0,0 +1,78 @@
+import { useState } from 'react';
+import { useRouter } from 'next/router';
+import JSON_CLIENT from '@/api/axiosConfig';
+import { Container } from '@/components/Container';
+
+const NewPost = () => {
+    const [title, setTitle] = useState('');
+    const [description, setDescription] = useState('');
+    const [errors, setErrors] = useState({});
+    const router = useRouter();
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        setErrors({});
+
+        try {
+            const response = await JSON_CLIENT.post('http://localhost:5000/posts/create-post', { title, description });
+            router.push(`/posts/${response.data.slug}`);
+        } catch (error) {
+            if (error.response && error.response.data) {
+                setErrors(error.response.data.errors);
+            } else {
+                setErrors({ form: 'An unexpected error has occurred' });
+            }
+        }
+    };
+
+    return (
+        <Container className="mt-16 sm:mt-32">
+            <h1 className="text-4xl font-bold tracking-tight text-zinc-800 sm:text-5xl">
+                Create New Post
+            </h1>
+            <form onSubmit={handleSubmit} className="mt-8 space-y-6">
+                <div>
+                    <label htmlFor="title" className="block text-sm font-medium text-zinc-600">
+                        Title
+                    </label>
+                    <input
+                        id="title"
+                        name="title"
+                        type="text"
+                        required
+                        value={title}
+                        onChange={(e) => setTitle(e.target.value)}
+                        className="block w-full p-2 mt-1 border border-zinc-300 rounded-md shadow-sm"
+                    />
+                    {errors.title && <p className="text-red-500 text-sm">{errors.title}</p>}
+                </div>
+                <div>
+                    <label htmlFor="description" className="block text-sm font-medium text-zinc-600">
+                        Description
+                    </label>
+                    <input
+                        id="description"
+                        name="description"
+                        type="text"
+                        required
+                        value={description}
+                        onChange={(e) => setDescription(e.target.value)}
+                        className="block w-full p-2 mt-1 border border-zinc-300 rounded-md shadow-sm"
+                    />
+                    {errors.description && <p className="text-red-500 text-sm">{errors.description}</p>}
+                </div>
+                <div>
+                    <button
+                        type="submit"
+                        className="inline-flex items-center px-4 py-2 font-medium leading-6 text-white bg-blue-600 border border-transparent rounded-md shadow-sm hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+                    >
+                        Create Post
+                    </button>
+                    {errors.form && <p className="text-red-500 text-sm mt-2">{errors.form}</p>}
+                </div>
+            </form>
+        </Container>
+    );
+};
+
+export default NewPost;