diff --git a/src/css/pages/SurahIndex.scss b/src/css/pages/SurahIndex.scss
index 0491ee7..c2fdba3 100644
--- a/src/css/pages/SurahIndex.scss
+++ b/src/css/pages/SurahIndex.scss
@@ -62,16 +62,32 @@ body .root .content.theme {
       flex-direction: row;
       align-items: center;
       width: 100%;
-
       span {
         padding: 0 0 0 7px;
       }
     }
     input {
-      padding: 10px;
+      padding: 7.5px;
       border-radius: 10px;
       border: 1px solid #000;
     }
+    @media (max-device-width: 500px) {
+      flex-wrap: wrap;
+      flex-direction: column-reverse;
+      align-items: flex-start;
+      a {
+        place-content: center;
+        width: 100%;
+      }
+      input {
+        margin-bottom: 10px;
+        width: 100%;
+        max-width: unset;
+      }
+      .right-arrow.icon {
+        display: none;
+      }
+    }
   }
 }
 
diff --git a/src/html/index.html.erb b/src/html/index.html.erb
index 2ce6458..37d294a 100644
--- a/src/html/index.html.erb
+++ b/src/html/index.html.erb
@@ -2,7 +2,7 @@
 <html lang="<%= context.locale %>">
   <head>
     <title><%= t(context.locale, "TheNobleQuran") %></title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
     <meta charset="UTF-8">
     <meta name="description" content="<%= t(context.locale, 'meta.index.description') %>">
     <link rel="icon" href="/favicon.svg">
