diff --git a/app/components/Dashboard.tsx b/app/components/Dashboard.tsx
index bd2e2cb..1908ea1 100644
--- a/app/components/Dashboard.tsx
+++ b/app/components/Dashboard.tsx
@@ -399,10 +399,12 @@ export default function Page({user}: {user: any}) {
     sm:grid-rows-[36px_minmax(400px,600px)_minmax(200px,250px)_minmax(200px,250px)]
     gap-2
     w-full
-    h-full
+    h-[100dvh]
     lg:gap-5
     py-2
-    ">
+    "
+    style={{ paddingBottom: 'max(env(safe-area-inset-bottom), 84px)' }}
+    >
       <div className="order-1 col-[1/5] row-[1/2] flex flex-row">
         <div className="grow h-[48px] flex flex-row items-center overflow-y-hidden overflow-x-auto mx-1 scrollbar-thin-x scrollbar-outside-x" style={{ scrollbarGutter: 'stable both-edges' }}>
           {myChannelList.length === 0 ? (
diff --git a/app/components/NavBar.tsx b/app/components/NavBar.tsx
index bb4beb4..85a4f5e 100644
--- a/app/components/NavBar.tsx
+++ b/app/components/NavBar.tsx
@@ -21,7 +21,7 @@ const NavBar: React.FC<NavBarProps> = ({ isOpen, setIsOpen, user }) => {
       bg-white 
       text-black 
       p-4
-      h-[100vh]
+      h-[100dvh]
       overflow-y-auto
       flex-col
       flex
@@ -36,7 +36,9 @@ const NavBar: React.FC<NavBarProps> = ({ isOpen, setIsOpen, user }) => {
       lg:min-w-[300px] 
       lg:basis-[300px] 
       lg:shirink-0 
-      lg:ml-5 sm:mr-5`}>
+      lg:ml-5 sm:mr-5`}
+      style={{ paddingBottom: 'max(env(safe-area-inset-bottom), 1rem)' }}
+    >
         <div className="flex-0 hidden lg:block">
           <Link href="/">
             <div className="flex items-center justify-center gap-1 mb-5 p-2 cursor-pointer">