diff --git a/frontend/src/pages/LTTPage.tsx b/frontend/src/pages/LTTPage.tsx
index 79edf2f..898cece 100644
--- a/frontend/src/pages/LTTPage.tsx
+++ b/frontend/src/pages/LTTPage.tsx
@@ -26,9 +26,14 @@ export const LTTPage: React.FC = () => {
 
   return (
     <div className="h-full bg-gray-50">
-      <Group orientation="vertical" id="ltt-main-group">
-        <Panel id="ltt-upper-panel" defaultSize={30} minSize={15} maxSize={60}>
-          <div className="h-full grid grid-cols-2">
+      <Group
+        orientation="vertical"
+        id="ltt-main-group"
+        className="h-full"
+        defaultLayout={{ 'ltt-upper-panel': 30, 'ltt-lower-panel': 70 }}
+      >
+        <Panel id="ltt-upper-panel" minSize="15%" maxSize="60%">
+          <div className="h-full grid grid-cols-2 min-h-0">
             <div className="border-r border-gray-200 p-4 min-h-0 overflow-hidden">
               <VideoPlaceholder />
             </div>
@@ -39,11 +44,11 @@ export const LTTPage: React.FC = () => {
           </div>
         </Panel>
 
-        <Separator className="h-2 cursor-row-resize flex items-center justify-center bg-gray-200 [&[data-separator='hover']]:bg-blue-300 [&[data-separator='active']]:bg-blue-400 transition-colors">
-          <div className="w-8 h-1 rounded-full bg-gray-400 [&[data-separator='hover']_&]:bg-blue-500 [&[data-separator='active']_&]:bg-blue-600 transition-colors" />
+        <Separator className="h-3 cursor-row-resize flex items-center justify-center bg-gray-300 hover:bg-blue-400 active:bg-blue-500 transition-colors shrink-0">
+          <div className="w-10 h-1.5 rounded-full bg-gray-500" />
         </Separator>
 
-        <Panel id="ltt-lower-panel" minSize={20}>
+        <Panel id="ltt-lower-panel" minSize="20%">
           <div className="h-full p-6 border-t border-gray-200 overflow-y-auto">
             <ResponsePanel
               answer={queryMutation.data?.answer ?? null}