diff --git a/CHANGELOG.md b/CHANGELOG.md
index 88604c88b..a9bf9767a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -53,8 +53,10 @@
 - **python 3.12** improved compatibility, automatically handle `setuptools`  
 - **control** persist/reapply units current state on server restart  
 - **video** add option `gradio_skip_video` to avoid gradio issues with displaying generated videos  
+- **ui**  
+  - hide token counter until tokens are known  
+  - minor ui optimizations  
 - massive log cleanup
-- minor ui optimizations  
 
 ## Update for 2024-09-13
 
diff --git a/javascript/sdnext.css b/javascript/sdnext.css
index cdf300a26..a1493d2e0 100644
--- a/javascript/sdnext.css
+++ b/javascript/sdnext.css
@@ -73,7 +73,7 @@ button.custom-button { border-radius: var(--button-large-radius); padding: var(-
 .theme-preview { display: none; position: fixed; border: var(--spacing-sm) solid var(--neutral-600); box-shadow: 2px 2px 2px 2px var(--neutral-700); top: 0; bottom: 0; left: 0; right: 0; margin: auto; max-width: 75vw; z-index: 999; }
 
 /* txt2img/img2img specific */
-.block.token-counter{ position: absolute; display: inline-block; right: 1em; min-width: 0 !important; width: auto; z-index: 100; top: -0.5em; }
+.block.token-counter{ position: absolute; right: 1em; min-width: 0 !important; width: auto; z-index: 100; top: -0.5em; }
 .block.token-counter span{ background: var(--input-background-fill) !important; box-shadow: 0 0 0.0 0.3em rgba(192,192,192,0.15), inset 0 0 0.6em rgba(192,192,192,0.075); border: 2px solid rgba(192,192,192,0.4) !important; }
 .block.token-counter.error span{ box-shadow: 0 0 0.0 0.3em rgba(255,0,0,0.15), inset 0 0 0.6em rgba(255,0,0,0.075); border: 2px solid rgba(255,0,0,0.4) !important; }
 .block.token-counter div{ display: inline; }
diff --git a/modules/ui_common.py b/modules/ui_common.py
index 8faef17d8..32109b571 100644
--- a/modules/ui_common.py
+++ b/modules/ui_common.py
@@ -413,4 +413,4 @@ def update_token_counter(text, steps):
             max_length = shared.sd_model.tokenizer.model_max_length - int(has_bos_token) - int(has_eos_token)
             if max_length is None or max_length < 0 or max_length > 10000:
                 max_length = 0
-    return f"<span class='gr-box gr-text-input'>{token_count}/{max_length}</span>"
+    return gr.update(value=f"<span class='gr-box gr-text-input'>{token_count}/{max_length}</span>", visible=token_count > 0)
diff --git a/modules/ui_sections.py b/modules/ui_sections.py
index 345dd0008..e74b80586 100644
--- a/modules/ui_sections.py
+++ b/modules/ui_sections.py
@@ -42,9 +42,9 @@ def create_toprow(is_img2img: bool = False, id_part: str = None):
                 button_extra = gr.Button(value='Networks', variant='secondary', elem_id=f"{id_part}_extra_networks_btn") # symbols.networks
                 button_clear.click(fn=lambda *x: ['', ''], inputs=[prompt, negative_prompt], outputs=[prompt, negative_prompt], show_progress=False)
             with gr.Row(elem_id=f"{id_part}_counters"):
-                token_counter = gr.HTML(value="<span>0/75</span>", elem_id=f"{id_part}_token_counter", elem_classes=["token-counter"])
+                token_counter = gr.HTML(value="<span>0/75</span>", elem_id=f"{id_part}_token_counter", elem_classes=["token-counter"], visible=False)
                 token_button = gr.Button(visible=False, elem_id=f"{id_part}_token_button")
-                negative_token_counter = gr.HTML(value="<span>0/75</span>", elem_id=f"{id_part}_negative_token_counter", elem_classes=["token-counter"])
+                negative_token_counter = gr.HTML(value="<span>0/75</span>", elem_id=f"{id_part}_negative_token_counter", elem_classes=["token-counter"], visible=False)
                 negative_token_button = gr.Button(visible=False, elem_id=f"{id_part}_negative_token_button")
             with gr.Row(elem_id=f"{id_part}_styles_row"):
                 styles = gr.Dropdown(label="Styles", elem_id=f"{id_part}_styles", choices=[style.name for style in shared.prompt_styles.styles.values()], value=[], multiselect=True)