diff --git a/src/@/components/ui/table.tsx b/src/@/components/ui/table.tsx
index d42331f..1430b66 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 md:px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      "h-12 sm: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("md:p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    className={cn("sm:p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
     {...props}
   />
 ))
diff --git a/src/@/components/ui/toast.tsx b/src/@/components/ui/toast.tsx
index 521b94b..4e9037b 100644
--- a/src/@/components/ui/toast.tsx
+++ b/src/@/components/ui/toast.tsx
@@ -16,7 +16,7 @@ const ToastViewport = React.forwardRef<
   <ToastPrimitives.Viewport
     ref={ref}
     className={cn(
-      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col sm:max-w-[420px]",
       className
     )}
     {...props}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index a42e354..339af6b 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -31,14 +31,14 @@ export default function RootLayout({
           enableSystem
           disableTransitionOnChange
         >
-          <div id="layout-container" className="md:p-4 w-screen h-screen mt-2 md:mt-6 flex justify-center">
-            <div className="w-full md:w-5/6 flex flex-col md:flex-row">
-              <div id="sidebar" className=" flex flex-row md:flex-col  justify-between"> <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>
+          <div id="layout-container" className="sm:p-4 w-screen h-screen mt-2 sm:mt-6 flex justify-center">
+            <div className="w-full sm:w-5/6 flex flex-col sm:flex-row">
+              <div id="sidebar" className=" flex flex-row sm:flex-col  justify-between"> <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 sm:block">SubMan</h1>
+                <p className="mt-2 mx-1 text-sm antialiased w-40 hidden sm:block">The self-hosted literary submission tracker.</p>
               </header>
-                <Navlinks className="md:mt-6" />
-                <footer className="my-auto md:mt-auto flex justify-center"><ModeToggle /><LogoutButton />
+                <Navlinks className="sm:mt-6" />
+                <footer className="my-auto sm:mt-auto flex justify-center"><ModeToggle /><LogoutButton />
                 </footer>
               </div>
               <div className="flex justify-center w-full">
diff --git a/src/app/publication/columns.tsx b/src/app/publication/columns.tsx
index 5c19fed..111685a 100644
--- a/src/app/publication/columns.tsx
+++ b/src/app/publication/columns.tsx
@@ -32,8 +32,8 @@ export const columns: ColumnDef<PubsWithGenres>[] = [
     },
     cell: cell => (
       <>
-        <p className="block text-xs max-w-24 break-words md:hidden">{cell.getValue()}</p>
-        <TextInputCell cellContext={cell} className="hidden md:block" />
+        <p className="block text-xs max-w-24 break-words sm:hidden">{cell.getValue()}</p>
+        <TextInputCell cellContext={cell} className="hidden sm:block" />
       </>
     ),
     meta: { formSchema: pubSchema }
@@ -49,8 +49,8 @@ export const columns: ColumnDef<PubsWithGenres>[] = [
     ),
     cell: cell => (
       <>
-        <p className="block text-xs max-w-16 truncate md:hidden">{cell.getValue()}</p>
-        <TextInputCell cellContext={cell} className="hidden md:block" />
+        <p className="block text-xs max-w-16 truncate sm:hidden">{cell.getValue()}</p>
+        <TextInputCell cellContext={cell} className="hidden sm:block" />
       </>
     ),
     meta: { formSchema: pubSchema }
@@ -78,8 +78,8 @@ export const columns: ColumnDef<PubsWithGenres>[] = [
     ),
     cell: cell => (
       <>
-        <p className="block md:hidden text-center">{cell.getValue()}</p>
-        <NumberInputCell cellContext={cell} className="hidden md:block" />
+        <p className="block sm:hidden text-center">{cell.getValue()}</p>
+        <NumberInputCell cellContext={cell} className="hidden sm:block" />
       </>
     ),
     meta: {
diff --git a/src/app/publication/create.tsx b/src/app/publication/create.tsx
index a50db64..8054d40 100644
--- a/src/app/publication/create.tsx
+++ b/src/app/publication/create.tsx
@@ -20,8 +20,8 @@ export default function CreatePubDialog({ genres }: ComponentProps<"div"> & { ge
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
         <Button>
-          <span className="hidden md:block">Create new publication</span>
-          <Plus className="block md:hidden" />
+          <span className="hidden sm:block">Create new publication</span>
+          <Plus className="block sm:hidden" />
         </Button>
       </DialogTrigger>
       <DialogContent>
diff --git a/src/app/publication/page.tsx b/src/app/publication/page.tsx
index 2b6c301..4bd18bb 100644
--- a/src/app/publication/page.tsx
+++ b/src/app/publication/page.tsx
@@ -12,7 +12,7 @@ export default async function Page() {
   const genres = await getGenres()
   const pubs = await getPubsWithGenres()
   return (
-    <div className="container px-1 md:px-4 mx-auto">
+    <div className="container px-1 sm:px-4 mx-auto">
       <DataTable data={pubs} columns={columns} tableName="pub" genres={genres}>
         <CreatePubDialog genres={genres} />
       </DataTable>
diff --git a/src/app/story/columns.tsx b/src/app/story/columns.tsx
index 3f92040..89606ef 100644
--- a/src/app/story/columns.tsx
+++ b/src/app/story/columns.tsx
@@ -31,8 +31,8 @@ export const columns: ColumnDef<StoryWithGenres>[] = [
     },
     cell: cell => (
       <>
-        <p className="block break-words max-w-36 md:hidden text-xs">{cell.getValue()}</p>
-        <TextInputCell cellContext={cell} className="hidden md:block" />
+        <p className="block break-words max-w-36 sm:hidden text-xs">{cell.getValue()}</p>
+        <TextInputCell cellContext={cell} className="hidden sm:block" />
       </>
     ),
     meta: { formSchema: storySchema }
@@ -59,8 +59,8 @@ export const columns: ColumnDef<StoryWithGenres>[] = [
     enableColumnFilter: false,
     cell: cell => (
       <>
-        <p className="block md:hidden text-center text-xs">{cell.getValue()}</p>
-        <NumberInputCell cellContext={cell} className="hidden md:block" />
+        <p className="block sm:hidden text-center text-xs">{cell.getValue()}</p>
+        <NumberInputCell cellContext={cell} className="hidden sm:block" />
       </>
     ),
     meta: {
diff --git a/src/app/story/create.tsx b/src/app/story/create.tsx
index d3cba95..3efd74b 100644
--- a/src/app/story/create.tsx
+++ b/src/app/story/create.tsx
@@ -19,8 +19,8 @@ export default function CreateStoryDialog({ genres }: ComponentProps<"div"> & {
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
         <div>
-          <Button className="hidden md:block">Create new story</Button>
-          <Button className="block md:hidden"><Plus /> </Button>
+          <Button className="hidden sm:block">Create new story</Button>
+          <Button className="block sm:hidden"><Plus /> </Button>
         </div>
       </DialogTrigger>
       <DialogContent>
diff --git a/src/app/story/page.tsx b/src/app/story/page.tsx
index 5a2ca84..0117fa3 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 px-1 md:px-4 mx-auto">
+    <div className="container px-1 sm:px-4 mx-auto">
       <DataTable columns={columns} data={storiesWithGenres} tableName="story"
         genres={genres}
       >
diff --git a/src/app/submission/columns.tsx b/src/app/submission/columns.tsx
index 8143d42..f75424f 100644
--- a/src/app/submission/columns.tsx
+++ b/src/app/submission/columns.tsx
@@ -21,8 +21,8 @@ export const columns: ColumnDef<SubComplete>[] = [
     id: "story",
     header: () => (
       <>
-        <span className="hidden md:block">Story</span>
-        <NotepadText className="block md:hidden" />
+        <span className="hidden sm:block">Story</span>
+        <NotepadText className="block sm:hidden" />
       </>
     ),
     cell: (props: CellContext<any, any>) => (<TitleContainer>{props.getValue()}</TitleContainer>)
@@ -37,8 +37,8 @@ export const columns: ColumnDef<SubComplete>[] = [
     id: "pub",
     header: () => (
       <>
-        <span className="hidden md:block">Publication</span>
-        <BookText className="block md:hidden" />
+        <span className="hidden sm:block">Publication</span>
+        <BookText className="block sm:hidden" />
       </>
     ),
     cell: (props: CellContext<any, any>) => (<TitleContainer>{props.getValue()}</TitleContainer>)
@@ -53,16 +53,16 @@ export const columns: ColumnDef<SubComplete>[] = [
           className="p-0"
           onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
         >
-          <span className="hidden md:block"> Date Submitted </span>
-          <CalendarPlus className="block md:hidden" />
-          <ArrowUpDown className="ml-2 h-4 w-4 hidden md:block" />
+          <span className="hidden sm:block"> Date Submitted </span>
+          <CalendarPlus className="block sm:hidden" />
+          <ArrowUpDown className="ml-2 h-4 w-4 hidden sm:block" />
         </Button>
       )
     },
     enableColumnFilter: false,
     sortingFn: "datetime",
     cell: (props: CellContext<any, any>) => (
-      <p className="w-full text-center text-xs md:text-sm">{props.getValue().toLocaleDateString('ES', {
+      <p className="w-full text-center text-xs sm:text-sm">{props.getValue().toLocaleDateString('ES', {
         day: 'numeric',
         month: 'numeric',
         year: '2-digit'
@@ -79,15 +79,15 @@ export const columns: ColumnDef<SubComplete>[] = [
           className="p-0"
           onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
         >
-          <span className="hidden md:block"> Date Responded </span>
-          <CalendarMinus className="block md:hidden" />
-          <ArrowUpDown className="ml-2 h-4 w-4 hidden md:block" />
+          <span className="hidden sm:block"> Date Responded </span>
+          <CalendarMinus className="block sm:hidden" />
+          <ArrowUpDown className="ml-2 h-4 w-4 hidden sm:block" />
         </Button>
       )
     },
     enableColumnFilter: false,
     sortingFn: "datetime",
-    cell: (props: CellContext<any, any>) => (<p className="w-full text-center text-xs md:text-sm">{props.getValue()?.toLocaleDateString('ES', {
+    cell: (props: CellContext<any, any>) => (<p className="w-full text-center text-xs sm:text-sm">{props.getValue()?.toLocaleDateString('ES', {
       day: 'numeric',
       month: 'numeric',
       year: '2-digit'
@@ -108,13 +108,13 @@ export const columns: ColumnDef<SubComplete>[] = [
           className="p-0"
           onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
         >
-          <span className="hidden md:block"> Response </span>
-          <MessageCircleReply className="block md:hidden" />
-          <ArrowUpDown className="ml-2 h-4 w-4 hidden md:block" />
+          <span className="hidden sm:block"> Response </span>
+          <MessageCircleReply className="block sm:hidden" />
+          <ArrowUpDown className="ml-2 h-4 w-4 hidden sm:block" />
         </Button>
       )
     },
-    cell: (props: CellContext<any, any>) => (<p className="w-full text-center text-xs md:text-sm">{props.getValue()}</p>)
+    cell: (props: CellContext<any, any>) => (<p className="w-full text-center text-xs sm:text-sm">{props.getValue()}</p>)
   },
 
 ]
diff --git a/src/app/submission/create.tsx b/src/app/submission/create.tsx
index 0c26631..221f2b9 100644
--- a/src/app/submission/create.tsx
+++ b/src/app/submission/create.tsx
@@ -30,11 +30,11 @@ export default function CreateSubmissionDialog({ stories, pubs, responses, defau
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
         <Button>
-          <span className="hidden md:block">Create new submission</span>
-          <Plus className="block md:hidden" />
+          <span className="hidden sm:block">Create new submission</span>
+          <Plus className="block sm:hidden" />
         </Button>
       </DialogTrigger>
-      <DialogContent className="text-xs md:text-sm">
+      <DialogContent className="text-xs sm:text-sm">
         <DialogHeader>
           <DialogTitle>New submission</DialogTitle>
           <DialogDescription>Create an entry for a new story i.e. a thing you intend to submit for publication.</DialogDescription>
diff --git a/src/app/submission/page.tsx b/src/app/submission/page.tsx
index 43ad6ee..024e61d 100644
--- a/src/app/submission/page.tsx
+++ b/src/app/submission/page.tsx
@@ -18,7 +18,7 @@ export default async function Page() {
   const genres = await getGenres()
 
   return (
-    <div className="container px-1 md:px-4 mx-auto">
+    <div className="container px-1 sm:px-4 mx-auto">
       <DataTable data={subs} columns={columns} tableName="sub"
         stories={stories}
         pubs={pubs}
diff --git a/src/app/tailwind.css b/src/app/tailwind.css
index 3e4b5f8..0673271 100644
--- a/src/app/tailwind.css
+++ b/src/app/tailwind.css
@@ -2340,6 +2340,14 @@ body {
     top: auto;
   }
 
+  .sm\:mt-6 {
+    margin-top: 1.5rem;
+  }
+
+  .sm\:mt-auto {
+    margin-top: auto;
+  }
+
   .sm\:block {
     display: block;
   }
@@ -2348,6 +2356,18 @@ body {
     display: none;
   }
 
+  .sm\:w-24 {
+    width: 6rem;
+  }
+
+  .sm\:w-5\/6 {
+    width: 83.333333%;
+  }
+
+  .sm\:max-w-\[420px\] {
+    max-width: 420px;
+  }
+
   .sm\:flex-row {
     flex-direction: row;
   }
@@ -2378,14 +2398,49 @@ body {
     margin-bottom: calc(0px * var(--tw-space-y-reverse));
   }
 
+  .sm\:space-y-8 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(2rem * var(--tw-space-y-reverse));
+  }
+
   .sm\:rounded-lg {
     border-radius: var(--radius);
   }
 
+  .sm\:rounded-l-3xl {
+    border-top-left-radius: 1.5rem;
+    border-bottom-left-radius: 1.5rem;
+  }
+
+  .sm\:p-4 {
+    padding: 1rem;
+  }
+
+  .sm\:px-4 {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .sm\:py-4 {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+
   .sm\:text-left {
     text-align: left;
   }
 
+  .sm\:text-base {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  .sm\:text-sm {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+
   .data-\[state\=open\]\:sm\:slide-in-from-bottom-full[data-state=open] {
     --tw-enter-translate-y: 100%;
   }
diff --git a/src/app/ui/forms/editSub.tsx b/src/app/ui/forms/editSub.tsx
index 2e10ad2..61b38cb 100644
--- a/src/app/ui/forms/editSub.tsx
+++ b/src/app/ui/forms/editSub.tsx
@@ -99,13 +99,13 @@ export default function EditSubmissionForm({ stories, pubs, responses, defaults,
 
 	return (
 		<Form {...form}>
-			<form id="subform" onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-2 md:space-y-8">
+			<form id="subform" onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-2 sm:space-y-8">
 				<FormField
 					control={form.control}
 					name="storyId"
 					render={({ field }) => (
 						<FormItem>
-							<FormLabel className="text-sm md:text-base">Story</FormLabel>
+							<FormLabel className="text-sm sm:text-base">Story</FormLabel>
 							<Select onValueChange={field.onChange} defaultValue={field.value}>
 								<FormControl>
 									<SelectTrigger>
@@ -118,7 +118,7 @@ export default function EditSubmissionForm({ stories, pubs, responses, defaults,
 									{storiesSelectItems}
 								</SelectContent>
 							</Select>
-							<FormDescription className="text-xs md:text-base">The piece you submitted</FormDescription>
+							<FormDescription className="text-xs sm:text-base">The piece you submitted</FormDescription>
 							<FormMessage />
 						</FormItem>
 					)}
@@ -128,7 +128,7 @@ export default function EditSubmissionForm({ stories, pubs, responses, defaults,
 					name="pubId"
 					render={({ field }) => (
 						<FormItem>
-							<FormLabel className="text-sm md:text-base">Publication</FormLabel>
+							<FormLabel className="text-sm sm:text-base">Publication</FormLabel>
 							<Select onValueChange={field.onChange} defaultValue={field.value}>
 								<FormControl>
 									<SelectTrigger>
@@ -141,7 +141,7 @@ export default function EditSubmissionForm({ stories, pubs, responses, defaults,
 									{pubsSelectItems}
 								</SelectContent>
 							</Select>
-							<FormDescription className="text-xs md:text-base">The market you sent it to</FormDescription>
+							<FormDescription className="text-xs sm:text-base">The market you sent it to</FormDescription>
 							<FormMessage />
 						</FormItem>
 					)}
@@ -152,7 +152,7 @@ export default function EditSubmissionForm({ stories, pubs, responses, defaults,
 					name="submitted"
 					render={({ field }) => (
 						<FormItem className="flex flex-col">
-							<FormLabel className="text-sm md:text-base">Date of submission</FormLabel>
+							<FormLabel className="text-sm sm:text-base">Date of submission</FormLabel>
 							<Popover modal={true} open={isSubCalendarOpen} onOpenChange={setIsSubCalendarOpen}>
 								<PopoverTrigger asChild>
 									<FormControl>
@@ -184,7 +184,7 @@ export default function EditSubmissionForm({ stories, pubs, responses, defaults,
 									/>
 								</PopoverContent>
 							</Popover>
-							<FormDescription className="text-xs md:text-base">
+							<FormDescription className="text-xs sm:text-base">
 								The date you sent it
 							</FormDescription>
 							<FormMessage />
@@ -197,7 +197,7 @@ export default function EditSubmissionForm({ stories, pubs, responses, defaults,
 					name="responded"
 					render={({ field }) => (
 						<FormItem className="flex flex-col">
-							<FormLabel className="text-sm md:text-base">Date of response</FormLabel>
+							<FormLabel className="text-sm sm:text-base">Date of response</FormLabel>
 							<Popover modal={true} open={isRespCalendarOpen} onOpenChange={setIsRespCalendarOpen}>
 								<PopoverTrigger asChild>
 									<FormControl>
@@ -229,7 +229,7 @@ export default function EditSubmissionForm({ stories, pubs, responses, defaults,
 									/>
 								</PopoverContent>
 							</Popover>
-							<FormDescription className="text-xs md:text-base">
+							<FormDescription className="text-xs sm:text-base">
 								The date they wrote back
 							</FormDescription>
 							<FormMessage />
@@ -243,7 +243,7 @@ export default function EditSubmissionForm({ stories, pubs, responses, defaults,
 					name="responseId"
 					render={({ field }) => (
 						<FormItem>
-							<FormLabel className="text-sm md:text-base">Response</FormLabel>
+							<FormLabel className="text-sm sm:text-base">Response</FormLabel>
 							<Select onValueChange={field.onChange} defaultValue={field.value}>
 								<FormControl>
 									<SelectTrigger>
@@ -256,7 +256,7 @@ export default function EditSubmissionForm({ stories, pubs, responses, defaults,
 									{reponsesSelectItems}
 								</SelectContent>
 							</Select>
-							<FormDescription className="text-xs md:text-base">The market you sent it to</FormDescription>
+							<FormDescription className="text-xs sm:text-base">The market you sent it to</FormDescription>
 							<FormMessage />
 						</FormItem>
 					)}
diff --git a/src/app/ui/forms/sub.tsx b/src/app/ui/forms/sub.tsx
index 989b1d1..c03efc8 100644
--- a/src/app/ui/forms/sub.tsx
+++ b/src/app/ui/forms/sub.tsx
@@ -95,7 +95,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
 
 	return (
 		<Form {...form}>
-			<form id="subform" onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-2 md:space-y-8 text-xs">
+			<form id="subform" onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-2 sm:space-y-8 text-xs">
 				<FormField
 					control={form.control}
 					name="storyId"
@@ -114,7 +114,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
 									{storiesSelectItems}
 								</SelectContent>
 							</Select>
-							<FormDescription className="text-xs md:text-base">The piece you submitted</FormDescription>
+							<FormDescription className="text-xs sm:text-base">The piece you submitted</FormDescription>
 							<FormMessage />
 						</FormItem>
 					)}
@@ -124,7 +124,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
 					name="pubId"
 					render={({ field }) => (
 						<FormItem>
-							<FormLabel className="text-sm md:text-base">Publication</FormLabel>
+							<FormLabel className="text-sm sm:text-base">Publication</FormLabel>
 							<Select onValueChange={field.onChange} defaultValue={field.value}>
 								<FormControl>
 									<SelectTrigger>
@@ -137,7 +137,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
 									{pubsSelectItems}
 								</SelectContent>
 							</Select>
-							<FormDescription className="text-xs md:text-base">The market you sent it to</FormDescription>
+							<FormDescription className="text-xs sm:text-base">The market you sent it to</FormDescription>
 							<FormMessage />
 						</FormItem>
 					)}
@@ -148,7 +148,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
 					name="submitted"
 					render={({ field }) => (
 						<FormItem className="flex flex-col">
-							<FormLabel className="text-sm md:text-base">Date of submission</FormLabel>
+							<FormLabel className="text-sm sm:text-base">Date of submission</FormLabel>
 							<Popover modal={true} open={isSubCalendarOpen} onOpenChange={setIsSubCalendarOpen}>
 								<PopoverTrigger asChild>
 									<FormControl>
@@ -180,7 +180,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
 									/>
 								</PopoverContent>
 							</Popover>
-							<FormDescription className="text-xs md:text-base">
+							<FormDescription className="text-xs sm:text-base">
 								The date you sent it
 							</FormDescription>
 							<FormMessage />
@@ -193,7 +193,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
 					name="responded"
 					render={({ field }) => (
 						<FormItem className="flex flex-col">
-							<FormLabel className="text-sm md:text-base">Date of response</FormLabel>
+							<FormLabel className="text-sm sm:text-base">Date of response</FormLabel>
 							<Popover modal={true} open={isRespCalendarOpen} onOpenChange={setIsRespCalendarOpen}>
 								<PopoverTrigger asChild>
 									<FormControl>
@@ -225,7 +225,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
 									/>
 								</PopoverContent>
 							</Popover>
-							<FormDescription className="text-xs md:text-base">
+							<FormDescription className="text-xs sm:text-base">
 								The date they wrote back
 							</FormDescription>
 							<FormMessage />
@@ -239,7 +239,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
 					name="responseId"
 					render={({ field }) => (
 						<FormItem>
-							<FormLabel className="text-sm md:text-base">Response</FormLabel>
+							<FormLabel className="text-sm sm:text-base">Response</FormLabel>
 							<Select onValueChange={field.onChange} defaultValue={field.value}>
 								<FormControl>
 									<SelectTrigger>
@@ -252,7 +252,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
 									{reponsesSelectItems}
 								</SelectContent>
 							</Select>
-							<FormDescription className="text-xs md:text-base">The market you sent it to</FormDescription>
+							<FormDescription className="text-xs sm:text-base">The market you sent it to</FormDescription>
 							<FormMessage />
 						</FormItem>
 					)}
diff --git a/src/app/ui/navLinks.tsx b/src/app/ui/navLinks.tsx
index 3bbf7a3..c56df5a 100644
--- a/src/app/ui/navLinks.tsx
+++ b/src/app/ui/navLinks.tsx
@@ -21,17 +21,17 @@ export default function Navlinks(props: ComponentProps<"div">) {
   ]
   return (
     <div className={props.className}>
-      <div className="text-secondary-foreground flex flex-row md:flex-col" >
+      <div className="text-secondary-foreground flex flex-row sm: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-3xl md: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-3xl sm:rounded-l-3xl ",
               {
                 "text-primary-foreground bg-primary": pathname.includes(e.link)
               }
             ))}
           >
-            <p className="drop-shadow-sm hidden md:block">{e.label}</p>
-            <span className="block md:hidden">{e.icon}</span>
+            <p className="drop-shadow-sm hidden sm:block">{e.label}</p>
+            <span className="block sm:hidden">{e.icon}</span>
           </NavLink >))
         }
       </ div>
diff --git a/src/app/ui/tables/data-table.tsx b/src/app/ui/tables/data-table.tsx
index 70dec7e..c2b7120 100644
--- a/src/app/ui/tables/data-table.tsx
+++ b/src/app/ui/tables/data-table.tsx
@@ -130,11 +130,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-1 md:py-4">
+    <div className="flex justify-between items-center py-1 sm:py-4">
       <div className="flex gap-2">
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button variant="outline" className="hidden md:display-blockml-auto">
+            <Button variant="outline" className="hidden sm:display-blockml-auto">
               Filter by
             </Button>
           </DropdownMenuTrigger>
diff --git a/src/app/ui/tables/inputs/genrePickerInput.tsx b/src/app/ui/tables/inputs/genrePickerInput.tsx
index 2bc0927..8c29d42 100644
--- a/src/app/ui/tables/inputs/genrePickerInput.tsx
+++ b/src/app/ui/tables/inputs/genrePickerInput.tsx
@@ -79,7 +79,7 @@ export default function GenrePickerInputCell(props: CellContext<any, any>) {
             render={({ field }) => (
               <FormItem className="w-full max-w-xs flex flex-col">
                 <PopoverTrigger asChild>
-                  {value.length > 0 ? <Button variant="ghost" className="h-fit p-1"><GenreBadges genres={value} className="w-full" /></Button> : <Button variant="outline" type="button" className="text-xs md:text-sm w-fit m-auto">Add genres</Button>
+                  {value.length > 0 ? <Button variant="ghost" className="h-fit p-1"><GenreBadges genres={value} className="w-full" /></Button> : <Button variant="outline" type="button" className="text-xs sm:text-sm w-fit m-auto">Add genres</Button>
                   }
                 </PopoverTrigger>
 
diff --git a/src/app/ui/tables/inputs/numberInput.tsx b/src/app/ui/tables/inputs/numberInput.tsx
index d4571ef..46de082 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({ cellContext, className }: { cellContex
                   <FormControl
                   >
                     <Input
-                      className="md:w-24"
+                      className="sm:w-24"
                       type="number"
                       autoFocus={true}
                       step={cellContext.column.columnDef.meta?.step}
diff --git a/src/app/ui/titleContainer.tsx b/src/app/ui/titleContainer.tsx
index 34b51f5..f12b758 100644
--- a/src/app/ui/titleContainer.tsx
+++ b/src/app/ui/titleContainer.tsx
@@ -1,7 +1,7 @@
 import { ComponentProps } from "react";
 
 export default function TitleContainer({ children }: ComponentProps<"div">) {
-  let classes = "w-full text-left m-auto h-fit flex align-center text-xs md:text-sm"
+  let classes = "w-full text-left m-auto h-fit flex align-center text-xs sm:text-sm"
   if (children == "RECORD DELETED") {
     classes = classes + " text-destructive font-bold"
   }