diff --git a/src/app/api/create/route.ts b/src/app/api/create/route.ts
new file mode 100644
index 0000000..cfe6067
--- /dev/null
+++ b/src/app/api/create/route.ts
@@ -0,0 +1,24 @@
+import {ZCreateApiRequest} from "@/utils/types";
+import db from "@/db";
+import {code} from "@/db/schema";
+import {randomString} from "util-utils";
+import * as schema from "@/db/schema";
+
+export async function POST(request: Request) {
+  if (request.headers.get('Authorization') !== process.env.AUTOMATA_UPLOAD_KEY)
+      return new Response('Unauthorized', {status: 401})
+  try {
+    const data = await ZCreateApiRequest.parseAsync(await request.json())
+    const written = await db.insert(code)
+      .values({
+        id: randomString(8),
+        ...data
+      })
+      .returning({
+        snippetId: schema.code.id
+      })
+    return new Response(JSON.stringify(written[0].snippetId), {status: 200})
+  } catch (e) {
+    return new Response(`Invalid request ${e}`, {status: 400})
+  }
+}
\ No newline at end of file
diff --git a/src/app/s/[id]/page.tsx b/src/app/s/[id]/page.tsx
index 9e2ee15..7018de5 100644
--- a/src/app/s/[id]/page.tsx
+++ b/src/app/s/[id]/page.tsx
@@ -43,13 +43,14 @@ export default async function Page({ params }: { params: { id: string } }) {
                     codeTagProps={{ className: 'codeHighlighter' }}
                     language={match[1]}
                     // eslint-disable-next-line react/no-children-prop
-                    children={String(children).replace(/\n$/, '')}
+                    children={String(children)}
                   />
                 ) : (
                   <code className={className} {...props} style={{
                     fontSize: '1rem',
                     backgroundColor: '#171717',
-                    outline: '3px solid #171717'
+                    outline: '3px solid #171717',
+                    color: 'white',
                   }}>
                     {children}
                   </code>
diff --git a/src/components/NavBar/NavBar.tsx b/src/components/NavBar/NavBar.tsx
index 293ae25..11fc5cd 100644
--- a/src/components/NavBar/NavBar.tsx
+++ b/src/components/NavBar/NavBar.tsx
@@ -15,11 +15,6 @@ import Link from 'next/link';
 import {useRouter} from "next-nprogress-bar";
 import {usePathname} from "next/navigation";
 
-/*const user = {
-  name: 'Jane Spoonfighter',
-  email: 'janspoon@fighter.dev',
-  image: 'https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-5.png',
-};*/
 const links = [
   { link: '/', label: 'Create' },
   { link: '/md', label: 'Markdown' },
diff --git a/src/middleware.ts b/src/middleware.ts
index d8e832d..43b94f9 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -4,7 +4,7 @@ import { authMiddleware } from "@clerk/nextjs";
 // Please edit this to allow other routes to be public as needed.
 // See https://clerk.com/docs/references/nextjs/auth-middleware for more information about configuring your Middleware
 export default authMiddleware({
-  publicRoutes: ['/']
+  publicRoutes: ['/', '/api/create']
 });
 
 export const config = {
diff --git a/src/providers.tsx b/src/providers.tsx
index 495510a..b4ec8c4 100644
--- a/src/providers.tsx
+++ b/src/providers.tsx
@@ -8,7 +8,7 @@ const Providers = ({ children }: { children: React.ReactNode }) => {
       {children}
       <ProgressBar
         height="4px"
-        color="#fffd00"
+        color="#228be6"
         options={{ showSpinner: false }}
       />
     </>