diff --git a/www/app/[domain]/browse/page.tsx b/www/app/[domain]/browse/page.tsx
index b2359b9e..b80242ea 100644
--- a/www/app/[domain]/browse/page.tsx
+++ b/www/app/[domain]/browse/page.tsx
@@ -14,13 +14,7 @@ export default function TranscriptBrowser() {
   const { loading, response } = useTranscriptList(page);
 
   return (
-    <div>
-      {/*
-      <div className="flex flex-row gap-2">
-        <input className="text-sm p-2 w-80 ring-1 ring-slate-900/10 shadow-sm rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 caret-blue-500" placeholder="Search" />
-      </div>
-      */}
-
+    <div className="grid grid-rows-layout-topbar gap-2 lg:gap-4 h-full max-h-full">
       <div className="flex flex-row gap-2 items-center">
         <Title className="mb-5 mt-5 flex-1">Past transcripts</Title>
         <Pagination
@@ -48,8 +42,8 @@ export default function TranscriptBrowser() {
           &nbsp;to get started.
         </div>
       )}
-      <div /** center and max 900px wide */ className="mx-auto max-w-[900px]">
-        <div className="grid grid-cols-1 gap-2 lg:gap-4 h-full">
+      <div /** center and max 900px wide */ className="overflow-y-scroll">
+        <div className="grid grid-cols-1 gap-2 lg:gap-4 h-full mx-auto max-w-[900px]">
           {response?.items.map((item: GetTranscript) => (
             <div
               key={item.id}
@@ -59,7 +53,7 @@ export default function TranscriptBrowser() {
                 <div className="flex flex-row gap-2 items-start">
                   <Link
                     href={`/transcripts/${item.id}`}
-                    className="text-1xl font-semibold flex-1 pl-0 hover:underline focus-within:underline underline-offset-2 decoration-[.5px] font-light px-2"
+                    className="text-1xl flex-1 pl-0 hover:underline focus-within:underline underline-offset-2 decoration-[.5px] font-light px-2"
                   >
                     {item.title || item.name}
                   </Link>
diff --git a/www/app/[domain]/layout.tsx b/www/app/[domain]/layout.tsx
index 73cc4841..4cb60d8b 100644
--- a/www/app/[domain]/layout.tsx
+++ b/www/app/[domain]/layout.tsx
@@ -77,7 +77,11 @@ export default async function RootLayout({ children, params }: LayoutProps) {
 
   return (
     <html lang="en">
-      <body className={poppins.className + " h-screen relative"}>
+      <body
+        className={
+          poppins.className + "h-[100svh] w-[100svw] overflow-hidden relative"
+        }
+      >
         <FiefWrapper hasAuthCookie={hasAuthCookie}>
           <DomainContextProvider config={config}>
             <ErrorBoundary fallback={<p>"something went really wrong"</p>}>
@@ -85,7 +89,7 @@ export default async function RootLayout({ children, params }: LayoutProps) {
                 <ErrorMessage />
                 <div
                   id="container"
-                  className="items-center h-[100svh] w-[100svw] p-2 md:p-4 grid grid-rows-layout gap-2 md:gap-4"
+                  className="items-center h-[100svh] w-[100svw] p-2 md:p-4 grid grid-rows-layout-topbar max-h-full gap-2 md:gap-4"
                 >
                   <header className="flex justify-between items-center w-full">
                     {/* Logo on the left */}
diff --git a/www/app/[domain]/transcripts/[transcriptId]/page.tsx b/www/app/[domain]/transcripts/[transcriptId]/page.tsx
index 54eca9f9..9b06614b 100644
--- a/www/app/[domain]/transcripts/[transcriptId]/page.tsx
+++ b/www/app/[domain]/transcripts/[transcriptId]/page.tsx
@@ -15,8 +15,6 @@ import TranscriptTitle from "../transcriptTitle";
 import Player from "../player";
 import WaveformLoading from "../waveformLoading";
 import { useRouter } from "next/navigation";
-import { faSpinner } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 type TranscriptDetails = {
   params: {
@@ -67,7 +65,7 @@ export default function TranscriptDetails(details: TranscriptDetails) {
   }
 
   return (
-    <>
+    <div className="grid grid-rows-layout-topbar h-full max-h-full gap-2 lg:gap-4">
       <div className="flex flex-col">
         {transcript?.response?.title && (
           <TranscriptTitle
@@ -136,6 +134,6 @@ export default function TranscriptDetails(details: TranscriptDetails) {
           </section>
         </div>
       </div>
-    </>
+    </div>
   );
 }
diff --git a/www/app/[domain]/transcripts/[transcriptId]/record/page.tsx b/www/app/[domain]/transcripts/[transcriptId]/record/page.tsx
index 8615a4b1..3787a889 100644
--- a/www/app/[domain]/transcripts/[transcriptId]/record/page.tsx
+++ b/www/app/[domain]/transcripts/[transcriptId]/record/page.tsx
@@ -88,7 +88,7 @@ const TranscriptRecord = (details: TranscriptDetails) => {
   }, []);
 
   return (
-    <>
+    <div className="grid grid-rows-layout-topbar gap-2 lg:gap-4 max-h-full h-full">
       {webSockets.waveform && webSockets.duration && mp3?.media ? (
         <Player
           topics={webSockets.topics || []}
@@ -166,7 +166,7 @@ const TranscriptRecord = (details: TranscriptDetails) => {
       </div>
 
       {disconnected && <DisconnectedIndicator />}
-    </>
+    </div>
   );
 };
 
diff --git a/www/app/[domain]/transcripts/new/page.tsx b/www/app/[domain]/transcripts/new/page.tsx
index 045c2db5..0ed68a97 100644
--- a/www/app/[domain]/transcripts/new/page.tsx
+++ b/www/app/[domain]/transcripts/new/page.tsx
@@ -51,8 +51,7 @@ const TranscriptCreate = () => {
     useAudioDevice();
 
   return (
-    <>
-      <div className="hidden lg:block"></div>
+    <div className="grid grid-rows-layout-topbar gap-2 lg:gap-4 max-h-full overflow-y-scroll">
       <div className="lg:grid lg:grid-cols-2 lg:grid-rows-1 lg:gap-4 lg:h-full h-auto flex flex-col">
         <section className="flex flex-col w-full lg:h-full items-center justify-evenly p-4 md:px-6 md:py-8">
           <div className="flex flex-col max-w-xl items-center justify-center">
@@ -142,7 +141,7 @@ const TranscriptCreate = () => {
           )}
         </section>
       </div>
-    </>
+    </div>
   );
 };
 
diff --git a/www/tailwind.config.js b/www/tailwind.config.js
index 5298446d..e8d6c176 100644
--- a/www/tailwind.config.js
+++ b/www/tailwind.config.js
@@ -9,7 +9,7 @@ module.exports = {
   theme: {
     extend: {
       gridTemplateRows: {
-        layout: "auto auto minmax(0, 1fr)",
+        "layout-topbar": "auto minmax(0,1fr)",
         "mobile-inner": "minmax(0, 2fr) minmax(0, 1fr)",
         "layout-one": "minmax(0, 1fr) auto",
       },
