2 files changed, 18 insertions, 4 deletions

diff --git a/g4f/gui/client/index.html b/g4f/gui/client/index.html
index 566a965c..642925e3 100644
--- a/g4f/gui/client/index.html
+++ b/g4f/gui/client/index.html
@@ -38,6 +38,9 @@
     </script>
     <script src="https://unpkg.com/gpt-tokenizer/dist/cl100k_base.js" async></script>
     <script src="/static/js/text_to_speech/index.js" async></script>
+    <!--
+            <script src="/static/js/whisper-web/index.js" async></script>
+    -->
     <script>
         const user_image = '<img src="/static/img/user.png" alt="your avatar">';
         const gpt_image = '<img src="/static/img/gpt.png" alt="your avatar">';
@@ -89,6 +92,7 @@
         </div>
         <div class="settings hidden">
             <div class="paper">
+            <h3>Settings</h3>
             <div class="field">
                 <span class="label">Web Access</span>
                 <input type="checkbox" id="switch" />
@@ -127,7 +131,7 @@
             </div>
             <div class="field box">
                 <label for="Gemini-api_key" class="label" title="">Gemini:</label>
-                <textarea id="Gemini-api_key" name="Gemini[api_key]" placeholder="Cookies"></textarea>
+                <textarea id="Gemini-api_key" name="Gemini[api_key]" placeholder="&quot;__Secure-1PSID&quot; cookie"></textarea>
             </div>
             <div class="field box">
                 <label for="GeminiPro-api_key" class="label" title="">GeminiPro:</label>
diff --git a/g4f/gui/client/static/css/style.css b/g4f/gui/client/static/css/style.css
index fea52629..795bc00c 100644
--- a/g4f/gui/client/static/css/style.css
+++ b/g4f/gui/client/static/css/style.css
@@ -602,7 +602,8 @@ label[for="camera"] {
     width: 100%;
 }
 
-.buttons input:checked+label:after {
+.buttons input:checked+label:after,
+.settings input:checked+label:after {
     left: calc(100% - 5px - 20px);
 }
 
@@ -844,13 +845,17 @@ ul {
         max-width: none;
     }
 
+    .settings h3 {
+        padding-left: 50px;
+    }
+
     .buttons {
         align-items: flex-start;
         flex-wrap: wrap;
         gap: 15px;
     }
 
-    .mobile-sidebar {
+    .mobile-sidebar { 0 0 0
         display: flex;
     }
 
@@ -1099,10 +1104,15 @@ a:-webkit-any-link {
     width: 100%;
     display: flex;
     flex-direction: column;
+    overflow: auto;
+}
+
+.settings h3 {
+    padding-left: 10px;
+    padding-top: 10px;
 }
 
 .settings .paper {
-    overflow: auto;
     flex-direction: column;
     min-width: 400px;
 }