diff --git a/src/containers/Entry.tsx b/src/containers/Entry.tsx
index 757be3f..78aa6b1 100644
--- a/src/containers/Entry.tsx
+++ b/src/containers/Entry.tsx
@@ -1,8 +1,13 @@
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable"
 import EntryBody from "@/components/EntryBody"
 import EntryMetadata from "@/containers/EntryMetadata"
+import { useIsMobile } from "@/hooks/use-mobile"
 
 export default function Entry({ entryTitle, entryBody, history, metadata, isLoading }) {
+   const isMobile = useIsMobile()
+   const bottomPanelSize = isMobile ? 0 : 25
+   const handleSize = isMobile ? "5px" : "1px"
+   console.log(isMobile)
    return (
       <ResizablePanelGroup direction="vertical" className="w-full h-full">
          <ResizablePanel defaultSize={75}>
@@ -10,8 +15,9 @@ export default function Entry({ entryTitle, entryBody, history, metadata, isLoad
                <EntryBody body={entryBody} isLoading={isLoading} />
             </div>
          </ResizablePanel>
-         <ResizableHandle withHandle />
-         <ResizablePanel defaultSize={25}>
+         <ResizableHandle withHandle style={{ height: handleSize }} />
+
+         <ResizablePanel key={`bottom-${bottomPanelSize}`} defaultSize={bottomPanelSize}>
             <div className="h-full overflow-auto">
                <EntryMetadata entryTitle={entryTitle} history={history} metadata={metadata} />
             </div>