diff --git a/package-lock.json b/package-lock.json
index a69c456..fc377c6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,7 +29,7 @@
         "date-fns": "^3.6.0",
         "jose": "^5.8.0",
         "lucide-react": "^0.394.0",
-        "next": "14.2.3",
+        "next": "^14.2.13",
         "next-themes": "^0.3.0",
         "react": "^18",
         "react-day-picker": "^8.10.1",
@@ -226,17 +226,19 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.3.tgz",
-      "integrity": "sha512-W7fd7IbkfmeeY2gXrzJYDx8D2lWKbVoTIj1o1ScPHNzvp30s1AuoEFSdr39bC5sjxJaxTtq3OTCZboNp0lNWHA=="
+      "version": "14.2.13",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.13.tgz",
+      "integrity": "sha512-s3lh6K8cbW1h5Nga7NNeXrbe0+2jIIYK9YaA9T7IufDWnZpozdFUp6Hf0d5rNWUKu4fEuSX2rCKlGjCrtylfDw==",
+      "license": "MIT"
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.3.tgz",
-      "integrity": "sha512-3pEYo/RaGqPP0YzwnlmPN2puaF2WMLM3apt5jLW2fFdXD9+pqcoTzRk+iZsf8ta7+quAe4Q6Ms0nR0SFGFdS1A==",
+      "version": "14.2.13",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.13.tgz",
+      "integrity": "sha512-IkAmQEa2Htq+wHACBxOsslt+jMoV3msvxCn0WFSfJSkv/scy+i/EukBKNad36grRxywaXUYJc9mxEGkeIs8Bzg==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -246,12 +248,13 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.3.tgz",
-      "integrity": "sha512-6adp7waE6P1TYFSXpY366xwsOnEXM+y1kgRpjSRVI2CBDOcbRjsJ67Z6EgKIqWIue52d2q/Mx8g9MszARj8IEA==",
+      "version": "14.2.13",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.13.tgz",
+      "integrity": "sha512-Dv1RBGs2TTjkwEnFMVL5XIfJEavnLqqwYSD6LXgTPdEy/u6FlSrLBSSfe1pcfqhFEXRAgVL3Wpjibe5wXJzWog==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -261,12 +264,13 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.3.tgz",
-      "integrity": "sha512-cuzCE/1G0ZSnTAHJPUT1rPgQx1w5tzSX7POXSLaS7w2nIUJUD+e25QoXD/hMfxbsT9rslEXugWypJMILBj/QsA==",
+      "version": "14.2.13",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.13.tgz",
+      "integrity": "sha512-yB1tYEFFqo4ZNWkwrJultbsw7NPAAxlPXURXioRl9SdW6aIefOLS+0TEsKrWBtbJ9moTDgU3HRILL6QBQnMevg==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -276,12 +280,13 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.3.tgz",
-      "integrity": "sha512-0D4/oMM2Y9Ta3nGuCcQN8jjJjmDPYpHX9OJzqk42NZGJocU2MqhBq5tWkJrUQOQY9N+In9xOdymzapM09GeiZw==",
+      "version": "14.2.13",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.13.tgz",
+      "integrity": "sha512-v5jZ/FV/eHGoWhMKYrsAweQ7CWb8xsWGM/8m1mwwZQ/sutJjoFaXchwK4pX8NqwImILEvQmZWyb8pPTcP7htWg==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -291,12 +296,13 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.3.tgz",
-      "integrity": "sha512-ENPiNnBNDInBLyUU5ii8PMQh+4XLr4pG51tOp6aJ9xqFQ2iRI6IH0Ds2yJkAzNV1CfyagcyzPfROMViS2wOZ9w==",
+      "version": "14.2.13",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.13.tgz",
+      "integrity": "sha512-aVc7m4YL7ViiRv7SOXK3RplXzOEe/qQzRA5R2vpXboHABs3w8vtFslGTz+5tKiQzWUmTmBNVW0UQdhkKRORmGA==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -306,12 +312,13 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.3.tgz",
-      "integrity": "sha512-BTAbq0LnCbF5MtoM7I/9UeUu/8ZBY0i8SFjUMCbPDOLv+un67e2JgyN4pmgfXBwy/I+RHu8q+k+MCkDN6P9ViQ==",
+      "version": "14.2.13",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.13.tgz",
+      "integrity": "sha512-4wWY7/OsSaJOOKvMsu1Teylku7vKyTuocvDLTZQq0TYv9OjiYYWt63PiE1nTuZnqQ4RPvME7Xai+9enoiN0Wrg==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -321,12 +328,13 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.3.tgz",
-      "integrity": "sha512-AEHIw/dhAMLNFJFJIJIyOFDzrzI5bAjI9J26gbO5xhAKHYTZ9Or04BesFPXiAYXDNdrwTP2dQceYA4dL1geu8A==",
+      "version": "14.2.13",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.13.tgz",
+      "integrity": "sha512-uP1XkqCqV2NVH9+g2sC7qIw+w2tRbcMiXFEbMihkQ8B1+V6m28sshBwAB0SDmOe0u44ne1vFU66+gx/28RsBVQ==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
@@ -336,12 +344,13 @@
       }
     },
     "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.3.tgz",
