diff --git a/stories/About/Developer Guide.mdx b/stories/About/Developer Guide.mdx
new file mode 100644
index 00000000..c4b0774f
--- /dev/null
+++ b/stories/About/Developer Guide.mdx	
@@ -0,0 +1,76 @@
+import Image from "next/image";
+import Link from "next/link";
+import '../styles.css';
+
+import supabase from '../assets/supabase_gridIron.png';
+import server from '../assets/supabase_server.png';
+import client from '../assets/client_component.png';
+
+## Developer Guide
+
+### Table of Contents
+ - [Getting Started](#getting-started)
+ - [Pushing local branch to remote branch](#pushing-local-branch-to-remote-branch)
+ - [Connecting to Supabase](#connecting-to-supabase)
+ - [Query Supabase data from Next](#query-supabase-data-from-next)
+    
+
+## Getting Started
+
+  <code>git clone --single-branch --branch develop https://github.com/LetsGetTechnical/gridiron-survivor.git</code>
+
+  Install the required packages with pnpm (NOT npm or yarn!)
+
+  <code>pnpm install</code>
+
+  Create a new branch for whatever you’re working on in the format firstname/feature-description, then check out your new branch. For example:
+
+  <code>git branch richard/user-picks-page && git checkout richard/user-picks-page</code>
+  
+  Code your feature! 🤓
+
+## Pushing local branch to remote branch
+
+  For the first push from local to remote, use --set-upstream origin along with the name of your local branch, like so:
+
+  <code>git push --set-upstream origin richard/user-picks-page</code>
+
+  Subsequent pushes will now go to your remote upstream branch.
+
+## Connecting to Supabase
+
+  In the project’s root folder, create an .env.local file:
+
+  <Image src={supabase} alt={""}/>
+
+  Place the following into your .env.local file:
+
+  <code>NEXT_PUBLIC_SUPABASE_URL=https://izumnfxsfrtbpyfptbeo.supabase.co</code>
+
+  <code>NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmF
+zZSIsInJlZiI6Iml6dW1uZnhzZnJ0YnB5ZnB0YmVvIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MDEzMTA0MjgsImV4cCI6MjAxNjg4N
+jQyOH0.hMNzXxIWrVMJjwwvC0tLuAwHGx8MzBXWIOTlkPTd-N8</code>
+
+
+## Query Supabase data from Next
+
+  To create a Supabase client and query data from an Async Server Component, create a new page.tsx file like the example below.
+
+  This example queries all entries stored in a hypothetical “notes” table from the database:
+
+  <Link href='https://codepen.io/choir27/pen/zYXaVGY?editors=0010'>
+    <Image src={server} alt={"Snapshot Code example of an asynchronous Server Component"}/>
+  </Link>
+  Alternatively, using a Client Component:
+
+  <Link href = "https://codepen.io/choir27/pen/oNOyrjz?editors=0010">
+  <Image src={client} alt={"Snapshot Code example of an asynchronous Client Component"}/>
+  </Link>
+
+  <ol className="doc_nav_links">
+    <li>[Welcome](?path=/docs/welcome--docs)</li>
+    <li>[Documents](?path=/docs/documents--docs)</li>
+  </ol>
+
+
+
diff --git a/stories/About/DeveloperGuide.mdx b/stories/About/DeveloperGuide.mdx
deleted file mode 100644
index e100b458..00000000
--- a/stories/About/DeveloperGuide.mdx
+++ /dev/null
@@ -1,4 +0,0 @@
-<h1>Devoloper Guide</h1>
-
-[Welcome](?path=/docs/welcome--docs)
-[Documents](?path=/docs/documents--docs)
\ No newline at end of file
diff --git a/stories/Documents/Documents.mdx b/stories/Documents/Documents.mdx
index f2a34079..dee007a1 100644
--- a/stories/Documents/Documents.mdx
+++ b/stories/Documents/Documents.mdx
@@ -1,4 +1,4 @@
 <h1>Documents</h1>
 
-[Developer Guide](?path=/docs/about-developerguide--docs)
+[Developer Guide](?path=/docs/about-developer-guide--docs)
 [Richard](?path=/docs/documents-richard--docs)
diff --git a/stories/Welcome.mdx b/stories/Welcome.mdx
index 8d795cc1..92fe480d 100644
--- a/stories/Welcome.mdx
+++ b/stories/Welcome.mdx
@@ -1,3 +1,3 @@
 <h1>Welcome</h1>
 
-[Developer Guide](?path=/docs/about-developerguide--docs)
\ No newline at end of file
+[Developer Guide](?path=/docs/about-developer-guide--docs)
\ No newline at end of file
diff --git a/stories/styles.css b/stories/styles.css
new file mode 100644
index 00000000..98a9fb5b
--- /dev/null
+++ b/stories/styles.css
@@ -0,0 +1,11 @@
+.doc_nav_links {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 2rem;
+  align-items: center;
+  max-width: 100%;
+}
+
+.doc_nav_links li {
+  font-size: 2rem;
+}
\ No newline at end of file