diff --git a/src/app.tsx b/src/app.tsx
index 1359801..b151ff3 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -90,7 +90,7 @@ export function App() {
   }, [selectedChatIndex]);
 
   return (
-    <div className="flex text-sm h-screen bg-slate-200 dark:bg-slate-800 dark:text-white">
+    <div className="flex text-sm h-full bg-slate-200 dark:bg-slate-800 dark:text-white">
       <div className="flex flex-col h-full p-2 border-r-indigo-500 border-2 dark:border-slate-800 dark:border-r-indigo-500 dark:text-black">
         <div className="grow overflow-scroll">
           <button
diff --git a/src/global.css b/src/global.css
index 2e5a143..f67213a 100644
--- a/src/global.css
+++ b/src/global.css
@@ -2,6 +2,12 @@
 @tailwind components;
 @tailwind utilities;
 
+html,
+body,
+#app {
+  height: 100%;
+}
+
 /* Hide scrollbar for webkit based browsers */
 ::-webkit-scrollbar {
   display: none;
diff --git a/src/settings.tsx b/src/settings.tsx
index dda668a..df516b0 100644
--- a/src/settings.tsx
+++ b/src/settings.tsx
@@ -103,7 +103,7 @@ export default (props: {
       props.chatStore.streamMode ? "stream" : "fetch"
     }&sys=${encodeURIComponent(props.chatStore.systemMessageContent)}`;
   return (
-    <div className="left-0 top-0 overflow-scroll flex justify-center absolute w-screen h-screen bg-black bg-opacity-50 z-10">
+    <div className="left-0 top-0 overflow-scroll flex justify-center absolute w-screen h-full bg-black bg-opacity-50 z-10">
       <div className="m-2 p-2 bg-white rounded-lg h-fit">
         <h3 className="text-xl">Settings</h3>
         <hr />