-      "integrity": "sha512-vga40n1q6aYb0CLrM+eEmisfKCR45ixQYXuBXxOOmmoV8sYST9k7E3US32FsY+CkkF7NtzdcebiFT4CHuMSyZw==",
+      "version": "14.2.13",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.13.tgz",
+      "integrity": "sha512-V26ezyjPqQpDBV4lcWIh8B/QICQ4v+M5Bo9ykLN+sqeKKBxJVDpEc6biDVyluTXTC40f5IqCU0ttth7Es2ZuMw==",
       "cpu": [
         "ia32"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
@@ -351,12 +360,13 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.3.tgz",
-      "integrity": "sha512-Q1/zm43RWynxrO7lW4ehciQVj+5ePBhOK+/K2P7pLFX3JaJ/IZVC69SHidrmZSOkqz7ECIOhhy7XhAFG4JYyHA==",
+      "version": "14.2.13",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.13.tgz",
+      "integrity": "sha512-WwzOEAFBGhlDHE5Z73mNU8CO8mqMNLqaG+AO9ETmzdCQlJhVtWZnOl2+rqgVQS+YHunjOWptdFmNfbpwcUuEsw==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
@@ -6557,11 +6567,12 @@
       "peer": true
     },
     "node_modules/next": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/next/-/next-14.2.3.tgz",
-      "integrity": "sha512-dowFkFTR8v79NPJO4QsBUtxv0g9BrS/phluVpMAt2ku7H+cbcBJlopXjkWlwxrk/xGqMemr7JkGPGemPrLLX7A==",
+      "version": "14.2.13",
+      "resolved": "https://registry.npmjs.org/next/-/next-14.2.13.tgz",
+      "integrity": "sha512-BseY9YNw8QJSwLYD7hlZzl6QVDoSFHL/URN5K64kVEVpCsSOWeyjbIGK+dZUaRViHTaMQX8aqmnn0PHBbGZezg==",
+      "license": "MIT",
       "dependencies": {
-        "@next/env": "14.2.3",
+        "@next/env": "14.2.13",
         "@swc/helpers": "0.5.5",
         "busboy": "1.6.0",
         "caniuse-lite": "^1.0.30001579",
@@ -6576,15 +6587,15 @@
         "node": ">=18.17.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "14.2.3",
-        "@next/swc-darwin-x64": "14.2.3",
-        "@next/swc-linux-arm64-gnu": "14.2.3",
-        "@next/swc-linux-arm64-musl": "14.2.3",
-        "@next/swc-linux-x64-gnu": "14.2.3",
-        "@next/swc-linux-x64-musl": "14.2.3",
-        "@next/swc-win32-arm64-msvc": "14.2.3",
-        "@next/swc-win32-ia32-msvc": "14.2.3",
-        "@next/swc-win32-x64-msvc": "14.2.3"
+        "@next/swc-darwin-arm64": "14.2.13",
+        "@next/swc-darwin-x64": "14.2.13",
+        "@next/swc-linux-arm64-gnu": "14.2.13",
+        "@next/swc-linux-arm64-musl": "14.2.13",
+        "@next/swc-linux-x64-gnu": "14.2.13",
+        "@next/swc-linux-x64-musl": "14.2.13",
+        "@next/swc-win32-arm64-msvc": "14.2.13",
+        "@next/swc-win32-ia32-msvc": "14.2.13",
+        "@next/swc-win32-x64-msvc": "14.2.13"
       },
       "peerDependencies": {
         "@opentelemetry/api": "^1.1.0",
diff --git a/package.json b/package.json
index 92133d8..fc966ac 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
     "date-fns": "^3.6.0",
     "jose": "^5.8.0",
     "lucide-react": "^0.394.0",
-    "next": "14.2.3",
+    "next": "^14.2.13",
     "next-themes": "^0.3.0",
     "react": "^18",
     "react-day-picker": "^8.10.1",
diff --git a/prisma/dev.db b/prisma/dev.db
index 12b04eb..403cac6 100644
Binary files a/prisma/dev.db and b/prisma/dev.db differ
diff --git a/src/@/components/ui/table.tsx b/src/@/components/ui/table.tsx
index 7f3502f..b4438a7 100644
--- a/src/@/components/ui/table.tsx
+++ b/src/@/components/ui/table.tsx
@@ -73,7 +73,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      "h-12 md:px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
       className
     )}
     {...props}
