diff --git a/src/css/pages/SurahIndex.scss b/src/css/pages/SurahIndex.scss
index 9a43e58..62b75c8 100644
--- a/src/css/pages/SurahIndex.scss
+++ b/src/css/pages/SurahIndex.scss
@@ -4,6 +4,14 @@
 @import "components/Scrollbar";
 
 body .root .content.theme {
+  height: 75%;
+  @media (max-device-height: 667px) {
+    height: 70%;
+  }
+  @media (min-device-height: 1024px) {
+    height: 80%;
+  }
+
   header {
     .react-select.language {
       ul li {
diff --git a/src/css/pages/SurahStream.scss b/src/css/pages/SurahStream.scss
index 6bc100b..9d45ae4 100644
--- a/src/css/pages/SurahStream.scss
+++ b/src/css/pages/SurahStream.scss
@@ -5,6 +5,12 @@
 
 body .root .content.theme {
   height: 75%;
+  @media (max-device-height: 667px) {
+    height: 70%;
+  }
+  @media (min-device-height: 1024px) {
+    height: 80%;
+  }
 
   ul.body.stream {
     scrollbar-gutter: stable;