diff --git a/package-lock.json b/package-lock.json
index 9f0ccee..225b52d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "pino": "^8.15.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-router": "^6.15.0",
         "react-router-dom": "^6.15.0"
       },
       "devDependencies": {
diff --git a/package.json b/package.json
index df2b75a..4267712 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "pino": "^8.15.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router": "^6.15.0",
     "react-router-dom": "^6.15.0"
   },
   "devDependencies": {
diff --git a/src/APIcalls.mjs b/src/APIcalls.mjs
index ad4ee0d..72ccb34 100644
--- a/src/APIcalls.mjs
+++ b/src/APIcalls.mjs
@@ -31,3 +31,11 @@ export const getPublications = async () => {
         console.error(error)
     }
 }
+export const requestEdit = async (data,type) => {
+    try {
+        const res = await API.post(`/${type}/edit`,data)
+        return res
+    } catch (error) {
+        console.error(error)
+    }
+}
diff --git a/src/Components/Table.jsx b/src/Components/Table.jsx
index 4ecf34c..b6aa372 100644
--- a/src/Components/Table.jsx
+++ b/src/Components/Table.jsx
@@ -9,7 +9,6 @@ export default function Table(props) {
   const sort = (data,sortBy) => {
     const isDate = (str) =>{
         if(str && DateTime.fromFormat(str,'yyyy-MM-dd').isValid){
-          console.log("found a date!")
             return true
         }
         return false
@@ -36,13 +35,13 @@ export default function Table(props) {
  
     
   }
-  const data = cloneDeep(props?.data)
+  const data = props?.data ? cloneDeep(props?.data)
   .map(e=>{
     for (const filter of filterList) {
       delete e[filter]
     }
     return e
-  }) ?? []
+  }) : []
 
   if (data.length === 0) { return <p>Nothing to see here...</p> }
 
diff --git a/src/loaders.mjs b/src/loaders.mjs
index 1892ef6..9b52f30 100644
--- a/src/loaders.mjs
+++ b/src/loaders.mjs
@@ -9,7 +9,8 @@ export async function storiesLoader(){
     let stories = await getStories()
     stories = stories.data
     return {stories}
-}export async function submissionsLoader(){
+}
+export async function submissionsLoader(){
     let submissions = await getSubmissions()
     submissions=submissions.data
     return { submissions }
diff --git a/src/main.jsx b/src/main.jsx
index aaf37da..7ed55f8 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -8,6 +8,7 @@ import Stories from './routes/stories';
 import Publication from './routes/publication';
 import Publications from './routes/publications';
 import { storiesLoader,publicationsLoader,submissionsLoader } from './loaders.mjs';
+import EditStory, {action as editStoryAction } from './routes/editStory';
 import './styles/index.css'
 import {
   createBrowserRouter,
@@ -44,6 +45,12 @@ const router = createBrowserRouter([
         path: "/publication/:publicationId",
         element: <Publication/>,
         loader: publicationsLoader
+      },
+      {
+        path:"/story/:storyId/edit",
+        element: <EditStory/>,
+        loader: storiesLoader,
+        action: editStoryAction
       }
     ]
   },
diff --git a/src/routes/editStory.jsx b/src/routes/editStory.jsx
new file mode 100644
index 0000000..786c305
--- /dev/null
+++ b/src/routes/editStory.jsx
@@ -0,0 +1,48 @@
+import { Form, useLoaderData, useParams, redirect } from "react-router-dom";
+import PageHeader from "../Components/PageHeader";
+import { requestEdit } from "../APIcalls.mjs";
+
+export async function action({request,params}){
+    const formData = await request.formData()
+    const data = Object.fromEntries(formData)
+    data.id=parseInt(params.storyId)
+    console.dir(data)
+    await requestEdit(data,'story')   
+    return redirect(`/story/${params.storyId}`)
+}
+
+
+
+export default function EditStory(){
+    const { storyId } = useParams()
+    const { stories } = useLoaderData()
+    const storyData = stories.find(row=>row.id==storyId)
+
+
+    return(
+        <>
+        <PageHeader super={`Story #${storyData.id}`} heading="EDIT"/>
+        <Form method="post" id="story-form">
+            <input
+                placeholder='title'
+                aria-label="Title"
+                type="text"
+                name="title"
+                defaultValue={storyData.title}    
+            />
+            <input
+                placeholder='1000'
+                aria-label="Wordcount"
+                type="number"
+                step="1"
+                name="word_count"
+                defaultValue={storyData.title}    
+            />
+        <button type="submit">SAVE</button>
+        <button type="button">CANCEL</button>
+        </Form>
+        
+        </>
+    )
+
+}
\ No newline at end of file
diff --git a/src/routes/publications.jsx b/src/routes/publications.jsx
index 8109d46..de4c828 100644
--- a/src/routes/publications.jsx
+++ b/src/routes/publications.jsx
@@ -20,7 +20,7 @@ export default function Publications(){
     ]
     return(
         <>
-        <PageHeader text="Publications"/>
+        <PageHeader heading="Publications"/>
         <Table 
         data={publications} 
         filterList={filterList}
diff --git a/src/routes/stories.jsx b/src/routes/stories.jsx
index bbb3c4c..dfd552d 100644
--- a/src/routes/stories.jsx
+++ b/src/routes/stories.jsx
@@ -16,7 +16,7 @@ export default function Stories(){
     ]
     return(
         <>
-        <PageHeader text="Stories"/>
+        <PageHeader heading="Stories"/>
         <Table 
         data={stories} 
         filterList={filterList} 
diff --git a/src/routes/story.jsx b/src/routes/story.jsx
index 9a17dd1..73ed998 100644
--- a/src/routes/story.jsx
+++ b/src/routes/story.jsx
@@ -1,18 +1,29 @@
-import { useLoaderData, useParams } from "react-router-dom";
+import { useLoaderData, useParams, Link } from "react-router-dom";
 import Table from "../Components/Table";
 import PageHeader from "../Components/PageHeader";
 import { submissionsTableOptions } from "./submissions.jsx";
+import { useState, useEffect } from "react";
 
 const { filterList=[...filterList],highlights,clickables } = submissionsTableOptions
 export default function Story(){
     const { storyId } = useParams()
     const { stories } = useLoaderData()
-    const storyData = stories.find(row=>row.id==storyId)
+    const [storyData,setStoryData] = useState(stories.find(row=>row.id==storyId))
+    useEffect(()=>{
+        setStoryData(stories.find(row=>row.id==storyId))
+        console.log("stories updated!")
+        console.dir(stories)
+    },[stories])
+    useEffect(()=>{
+        // console.log("storyData updated!")
+        // console.dir(storyData)
+    },[storyData])
    
     return(
         <>
         <div id="page">
         <PageHeader super={'Story#'+storyId} heading={storyData.title}/>
+     <div>Wordcount: {storyData.word_count}</div>
      <Table 
      data={storyData.submissions} 
      filterList={[...filterList,'story']}
@@ -21,6 +32,7 @@ export default function Story(){
      sortByDefault='date_submitted'
      header='Submissions:'
      ></Table>
+     <Link to={`/story/${storyData.id}/edit`}>EDIT</Link>
      </div>
         </>
     )
diff --git a/src/routes/submissions.jsx b/src/routes/submissions.jsx
index 20cf858..9783b03 100644
--- a/src/routes/submissions.jsx
+++ b/src/routes/submissions.jsx
@@ -37,7 +37,7 @@ export function Submissions(){
   
     return(
         <>
-        <PageHeader text="Submissions"/>
+        <PageHeader heading="Submissions"/>
         <Table 
         data={submissions} 
         filterList={filterList} 
diff --git a/src/styles/index.css b/src/styles/index.css
index 1e1bc32..1e6f7a5 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -50,6 +50,7 @@ html {
   }
   header{
     text-align: center;
+    margin:0 0 2rem 0;
   }
   button:hover{
     cursor:pointer;