diff --git a/src/components/header.tsx b/src/components/header.tsx
index 915ca40..ca9998b 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -3,7 +3,7 @@ import { ThemeToggle } from './ThemeToggle';
 
 export const Header = () => {
   return (
-    <header className="flex w-full p-6">
+    <header className="flex w-full p-6 pb-2">
       <div className="flex w-full justify-between gap-1">
         <div className="flex flex-col gap-1">
           <h2 className="text-lg font-bold tracking-tight">
diff --git a/src/components/ui/data-table.tsx b/src/components/ui/data-table.tsx
index f79b81a..cf03914 100644
--- a/src/components/ui/data-table.tsx
+++ b/src/components/ui/data-table.tsx
@@ -70,77 +70,72 @@ export function DataTable<TData extends Reservation, TValue>({
   }, [receipt]);
 
   return (
-    <>
-      <div
-        className="relative max-h-[85vh] overflow-auto rounded-lg border-2 border-solid border-black/20 dark:border-white/20"
-        ref={parentRef}
-      >
-        <div style={{ height: virtualizer.getTotalSize() }}>
-          <Table>
-            <TableHeader>
-              {table.getHeaderGroups().map((headerGroup) => (
-                <TableRow key={headerGroup.id}>
-                  {headerGroup.headers.map((header) => {
-                    return (
-                      <TableHead key={header.id}>
-                        {header.isPlaceholder
-                          ? null
-                          : flexRender(
-                              header.column.columnDef.header,
-                              header.getContext(),
-                            )}
-                      </TableHead>
-                    );
-                  })}
-                </TableRow>
-              ))}
-            </TableHeader>
-            <TableBody>
-              {table.getRowModel().rows?.length ? (
-                virtualizer.getVirtualItems().map((virtualRow, index) => {
-                  const row = table.getRowModel().rows[virtualRow.index]!;
+    <div
+      className="relative max-h-[80vh] overflow-auto rounded-lg border-2 border-solid border-black/20 dark:border-white/20"
+      ref={parentRef}
+    >
+      <div style={{ height: virtualizer.getTotalSize() }}>
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
                   return (
-                    <TableRow
-                      key={`${virtualRow.index}-${index}`}
-                      style={{
-                        height: `${virtualRow.size}px`,
-                        transform: `translateY(${
-                          virtualRow.start - index * virtualRow.size
-                        }px)`,
-                      }}
-                      onClick={() => router.replace(`#${row.original.receipt}`)}
-                      data-state={
-                        receipt === row.original.receipt
-                          ? 'selected'
-                          : undefined
-                      }
-                    >
-                      {row.getVisibleCells().map((cell) => (
-                        <TableCell key={cell.id}>
-                          {flexRender(
-                            cell.column.columnDef.cell,
-                            cell.getContext(),
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext(),
                           )}
-                        </TableCell>
-                      ))}
-                    </TableRow>
+                    </TableHead>
                   );
-                })
-              ) : (
-                <TableRow>
-                  <TableCell
-                    colSpan={columns.length}
-                    className="h-24 text-center"
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              virtualizer.getVirtualItems().map((virtualRow, index) => {
+                const row = table.getRowModel().rows[virtualRow.index]!;
+                return (
+                  <TableRow
+                    key={`${virtualRow.index}-${index}`}
+                    style={{
+                      height: `${virtualRow.size}px`,
+                      transform: `translateY(${
+                        virtualRow.start - index * virtualRow.size
+                      }px)`,
+                    }}
+                    onClick={() => router.replace(`#${row.original.receipt}`)}
+                    data-state={
+                      receipt === row.original.receipt ? 'selected' : undefined
+                    }
                   >
-                    No results.
-                  </TableCell>
-                </TableRow>
-              )}
-            </TableBody>
-          </Table>
-        </div>
+                    {row.getVisibleCells().map((cell) => (
+                      <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>
       </div>
-      <TableCaption>{data.length} total reservations</TableCaption>
-    </>
+    </div>
   );
 }
diff --git a/src/pages/_layout.tsx b/src/pages/_layout.tsx
index f5d19dd..bbb698f 100644
--- a/src/pages/_layout.tsx
+++ b/src/pages/_layout.tsx
@@ -13,7 +13,7 @@ export default async function RootLayout({ children }: RootLayoutProps) {
         <title>Telo Reservations</title>
         <link rel="icon" href="/images/favicon.png" />
       </head>
-      <body>
+      <body className="max-h-screen overflow-hidden">
         <Header />
         <main className="flex items-center justify-center px-1">
           {children}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 4f993d9..98bc7e9 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -2,6 +2,7 @@ import g from 'googleapis';
 import { TeloTable } from '../components/TeloTable';
 import { SearchInput } from '../components/SearchInput';
 import { Reservation } from '../types';
+import { TableCaption } from '../components/ui/table';
 
 // Note: Only the default export seems to be working
 const { google } = g;
@@ -50,9 +51,10 @@ export default async function HomePage() {
   const ids = new Set(rows.map((row) => row[0]!));
 
   return (
-    <div className="-mt-2 flex w-full max-w-[850px] flex-col gap-2">
+    <div className="flex w-full max-w-[850px] flex-col gap-2">
       <SearchInput ids={ids} />
       <TeloTable rows={rowsAsReservations} />
+      <TableCaption>{rows.length} total reservations</TableCaption>
     </div>
   );
 }