@@ -87,7 +87,7 @@ const TableCell = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <td
     ref={ref}
-    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    className={cn("p-2 md:p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
     {...props}
   />
 ))
diff --git a/src/app/api/auth/actions.ts b/src/app/api/auth/actions.ts
index a7bf069..8d9944e 100644
--- a/src/app/api/auth/actions.ts
+++ b/src/app/api/auth/actions.ts
@@ -95,6 +95,7 @@ export async function login(userLogin: LoginSchema) {
 		if (!passwordIsValid) throw new Error("password is not valid")
 		return { email: userLogin.email }
 	} catch (error) {
+		console.error("WHOOPS", error)
 		throw new Error('login failed')
 	}
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index fde9763..1e5d67b 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -6,12 +6,11 @@ import "./globals.css";
 import Navlinks from "./ui/navLinks";
 import { ModeToggle } from "./ui/modeToggle";
 import { inter } from "./ui/fonts";
-import { LogOutIcon } from "lucide-react";
-import { Button } from "@/components/ui/button";
 import LogoutButton from "./ui/logoutButton";
 
 
 
+
 export const metadata: Metadata = {
   title: "Subman",
   description: "A self-hosted literary submission tracker."
@@ -32,14 +31,14 @@ export default function RootLayout({
           enableSystem
           disableTransitionOnChange
         >
-          <div id="layout-container" className="p-4 w-screen h-screen mt-6 flex justify-center">
-            <div className="w-5/6 flex">
-              <div id="sidebar" className="h-5/6 flex flex-col"> <header className="">
-                <h1 className="font-black text-4xl text-primary-foreground bg-primary antialiased w-full p-2 rounded-tl-3xl pl-6 pr-4">SubMan</h1>
-                <p className="mt-2 mx-1 text-sm antialiased w-40">The self-hosted literary submission tracker.</p>
+          <div id="layout-container" className="md:p-4 w-screen h-screen md:mt-6 flex justify-center">
+            <div className="w-11/12 md:w-5/6 flex  flex-col md:flex-row">
+              <div id="sidebar" className="h-5/6 flex justify-evenly content-center flex-row md:flex-col"> <header className="">
+                <h1 className="font-black text-4xl text-primary-foreground bg-primary antialiased w-full p-2 rounded-tl-3xl pl-6 pr-4 hidden md:block">SubMan</h1>
+                <p className="mt-2 mx-1 text-sm antialiased w-40 hidden md:block">The self-hosted literary submission tracker.</p>
               </header>
-                <Navlinks className="mt-6" />
-                <footer className="mt-auto flex justify-center"><ModeToggle /><LogoutButton />
+                <Navlinks className="md:mt-6" />
+                <footer className="my-auto md:mt-auto flex justify-center"><ModeToggle /><LogoutButton />
                 </footer>
               </div>
               <div className="flex justify-center w-full">
diff --git a/src/app/story/columns.tsx b/src/app/story/columns.tsx
index cc189b2..04d87bd 100644
--- a/src/app/story/columns.tsx
+++ b/src/app/story/columns.tsx
@@ -1,7 +1,7 @@
 "use client"
 import { ColumnDef, createColumnHelper } from "@tanstack/react-table"
 import { StoryWithGenres } from "./page"
-import { ArrowUpDown } from "lucide-react"
+import { ArrowUpDown, BookType, Drama, Tally5 } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import GenreBadges from "app/ui/genreBadges"
 import { selectCol } from "app/ui/tables/selectColumn"
@@ -19,9 +19,13 @@ export const columns: ColumnDef<StoryWithGenres>[] = [
       return (
         <Button
           variant="ghost"
+          className="px-1"
           onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
         >
-          Title
+          <span className="hidden sm:block">
+            Title
+          </span>
+          <span className="display-block sm:hidden"><BookType /></span>
           <ArrowUpDown className="ml-2 h-4 w-4" />
         </Button>
       )
@@ -36,9 +40,15 @@ export const columns: ColumnDef<StoryWithGenres>[] = [
       return (
         <Button
           variant="ghost"
+          className="px-1"
           onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
         >
-          Word Count
+          <span className="hidden sm:block">
+            Word Count
+          </span>
+          <span className="sm:hidden">
+            <Tally5 />
+          </span>
           <ArrowUpDown className="ml-2 h-4 w-4" />
         </Button>
       )
@@ -51,6 +61,12 @@ export const columns: ColumnDef<StoryWithGenres>[] = [
     }
   },
   columnHelper.accessor("genres", {
+    header: () => (
+      <div className="w-fit mx-auto">
+        <span className="hidden sm:block">Genres</span>
+        <span className="sm:hidden"><Drama /></span>
+      </div>
+    ),
     cell: GenrePickerInputCell,
     filterFn: "arrIncludes",
     meta: {}
diff --git a/src/app/story/create.tsx b/src/app/story/create.tsx
index 912ab0a..0f76956 100644
--- a/src/app/story/create.tsx
+++ b/src/app/story/create.tsx
@@ -5,6 +5,7 @@ import { Button } from "@/components/ui/button";
 import { ComponentProps } from "react";
 import { Genre } from "@prisma/client";
 import StoryForm from "app/ui/forms/story";
+import { Plus } from "lucide-react";
 
 
 export default function CreateStoryDialog({ genres }: ComponentProps<"div"> & { genres: Genre[] }) {
@@ -12,7 +13,10 @@ export default function CreateStoryDialog({ genres }: ComponentProps<"div"> & {
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button>Create new story</Button>
+        <div>
+          <Button className="hidden md:display-block">Create new story</Button>
+          <Button className="display-block md:hidden"><Plus /> </Button>
+        </div>
       </DialogTrigger>
       <DialogContent>
         <DialogHeader>
diff --git a/src/app/story/page.tsx b/src/app/story/page.tsx
index 0fde7ef..1d886d6 100644
--- a/src/app/story/page.tsx
+++ b/src/app/story/page.tsx
@@ -19,7 +19,7 @@ export default async function Page() {
 
 
   return (
-    <div className="container mx-auto">
+    <div className="container px-1 mx-auto">
       <DataTable columns={columns} data={storiesWithGenres} tableName="story"
         genres={genres}
       >
diff --git a/src/app/tailwind.css b/src/app/tailwind.css
index df53417..efc690c 100644
--- a/src/app/tailwind.css
+++ b/src/app/tailwind.css
@@ -642,6 +642,10 @@ body {
   visibility: hidden;
 }
 
+.collapse {
+  visibility: collapse;
+}
+
 .fixed {
   position: fixed;
 }
@@ -706,6 +710,10 @@ body {
   z-index: 100;
 }
 
+.float-right {
+  float: right;
+}
+
 .m-auto {
   margin: auto;
 }
@@ -740,6 +748,16 @@ body {
   margin-bottom: 1.5rem;
 }
 
+.my-auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.mx-9 {
+  margin-left: 2.25rem;
+  margin-right: 2.25rem;
+}
+
 .ml-2 {
   margin-left: 0.5rem;
 }
@@ -768,6 +786,26 @@ body {
   margin-top: auto;
 }
 
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
+.mr-9 {
+  margin-right: 2.25rem;
+}
+
+.mr-6 {
+  margin-right: 1.5rem;
+}
+
+.mr-4 {
+  margin-right: 1rem;
+}
+
+.block {
+  display: block;
+}
+
 .flex {
   display: flex;
 }
@@ -788,6 +826,10 @@ body {
   display: grid;
 }
 
+.hidden {
+  display: none;
+}
+
 .size-full {
   width: 100%;
   height: 100%;
@@ -955,6 +997,10 @@ body {
   width: 100vw;
 }
 
+.w-11\/12 {
+  width: 91.666667%;
+}
+
 .min-w-\[8rem\] {
   min-width: 8rem;
 }
@@ -1068,6 +1114,10 @@ body {
   flex-wrap: wrap;
 }
 
+.content-center {
+  align-content: center;
+}
+
 .items-start {
   align-items: flex-start;
 }
@@ -1092,6 +1142,10 @@ body {
   justify-content: space-between;
 }
 
+.justify-evenly {
+  justify-content: space-evenly;
+}
+
 .gap-1 {
   gap: 0.25rem;
 }
@@ -1177,6 +1231,18 @@ body {
   margin-bottom: calc(2rem * var(--tw-space-y-reverse));
 }
 
+.space-x-0 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0px * var(--tw-space-x-reverse));
+  margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-x-9 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(2.25rem * var(--tw-space-x-reverse));
+  margin-left: calc(2.25rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .justify-self-end {
   justify-self: end;
 }
@@ -1308,6 +1374,11 @@ body {
   background-color: transparent;
 }
 
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
 .fill-current {
   fill: currentColor;
 }
@@ -1395,6 +1466,11 @@ body {
   padding-bottom: 1rem;
 }
 
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
 .pl-3 {
   padding-left: 0.75rem;
 }
@@ -1423,6 +1499,10 @@ body {
   padding-top: 0.25rem;
 }
 
+.pr-1 {
+  padding-right: 0.25rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -1474,6 +1554,16 @@ body {
   line-height: 1rem;
 }
 
+.text-9xl {
+  font-size: 8rem;
+  line-height: 1;
+}
+
+.text-5xl {
+  font-size: 3rem;
+  line-height: 1;
+}
+
 .font-black {
   font-weight: 900;
 }
@@ -2299,6 +2389,18 @@ body {
     top: auto;
   }
 
+  .sm\:mt-1 {
+    margin-top: 0.25rem;
+  }
+
+  .sm\:block {
+    display: block;
+  }
+
+  .sm\:hidden {
+    display: none;
+  }
+
   .sm\:flex-row {
     flex-direction: row;
   }
@@ -2343,9 +2445,72 @@ body {
 }
 
 @media (min-width: 768px) {
+  .md\:visible {
+    visibility: visible;
+  }
+
+  .md\:mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .md\:mt-6 {
+    margin-top: 1.5rem;
+  }
+
+  .md\:mt-auto {
+    margin-top: auto;
+  }
+
+  .md\:mt-4 {
+    margin-top: 1rem;
+  }
+
+  .md\:block {
+    display: block;
+  }
+
+  .md\:hidden {
+    display: none;
+  }
+
+  .md\:w-5\/6 {
+    width: 83.333333%;
+  }
+
+  .md\:w-24 {
+    width: 6rem;
+  }
+
   .md\:max-w-\[420px\] {
     max-width: 420px;
   }
+
+  .md\:flex-row {
+    flex-direction: row;
+  }
+
+  .md\:flex-col {
+    flex-direction: column;
+  }
+
+  .md\:gap-2 {
+    gap: 0.5rem;
+  }
+
+  .md\:p-4 {
+    padding: 1rem;
+  }
+
+  .md\:py-4 {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+
+  .md\:px-4 {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
 }
 
 .\[\&\:has\(\[aria-selected\]\)\]\:bg-accent:has([aria-selected]) {
diff --git a/src/app/ui/genreBadges.tsx b/src/app/ui/genreBadges.tsx
index 5d3dcc9..c2122e7 100644
--- a/src/app/ui/genreBadges.tsx
+++ b/src/app/ui/genreBadges.tsx
@@ -5,7 +5,7 @@ import { Badge } from "@/components/ui/badge";
 export default function GenreBadges(props: ComponentProps<"div"> & { genres: Array<Genre> }) {
   return (
     <div className={"flex flex-wrap gap-1 justify-center " + props.className}>
-      {props.genres.map((e: Genre) => (<Badge key={e.name}>{e.name}</Badge>))}
+      {props.genres.map((e: Genre) => (<Badge className="" key={e.name}>{e.name}</Badge>))}
     </div>
   )
 }
diff --git a/src/app/ui/navLinks.tsx b/src/app/ui/navLinks.tsx
index 3f736fd..2cf7cf9 100644
--- a/src/app/ui/navLinks.tsx
+++ b/src/app/ui/navLinks.tsx
@@ -4,6 +4,7 @@ import { usePathname } from "next/navigation";
 import { ComponentProps } from "react";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
+import { ArrowUpNarrowWide, BookOpen, BookOpenText } from "lucide-react";
 
 
 function NavLink(props: ComponentProps<"div"> & { href: string }) {
@@ -14,21 +15,24 @@ function NavLink(props: ComponentProps<"div"> & { href: string }) {
 export default function Navlinks(props: ComponentProps<"div">) {
   const pathname = usePathname()
   const links = [
-    { link: "/story", label: "STORIES" },
-    { link: "/publication", label: "PUBLICATIONS" },
-    { link: "/submission", label: "SUBMISSIONS" },
+    { link: "/story", label: "STORIES", icon: <BookOpenText /> },
+    { link: "/publication", label: "PUBLICATIONS", icon: <BookOpen /> },
+    { link: "/submission", label: "SUBMISSIONS", icon: <ArrowUpNarrowWide /> },
   ]
   return (
     <div className={props.className}>
-      <div className="text-secondary-foreground" >
+      <div className="text-secondary-foreground flex flex-row md:flex-col" >
         {
           links.map(e => (<NavLink key={e.link} href={e.link}
-            className={twMerge(clsx("text-xl drop-shadow  font-black my-2 w-full p-2 pl-6 antialiased text-secondary-foreground bg-secondary rounded-l-3xl",
+            className={twMerge(clsx("text-xl drop-shadow  font-black my-2 w-full p-2 pl-6 antialiased text-secondary-foreground bg-secondary rounded-l-3xl ",
               {
                 "text-primary-foreground bg-primary": pathname.includes(e.link)
               }
             ))}
-          ><p className="drop-shadow-sm">{e.label}</p></NavLink >))
+          >
+            <p className="drop-shadow-sm hidden md:block">{e.label}</p>
+            <span className="block md:hidden">{e.icon}</span>
+          </NavLink >))
         }
       </ div>
     </div>
diff --git a/src/app/ui/tables/data-table.tsx b/src/app/ui/tables/data-table.tsx
index 90fd360..4765b7c 100644
--- a/src/app/ui/tables/data-table.tsx
+++ b/src/app/ui/tables/data-table.tsx
@@ -122,11 +122,11 @@ export function DataTable<TData, TValue>({
   const [filterBy, setFilterBy] = useState(table.getAllColumns()[0])
   const [isContextMenuOpen, setIsContextMenuOpen] = useState(false)
   return (<>
-    <div className="flex justify-between items-center py-4">
+    <div className="flex justify-between items-center py-1 md:py-4">
       <div className="flex gap-2">
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button variant="outline" className="ml-auto">
+            <Button variant="outline" className="hidden md:display-blockml-auto">
               Filter by
             </Button>
           </DropdownMenuTrigger>
@@ -251,6 +251,7 @@ export function DataTable<TData, TValue>({
     </div>
     <div className="rounded-md border">
 
+
       <Table>
         <TableHeader>
           {table.getHeaderGroups().map((headerGroup) => (
diff --git a/src/app/ui/tables/inputs/numberInput.tsx b/src/app/ui/tables/inputs/numberInput.tsx
index 0a13cee..9602ee3 100644
--- a/src/app/ui/tables/inputs/numberInput.tsx
+++ b/src/app/ui/tables/inputs/numberInput.tsx
@@ -78,7 +78,7 @@ export default function NumberInputCell(props: CellContext<any, any>) {
                   <FormControl
                   >
                     <Input
-                      className="w-24"
+                      className="md:w-24"
                       type="number"
                       autoFocus={true}
                       step={props.column.columnDef.meta?.step}
diff --git a/src/app/ui/tables/selectColumn.tsx b/src/app/ui/tables/selectColumn.tsx
index 8432b35..efff4b4 100644
--- a/src/app/ui/tables/selectColumn.tsx
+++ b/src/app/ui/tables/selectColumn.tsx
@@ -5,8 +5,9 @@ export const selectCol = {
   id: "select",
   header: (props: HeaderContext<any, any>) => {
     return (
-      <div className="flex items-center justify-center">
+      <div className="flex items-start justify-left mx-auto">
         <Checkbox
+          className="mr-4 ml-2"
           checked={props.table.getIsAllRowsSelected()}
           onCheckedChange={props.table.toggleAllRowsSelected}
           aria-label="select/deselect all rows"
@@ -18,8 +19,9 @@ export const selectCol = {
 
   cell: (props: CellContext<any, any>) => {
     return (
-      <div className="flex items-center justify-center">
+      <div className="flex items-start justify-left">
         <Checkbox
+          className="mr-4 ml-2"
           checked={props.row.getIsSelected()}
           onCheckedChange={props.row.toggleSelected}
           aria-label="select/deselect row"