diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 5cdf07f..81fea42 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -30,15 +30,19 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className}>
-        <div id="layout-container" className="flex p-4">
-          <div id="sidebar" >
-            <header className="mb-6">
-              <h1 className="font-black text-6xl antialiased inline">SubMan</h1> <Send className="inline mb-6" size={"3rem"} />
-              <p className="font-bold text-xl antialiased">The self-hosted literary<br />  submission tracker.</p>
-            </header>
-            <Navlinks />
+        <div id="layout-container" className="p-4 w-screen mt-6 flex justify-center">
+          <div className="grid grid-cols-6 w-5/6">
+            <div id="sidebar" className="col-start-1 col-end-2">
+              <header className="">
+                <h1 className="font-black text-4xl antialiased inline">SubMan</h1>
+                <p className="font-bold text-m antialiased">The self-hosted literary submission tracker.</p>
+              </header>
+              <Navlinks />
+            </div>
+            <div className="col-start-2 col-span-full">
+              {children}
+            </div>
           </div>
-          {children}
         </div>
         <Toaster />
       </body>
diff --git a/src/app/loading.tsx b/src/app/loading.tsx
new file mode 100644
index 0000000..35118e7
--- /dev/null
+++ b/src/app/loading.tsx
@@ -0,0 +1,25 @@
+import { cn } from "@/lib/utils"
+import { ComponentProps } from "react"
+export const LoadingSpinner = ({ className }: ComponentProps<"svg">) => {
+  return <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="100"
+    height="100"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className={cn("animate-spin", className)}
+  >
+    <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+  </svg>
+}
+export default function Loading() {
+  return (
+    <><div className="size-full flex justify-center items-center z">
+      <LoadingSpinner />
+    </div></>
+  )
+}
diff --git a/src/app/publication/columns.tsx b/src/app/publication/columns.tsx
index 2685abd..7db47a4 100644
--- a/src/app/publication/columns.tsx
+++ b/src/app/publication/columns.tsx
@@ -37,10 +37,12 @@ export const columns: ColumnDef<PubsWithGenres>[] = [
     },
 
   },
+
   {
     accessorKey: "link",
     header: "Link",
   },
+
   columnHelper.accessor("genres", {
     cell: props => {
       const genres = props.getValue()
@@ -50,6 +52,12 @@ export const columns: ColumnDef<PubsWithGenres>[] = [
     filterFn: "arrIncludes"
     //TODO - write custom filter function, to account for an array of objects
   }),
+
+  {
+    accessorKey: "query_after_days",
+    header: "Query After (days)"
+  },
+
   {
     id: "actions",
     // header: "Actions",
diff --git a/src/app/publication/page.tsx b/src/app/publication/page.tsx
index 3e0bc65..50edd1b 100644
--- a/src/app/publication/page.tsx
+++ b/src/app/publication/page.tsx
@@ -8,7 +8,7 @@ export type PubsWithGenres = Pub & { genres: Array<Genre> }
 export default async function Page() {
   const pubs = await getPubsWithGenres()
   return (
-    <div className="container mx-auto py-10">
+    <div className="container mx-auto">
       <DataTable data={pubs} columns={columns} />
 
     </div>
diff --git a/src/app/story/page.tsx b/src/app/story/page.tsx
index 6f8a9b4..83c6561 100644
--- a/src/app/story/page.tsx
+++ b/src/app/story/page.tsx
@@ -9,7 +9,7 @@ export type StoryWithGenres = Story & { genres: Array<Genre> }
 export default async function Page() {
   const stories: Array<StoryWithGenres> = await getStoriesWithGenres()
   return (
-    <div className="container mx-auto py-10">
+    <div className="container mx-auto">
       <DataTable columns={columns} data={stories} />
     </div>
   )
diff --git a/src/app/submission/page.tsx b/src/app/submission/page.tsx
index 047f921..5278b60 100644
--- a/src/app/submission/page.tsx
+++ b/src/app/submission/page.tsx
@@ -11,7 +11,7 @@ export type SubComplete = Sub & {
 export default async function Page() {
   const subs: Array<SubComplete> = await getSubsComplete()
   return (
-    <div className="container mx-auto py-10">
+    <div className="container">
       <DataTable data={subs} columns={columns} />
     </div>
   )
diff --git a/src/app/tailwind.css b/src/app/tailwind.css
index 5bd4fb7..0064126 100644
--- a/src/app/tailwind.css
+++ b/src/app/tailwind.css
@@ -684,6 +684,26 @@ body {
   z-index: 100;
 }
 
+.col-span-full {
+  grid-column: 1 / -1;
+}
+
+.col-start-1 {
+  grid-column-start: 1;
+}
+
+.col-start-2 {
+  grid-column-start: 2;
+}
+
+.col-end-2 {
+  grid-column-end: 2;
+}
+
+.col-end-3 {
+  grid-column-end: 3;
+}
+
 .-mx-1 {
   margin-left: -0.25rem;
   margin-right: -0.25rem;
@@ -737,6 +757,14 @@ body {
   margin-top: 1rem;
 }
 
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
+.mt-8 {
+  margin-top: 2rem;
+}
+
 .inline {
   display: inline;
 }
@@ -761,6 +789,11 @@ body {
   display: grid;
 }
 
+.size-full {
+  width: 100%;
+  height: 100%;
+}
+
 .h-10 {
   height: 2.5rem;
 }
@@ -878,6 +911,18 @@ body {
   width: 100%;
 }
 
+.w-screen {
+  width: 100vw;
+}
+
+.w-3\/5 {
+  width: 60%;
+}
+
+.w-5\/6 {
+  width: 83.333333%;
+}
+
 .min-w-\[8rem\] {
   min-width: 8rem;
 }
@@ -929,6 +974,16 @@ body {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
 .cursor-default {
   cursor: default;
 }
@@ -939,6 +994,22 @@ body {
           user-select: none;
 }
 
+.grid-cols-\[1fr_4fr\] {
+  grid-template-columns: 1fr 4fr;
+}
+
+.grid-cols-5 {
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+
+.grid-cols-12 {
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+}
+
+.grid-cols-6 {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -1053,6 +1124,14 @@ body {
   margin-bottom: calc(2rem * var(--tw-space-y-reverse));
 }
 
+.place-self-center {
+  place-self: center;
+}
+
+.self-stretch {
+  align-self: stretch;
+}
+
 .justify-self-end {
   justify-self: end;
 }
@@ -1314,6 +1393,16 @@ body {
   line-height: 1rem;
 }
 
+.text-5xl {
+  font-size: 3rem;
+  line-height: 1;
+}
+
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
 .font-black {
   font-weight: 900;
 }
@@ -1394,11 +1483,6 @@ body {
   color: hsl(var(--secondary-foreground));
 }
 
-.text-slate-50 {
-  --tw-text-opacity: 1;
-  color: rgb(248 250 252 / var(--tw-text-opacity));
-}
-
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
diff --git a/src/app/ui/navLinks.tsx b/src/app/ui/navLinks.tsx
index cc3bbb3..8d89256 100644
--- a/src/app/ui/navLinks.tsx
+++ b/src/app/ui/navLinks.tsx
@@ -20,14 +20,13 @@ export default function Navlinks(props: ComponentProps<"div">) {
   return (
     <>
       {links.map(e => (<NavLink key={e.link} href={e.link}
-        className={clsx("text-4xl font-black my-2",
+        className={clsx("text-2xl font-black my-2",
           {
             "text-destructive": pathname === e.link
           }
         )}
       >{e.label}</NavLink >))
       }
-      {pathname}
     </>
   )
 }
