diff --git a/src/components/book-out/BookOutDataTable.tsx b/src/components/book-out/BookOutDataTable.tsx
index dad193f..11cac89 100644
--- a/src/components/book-out/BookOutDataTable.tsx
+++ b/src/components/book-out/BookOutDataTable.tsx
@@ -6,6 +6,7 @@ import {
   flexRender,
   getCoreRowModel,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table"
 
 import {
@@ -17,6 +18,13 @@ import {
   TableRow,
 } from "@/components/ui/table"
 import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Columns } from "lucide-react"
 
 interface BookOutRecord {
   id: string
@@ -36,65 +44,108 @@ export function BookOutDataTable<TData, TValue>({
   columns,
   data,
 }: BookOutDataTableProps<TData, TValue>) {
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>(() => {
+    if (typeof window !== 'undefined' && window.innerWidth < 768) {
+      return {
+        sku: false,
+        quantity: false,
+      };
+    }
+    return {};
+  });
+
   const table = useReactTable({
     data,
     columns,
     getCoreRowModel: getCoreRowModel(),
+    state: {
+      columnVisibility,
+    },
+    onColumnVisibilityChange: setColumnVisibility,
   })
 
   return (
-    <div className="rounded-md border bg-white">
-      <Table>
-        <TableHeader>
-          {table.getHeaderGroups().map((headerGroup) => (
-            <TableRow key={headerGroup.id}>
-              {headerGroup.headers.map((header) => (
-                <TableHead key={header.id}>
-                  {header.isPlaceholder
-                    ? null
-                    : flexRender(header.column.columnDef.header, header.getContext())}
-                </TableHead>
-              ))}
-            </TableRow>
-          ))}
-        </TableHeader>
-        <TableBody>
-          {table.getRowModel().rows.length ? (
-            table.getRowModel().rows.map((row) => {
-              const record = row.original as BookOutRecord
-              // Calculate total quantity if quantity is array
-              const totalQuantity = Array.isArray(record.quantity)
-                ? record.quantity.reduce((sum, q) => sum + q, 0)
-                : record.quantity
+    <div>
+      <div className="rounded-md border bg-white">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <TableHead key={header.id}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(header.column.columnDef.header, header.getContext())}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows.length ? (
+              table.getRowModel().rows.map((row) => {
+                const record = row.original as BookOutRecord
+                // Calculate total quantity if quantity is array
+                const totalQuantity = Array.isArray(record.quantity)
+                  ? record.quantity.reduce((sum, q) => sum + q, 0)
+                  : record.quantity
 
-              return (
-                <TableRow key={row.id} className="hover:bg-gray-50">
-                  {row.getVisibleCells().map((cell) => {
-                    if (cell.column.id === "quantity") {
+                return (
+                  <TableRow key={row.id} className="hover:bg-gray-50">
+                    {row.getVisibleCells().map((cell) => {
+                      if (cell.column.id === "quantity") {
+                        return (
+                          <TableCell key={cell.id} className="text-sm">
+                            {totalQuantity}
+                          </TableCell>
+                        )
+                      }
                       return (
-                        <TableCell key={cell.id}>
-                          {totalQuantity}
+                        <TableCell key={cell.id} className="text-sm">
+                          {flexRender(cell.column.columnDef.cell, cell.getContext())}
                         </TableCell>
                       )
-                    }
-                    return (
-                      <TableCell key={cell.id}>
-                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                      </TableCell>
-                    )
-                  })}
-                </TableRow>
-              )
-            })
-          ) : (
-            <TableRow>
-              <TableCell colSpan={columns.length} className="h-24 text-center">
-                No results.
-              </TableCell>
-            </TableRow>
-          )}
-        </TableBody>
-      </Table>
+                    })}
+                  </TableRow>
+                )
+              })
+            ) : (
+              <TableRow>
+                <TableCell colSpan={columns.length} className="h-24 text-center">
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      <div className="flex items-center justify-end space-x-2 py-4">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" size="sm">
+              Toggle Columns
+              <Columns className="ml-2 h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            {table
+              .getAllColumns()
+              .filter(column => column.getCanHide())
+              .map(column => {
+                return (
+                  <DropdownMenuCheckboxItem
+                    key={column.id}
+                    className="capitalize"
+                    checked={column.getIsVisible()}
+                    onCheckedChange={column.toggleVisibility}
+                  >
+                    {column.id}
+                  </DropdownMenuCheckboxItem>
+                )
+              })}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
     </div>
   )
 }
\ No newline at end of file
diff --git a/src/components/book-out/BookOutForm.tsx b/src/components/book-out/BookOutForm.tsx
index 08663e3..16189be 100644
--- a/src/components/book-out/BookOutForm.tsx
+++ b/src/components/book-out/BookOutForm.tsx
@@ -219,7 +219,7 @@ export function BookOutForm({ setOpen, refreshData }: BookOutFormProps) {
         <div className="border p-4 rounded-md">
           <h3 className="text-lg font-semibold mb-4">Items to Book Out</h3>
           {form.getValues("items").map((item, index) => (
-            <div key={index} className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-4 items-center">
+            <div key={index} className="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-4 items-center">
               <FormField
                 control={form.control}
                 name={`items.${index}.itemName`}