diff --git a/enjoy/src/renderer/components/chats/chat-session.tsx b/enjoy/src/renderer/components/chats/chat-session.tsx
index bef2c947..6622b1e7 100644
--- a/enjoy/src/renderer/components/chats/chat-session.tsx
+++ b/enjoy/src/renderer/components/chats/chat-session.tsx
@@ -12,14 +12,14 @@ export const ChatSession = (props: {
 
   if (!chatId) {
     return (
-      <div className="flex items-center justify-center h-[calc(100vh-2rem)]">
+      <div className="flex items-center justify-center h-content">
         <span className="text-muted-foreground">{t("noChatSelected")}</span>
       </div>
     );
   }
 
   return (
-    <ScrollArea className="h-[calc(100vh-2rem)] relative">
+    <ScrollArea className="h-content relative">
       <ChatSessionProvider chatId={chatId}>
         <ChatHeader
           sidePanelCollapsed={sidePanelCollapsed}
diff --git a/enjoy/src/renderer/components/copilots/copilot-session.tsx b/enjoy/src/renderer/components/copilots/copilot-session.tsx
index 4bf221f7..12b7fd2f 100644
--- a/enjoy/src/renderer/components/copilots/copilot-session.tsx
+++ b/enjoy/src/renderer/components/copilots/copilot-session.tsx
@@ -8,7 +8,7 @@ export const CopilotSession = () => {
   const { currentChat } = useContext(CopilotProviderContext);
 
   return (
-    <ScrollArea className="h-[calc(100vh-2rem)] relative">
+    <ScrollArea className="h-content relative">
       {currentChat?.id ? (
         <ChatSessionProvider chatId={currentChat.id}>
           <CopilotHeader />
diff --git a/enjoy/src/renderer/components/layouts/layout.tsx b/enjoy/src/renderer/components/layouts/layout.tsx
index ece45090..9d624542 100644
--- a/enjoy/src/renderer/components/layouts/layout.tsx
+++ b/enjoy/src/renderer/components/layouts/layout.tsx
@@ -27,7 +27,7 @@ export const Layout = () => {
           <ResizablePanel id="main-panel" order={1} minSize={50}>
             <div className="flex flex-start">
               <Sidebar />
-              <div className="flex-1 border-l overflow-x-hidden overflow-y-auto h-[calc(100vh-2rem)]">
+              <div className="flex-1 border-l overflow-x-hidden overflow-y-auto h-content">
                 <Outlet />
               </div>
             </div>
@@ -44,7 +44,7 @@ export const Layout = () => {
                 minSize={15}
                 onCollapse={() => setActive(false)}
               >
-                <div className="h-[calc(100vh-2rem)]">
+                <div className="h-content">
                   <CopilotSession />
                 </div>
               </ResizablePanel>
@@ -57,7 +57,7 @@ export const Layout = () => {
     return (
       <div className="h-screen flex flex-col w-full">
         <TitleBar />
-        <div className="flex-1 h-[calc(100vh-2rem)] overflow-y-auto">
+        <div className="flex-1 h-content overflow-y-auto">
           <Outlet />
         </div>
       </div>
diff --git a/enjoy/src/renderer/components/layouts/sidebar.tsx b/enjoy/src/renderer/components/layouts/sidebar.tsx
index 73465207..60cb8daf 100644
--- a/enjoy/src/renderer/components/layouts/sidebar.tsx
+++ b/enjoy/src/renderer/components/layouts/sidebar.tsx
@@ -76,7 +76,7 @@ export const Sidebar = () => {
 
   return (
     <div
-      className={`h-[calc(100vh-2rem)] pt-8 transition-all relative draggable-region ${
+      className={`h-content pt-8 transition-all relative draggable-region ${
         isCollapsed ? "w-12" : "w-48"
       }`}
       data-testid="sidebar"
diff --git a/enjoy/src/renderer/components/layouts/title-bar.tsx b/enjoy/src/renderer/components/layouts/title-bar.tsx
index b3c275e0..101a257a 100644
--- a/enjoy/src/renderer/components/layouts/title-bar.tsx
+++ b/enjoy/src/renderer/components/layouts/title-bar.tsx
@@ -2,7 +2,6 @@ import {
   AppSettingsProviderContext,
   CopilotProviderContext,
 } from "@/renderer/context";
-import { ChevronRightIcon } from "@radix-ui/react-icons";
 import {
   AlertDialog,
   AlertDialogHeader,
@@ -78,7 +77,7 @@ export const TitleBar = () => {
   }, []);
 
   return (
-    <div className="z-50 h-8 w-full bg-muted draggable-region flex items-center justify-between border-b">
+    <div className="z-[100] h-8 w-full bg-muted draggable-region flex items-center justify-between border-b">
       <div className="flex items-center px-2">
         {platform === "darwin" && !isFullScreen && <div className="w-16"></div>}
         <DropdownMenu>
@@ -150,9 +149,7 @@ export const TitleBar = () => {
             <DropdownMenuGroup>
               <DropdownMenuSub>
                 <DropdownMenuSubTrigger className="non-draggable-region">
-                  <span className="capitalize">
-                    {t("feedback")}
-                  </span>
+                  <span className="capitalize">{t("feedback")}</span>
                 </DropdownMenuSubTrigger>
                 <DropdownMenuPortal>
                   <DropdownMenuSubContent>
diff --git a/enjoy/src/renderer/components/login/bandu-login-form.tsx b/enjoy/src/renderer/components/login/bandu-login-form.tsx
index e9e9e56b..5ef03cd1 100644
--- a/enjoy/src/renderer/components/login/bandu-login-form.tsx
+++ b/enjoy/src/renderer/components/login/bandu-login-form.tsx
@@ -41,7 +41,7 @@ export const BanduLoginButton = () => {
       </SheetTrigger>
       <SheetContent
         side="bottom"
-        className="h-screen"
+        className="h-content"
         aria-describedby={undefined}
       >
         <SheetHeader>
diff --git a/enjoy/src/renderer/components/login/github-login-form.tsx b/enjoy/src/renderer/components/login/github-login-form.tsx
index 1b6e432b..bab05473 100644
--- a/enjoy/src/renderer/components/login/github-login-form.tsx
+++ b/enjoy/src/renderer/components/login/github-login-form.tsx
@@ -33,7 +33,7 @@ export const GithubLoginButton = () => {
       </SheetTrigger>
       <SheetContent
         side="bottom"
-        className="h-screen"
+        className="h-content"
         aria-describedby={undefined}
       >
         <div className="w-full h-full flex">
diff --git a/enjoy/src/renderer/components/login/mixin-login-form.tsx b/enjoy/src/renderer/components/login/mixin-login-form.tsx
index 3f9af432..c3dfd68e 100644
--- a/enjoy/src/renderer/components/login/mixin-login-form.tsx
+++ b/enjoy/src/renderer/components/login/mixin-login-form.tsx
@@ -42,7 +42,7 @@ export const MixinLoginButton = () => {
       </SheetTrigger>
       <SheetContent
         side="bottom"
-        className="h-screen"
+        className="h-content"
         aria-describedby={undefined}
       >
         <SheetHeader>
diff --git a/enjoy/src/renderer/components/medias/media-bottom-panel/media-current-recording.tsx b/enjoy/src/renderer/components/medias/media-bottom-panel/media-current-recording.tsx
index b1d022e3..41193745 100644
--- a/enjoy/src/renderer/components/medias/media-bottom-panel/media-current-recording.tsx
+++ b/enjoy/src/renderer/components/medias/media-bottom-panel/media-current-recording.tsx
@@ -686,7 +686,7 @@ export const MediaCurrentRecording = () => {
         <SheetContent
           aria-describedby={undefined}
           side="bottom"
-          className="rounded-t-2xl shadow-lg max-h-screen overflow-y-scroll"
+          className="rounded-t-2xl shadow-lg max-h-content overflow-y-scroll"
           displayClose={false}
         >
           <SheetHeader className="flex items-center justify-center -mt-4 mb-2">
diff --git a/enjoy/src/renderer/components/medias/media-left-panel/media-transcription-read-button.tsx b/enjoy/src/renderer/components/medias/media-left-panel/media-transcription-read-button.tsx
index 650a17af..229b6291 100644
--- a/enjoy/src/renderer/components/medias/media-left-panel/media-transcription-read-button.tsx
+++ b/enjoy/src/renderer/components/medias/media-left-panel/media-transcription-read-button.tsx
@@ -233,7 +233,7 @@ const TranscriptionRecordingsList = () => {
         <SheetContent
           aria-describedby={undefined}
           side="bottom"
-          className="rounded-t-2xl shadow-lg max-h-screen overflow-y-scroll"
+          className="rounded-t-2xl shadow-lg max-h-content overflow-y-scroll"
           displayClose={false}
         >
           <SheetHeader className="flex items-center justify-center -mt-4 mb-2">
diff --git a/enjoy/src/renderer/components/messages/assistant-message.tsx b/enjoy/src/renderer/components/messages/assistant-message.tsx
index 107e87f1..e8286d06 100644
--- a/enjoy/src/renderer/components/messages/assistant-message.tsx
+++ b/enjoy/src/renderer/components/messages/assistant-message.tsx
@@ -297,12 +297,12 @@ export const AssistantMessageComponent = (props: {
         <SheetContent
           aria-describedby={undefined}
           side="bottom"
-          className="h-screen p-0 flex flex-col"
+          className="h-content p-0 flex flex-col gap-0"
           displayClose={false}
           onPointerDownOutside={(event) => event.preventDefault()}
           onInteractOutside={(event) => event.preventDefault()}
         >
-          <SheetHeader className="flex items-center justify-center">
+          <SheetHeader className="flex items-center justify-center space-y-0 py-1">
             <SheetTitle className="sr-only">{t("shadow")}</SheetTitle>
             <SheetClose>
               <ChevronDownIcon />
diff --git a/enjoy/src/renderer/components/ui/toast.tsx b/enjoy/src/renderer/components/ui/toast.tsx
index a04b2131..5791c4ee 100644
--- a/enjoy/src/renderer/components/ui/toast.tsx
+++ b/enjoy/src/renderer/components/ui/toast.tsx
@@ -14,7 +14,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-content w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
       className
     )}
     {...props}
diff --git a/enjoy/src/renderer/context/chat-session-provider.tsx b/enjoy/src/renderer/context/chat-session-provider.tsx
index bc98f1e8..c7c23553 100644
--- a/enjoy/src/renderer/context/chat-session-provider.tsx
+++ b/enjoy/src/renderer/context/chat-session-provider.tsx
@@ -482,12 +482,12 @@ export const ChatSessionProvider = ({
         >
           <SheetContent
             side="bottom"
-            className="h-screen p-0 flex flex-col"
+            className="h-content p-0 flex flex-col gap-0"
             displayClose={false}
             onPointerDownOutside={(event) => event.preventDefault()}
             onInteractOutside={(event) => event.preventDefault()}
           >
-            <SheetHeader className="flex items-center justify-center">
+            <SheetHeader className="flex items-center justify-center space-y-0 py-1">
               <SheetTitle className="sr-only">Shadow</SheetTitle>
               <SheetDescription className="sr-only"></SheetDescription>
               <SheetClose>
@@ -508,7 +508,7 @@ export const ChatSessionProvider = ({
           <SheetContent
             aria-describedby={undefined}
             side="bottom"
-            className="rounded-t-2xl shadow-lg max-h-screen overflow-y-scroll"
+            className="rounded-t-2xl shadow-lg max-h-content overflow-y-scroll"
             displayClose={false}
           >
             <SheetHeader className="flex items-center justify-center -mt-4 mb-2">
diff --git a/enjoy/src/renderer/context/course-provider.tsx b/enjoy/src/renderer/context/course-provider.tsx
index ec4cb5d1..8a10f9d3 100644
--- a/enjoy/src/renderer/context/course-provider.tsx
+++ b/enjoy/src/renderer/context/course-provider.tsx
@@ -72,12 +72,12 @@ export const CourseProvider = ({
         >
           <SheetContent
             side="bottom"
-            className="h-screen p-0 flex flex-col"
+            className="h-content p-0 flex flex-col gap-0"
             displayClose={false}
             onPointerDownOutside={(event) => event.preventDefault()}
             onInteractOutside={(event) => event.preventDefault()}
           >
-            <SheetHeader className="flex items-center justify-center">
+            <SheetHeader className="flex items-center justify-center space-y-0 py-1">
               <SheetTitle className="sr-only">Shadow</SheetTitle>
               <SheetDescription className="sr-only"></SheetDescription>
               <SheetClose>
@@ -85,7 +85,7 @@ export const CourseProvider = ({
               </SheetClose>
             </SheetHeader>
 
-            <AudioPlayer id={shadowing?.id} />
+            {shadowing && <AudioPlayer id={shadowing.id} />}
           </SheetContent>
         </Sheet>
       </MediaShadowProvider>
diff --git a/enjoy/src/renderer/pages/audio.tsx b/enjoy/src/renderer/pages/audio.tsx
index 0a1e0fa7..163c7427 100644
--- a/enjoy/src/renderer/pages/audio.tsx
+++ b/enjoy/src/renderer/pages/audio.tsx
@@ -25,7 +25,7 @@ export default () => {
   const navigate = useNavigate();
 
   return (
-    <div className="h-[calc(100vh-2rem)] flex flex-col relative">
+    <div className="h-content flex flex-col relative">
       <Breadcrumb className="px-4 pt-3 pb-2">
         <BreadcrumbList>
           <BreadcrumbItem>
diff --git a/enjoy/src/renderer/pages/chats.tsx b/enjoy/src/renderer/pages/chats.tsx
index d71e691e..0de4d04b 100644
--- a/enjoy/src/renderer/pages/chats.tsx
+++ b/enjoy/src/renderer/pages/chats.tsx
@@ -38,7 +38,7 @@ export default function Chats() {
   }, [currentChat]);
 
   return (
-    <ResizablePanelGroup direction="horizontal" className="h-screen">
+    <ResizablePanelGroup direction="horizontal" className="h-content">
       {!sidePanelCollapsed && (
         <>
           <ResizablePanel
diff --git a/enjoy/src/renderer/pages/conversation.tsx b/enjoy/src/renderer/pages/conversation.tsx
index 645ea275..432d5304 100644
--- a/enjoy/src/renderer/pages/conversation.tsx
+++ b/enjoy/src/renderer/pages/conversation.tsx
@@ -231,7 +231,7 @@ export default () => {
   return (
     <div
       data-testid="conversation-page"
-      className="h-[calc(100vh-2rem)] px-4 py-4 lg:px-8 flex flex-col"
+      className="h-content px-4 py-4 lg:px-8 flex flex-col"
     >
       <div className="h-[calc(100vh-5rem)] relative w-full max-w-screen-md mx-auto flex flex-col">
         <div className="flex items-center justify-center py-2 relative">
@@ -249,13 +249,13 @@ export default () => {
               </div>
             </SheetTrigger>
 
-            <SheetContent className="p-0" aria-describedby={undefined}>
+            <SheetContent className="p-0 pt-8" aria-describedby={undefined}>
               <SheetHeader>
                 <SheetTitle className="sr-only">
                   {t("editConversation")}
                 </SheetTitle>
               </SheetHeader>
-              <div className="h-screen">
+              <div className="h-content">
                 <ConversationForm
                   conversation={conversation}
                   onFinish={() => {
diff --git a/enjoy/src/renderer/pages/conversations.tsx b/enjoy/src/renderer/pages/conversations.tsx
index 1f93b1d7..cc314cf2 100644
--- a/enjoy/src/renderer/pages/conversations.tsx
+++ b/enjoy/src/renderer/pages/conversations.tsx
@@ -15,7 +15,7 @@ import {
 } from "@renderer/components/ui";
 import { ConversationCard, ConversationForm } from "@renderer/components";
 import { useState, useEffect, useContext, useReducer } from "react";
-import { ChevronLeftIcon, LoaderIcon } from "lucide-react";
+import { LoaderIcon } from "lucide-react";
 import { Link, useNavigate, useSearchParams } from "react-router-dom";
 import {
   DbProviderContext,
@@ -292,13 +292,13 @@ export default () => {
         </Dialog>
 
         <Sheet open={creating} onOpenChange={(value) => setCreating(value)}>
-          <SheetContent className="p-0" aria-describedby={undefined}>
+          <SheetContent className="p-0 pt-8" aria-describedby={undefined}>
             <SheetHeader>
               <SheetTitle className="sr-only">
                 {t("startConversation")}
               </SheetTitle>
             </SheetHeader>
-            <div className="h-screen relative">
+            <div className="h-content relative">
               <ConversationForm
                 conversation={preset}
                 onFinish={() => setCreating(false)}
diff --git a/enjoy/src/renderer/pages/courses/chapter.tsx b/enjoy/src/renderer/pages/courses/chapter.tsx
index a2fe1584..50dcb95b 100644
--- a/enjoy/src/renderer/pages/courses/chapter.tsx
+++ b/enjoy/src/renderer/pages/courses/chapter.tsx
@@ -42,7 +42,7 @@ export default () => {
 
   return (
     <CourseProvider id={id}>
-      <div className="flex flex-col h-screen px-4 xl:px-6 py-6">
+      <div className="flex flex-col h-content px-4 xl:px-6 py-4">
         <Breadcrumb className="mb-4">
           <BreadcrumbList>
             <BreadcrumbItem>
@@ -58,7 +58,7 @@ export default () => {
             <BreadcrumbPage>{chapter?.title || sequence}</BreadcrumbPage>
           </BreadcrumbList>
         </Breadcrumb>
-        <div className="flex-1 h-[calc(100vh-5.75rem)] border rounded-lg">
+        <div className="flex-1 h-[calc(100vh-7.75rem)] border rounded-lg">
           <ResizablePanelGroup direction="horizontal">
             <ResizablePanel defaultSize={50}>
               <ScrollArea className="px-4 py-3 h-full relative bg-muted">
diff --git a/enjoy/src/renderer/pages/document.tsx b/enjoy/src/renderer/pages/document.tsx
index e8b1b7c5..2dc9983f 100644
--- a/enjoy/src/renderer/pages/document.tsx
+++ b/enjoy/src/renderer/pages/document.tsx
@@ -36,14 +36,14 @@ const DocumentComponent = () => {
 
   if (!document) {
     return (
-      <div className="h-screen flex flex-col justify-center items-center relative">
+      <div className="h-content flex flex-col justify-center items-center relative">
         <LoaderSpin />
       </div>
     );
   }
 
   return (
-    <div className="h-[calc(100vh-2rem)] flex flex-col relative">
+    <div className="h-content flex flex-col relative">
       <Breadcrumb className="px-4 pt-3 pb-2">
         <BreadcrumbList>
           <BreadcrumbItem>
diff --git a/enjoy/src/renderer/pages/error-page.tsx b/enjoy/src/renderer/pages/error-page.tsx
index b65d56d2..1568d364 100644
--- a/enjoy/src/renderer/pages/error-page.tsx
+++ b/enjoy/src/renderer/pages/error-page.tsx
@@ -7,7 +7,7 @@ export default () => {
   console.error(error);
 
   return (
-    <div className="h-screen px-4 py-6 lg:px-8">
+    <div className="h-content px-4 py-6 lg:px-8">
       <PagePlaceholder
         placeholder={t("somethingWentWrong")}
         extra={error ? (error as Error).message : ""}
diff --git a/enjoy/src/renderer/pages/pronunciation-assessments/index.tsx b/enjoy/src/renderer/pages/pronunciation-assessments/index.tsx
index 70a8c5e7..a739f273 100644
--- a/enjoy/src/renderer/pages/pronunciation-assessments/index.tsx
+++ b/enjoy/src/renderer/pages/pronunciation-assessments/index.tsx
@@ -201,7 +201,7 @@ export default () => {
         <SheetContent
           aria-describedby={undefined}
           side="bottom"
-          className="rounded-t-2xl shadow-lg max-h-screen overflow-y-scroll"
+          className="rounded-t-2xl shadow-lg max-h-content overflow-y-scroll"
           displayClose={false}
         >
           <SheetHeader className="flex items-center justify-center -mt-4 mb-2">
diff --git a/enjoy/src/renderer/pages/story-preview.tsx b/enjoy/src/renderer/pages/story-preview.tsx
index 96721424..f1ca0699 100644
--- a/enjoy/src/renderer/pages/story-preview.tsx
+++ b/enjoy/src/renderer/pages/story-preview.tsx
@@ -206,7 +206,7 @@ export default () => {
   }, [readable, loading]);
 
   return (
-    <div className="h-screen w-full flex flex-col bg-muted">
+    <div className="h-content w-full flex flex-col bg-muted">
       {(loading || !readable) && (
         <div className="h-12 flex items-center space-x-2 px-4 border-b shadow">
           <Button
diff --git a/enjoy/src/renderer/pages/story.tsx b/enjoy/src/renderer/pages/story.tsx
index c2a1be3a..06ba6e6c 100644
--- a/enjoy/src/renderer/pages/story.tsx
+++ b/enjoy/src/renderer/pages/story.tsx
@@ -229,7 +229,7 @@ export default () => {
 
   return (
     <>
-      <ScrollArea className="h-screen w-full bg-muted">
+      <ScrollArea className="h-content w-full bg-muted">
         <StoryToolbar
           marked={marked}
           toggleMarked={() => setMarked(!marked)}
diff --git a/enjoy/src/renderer/pages/video.tsx b/enjoy/src/renderer/pages/video.tsx
index 93bb1f0a..2bd9c67a 100644
--- a/enjoy/src/renderer/pages/video.tsx
+++ b/enjoy/src/renderer/pages/video.tsx
@@ -25,7 +25,7 @@ export default () => {
   const navigate = useNavigate();
 
   return (
-    <div className="h-[calc(100vh-2rem)] flex flex-col relative">
+    <div className="h-content flex flex-col relative">
       <Breadcrumb className="px-4 pt-3 pb-2">
         <BreadcrumbList>
           <BreadcrumbItem>
diff --git a/enjoy/tailwind.config.js b/enjoy/tailwind.config.js
index e670538f..49fe67f0 100644
--- a/enjoy/tailwind.config.js
+++ b/enjoy/tailwind.config.js
@@ -13,6 +13,9 @@ module.exports = {
       },
     },
     extend: {
+      height: {
+        content: "calc(100vh - 2rem)",
+      },
       fontSize: {
         xxs: "0.625rem",
         xxxs: "0.5rem",