# How shall make logon ui better?
**URL:**
**Author:**  [@AI-Trader](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Fu%2FAI-Trader)%5C
**Post date:** [October 31, 2024, 4:23am UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fhow-shall-make-logon-ui-better%2F114808%2F1 "2024-10-31T04:23:13Z")
my code looks like as below:
```auto
with gr.Column(scale=1) as login_interface:
# 登录部分
username = gr.Textbox(label="Username")
password = gr.Textbox(label="Password")
login_btn = gr.Button("Login", variant='primary')
```
it looks not good which means their width is too big; and I want to make it looks like as below fig:
how shall I do that?
---
**Author:**  [@John6666](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Fu%2FJohn6666)%5C
**Post date:** [October 31, 2024, 4:36am UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fhow-shall-make-logon-ui-better%2F114808%2F2 "2024-10-31T04:36:02Z")
Would it be something like this?
```py
with gr.Column(scale=1) as login_interface:
# 登录部分
with gr.Group():
gr.Markdown("### Login")
username = gr.Textbox(label="Username")
password = gr.Textbox(label="Password", type="password")
login_btn = gr.Button("Login", variant='primary')
```
or
```py
with gr.Column(scale=1) as login_interface:
# 登录部分
with gr.Group():
gr.Markdown("### Login")
with gr.Row():
username = gr.Textbox(label="Username")
password = gr.Textbox(label="Password", type="password")
login_btn = gr.Button("Login", variant='primary')
```
About type=“password”:
> **[Gradio Docs](https://www.gradio.app/docs/gradio/textbox)**
>
> Gradio docs for using
---
**Author:**  [@AI-Trader](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Fu%2FAI-Trader)%5C
**Post date:** [October 31, 2024, 4:52am UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fhow-shall-make-logon-ui-better%2F114808%2F3 "2024-10-31T04:52:35Z")
thank you for your reply, but it still looks to wide as below:
---
**Author:**  [@AI-Trader](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Fu%2FAI-Trader)%5C
**Post date:** [October 31, 2024, 4:53am UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fhow-shall-make-logon-ui-better%2F114808%2F4 "2024-10-31T04:53:54Z")
I just want to it looks not too wide as below:
---
**Author:**  [@John6666](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Fu%2FJohn6666)%5C
**Post date:** [October 31, 2024, 5:09am UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fhow-shall-make-logon-ui-better%2F114808%2F5 "2024-10-31T05:09:12Z")
Like this?
```py
import gradio as gr
CSS = """
.loginform {width=50%; align-items:center; !important;}
"""
with gr.Blocks(css=CSS) as demo:
with gr.Column(scale=1) as login_interface:
# 登录部分
with gr.Group(elem_classes="loginform"):
gr.Markdown("### Login")
username = gr.Textbox(label="Username")
password = gr.Textbox(label="Password", type="password")
login_btn = gr.Button("Login", variant='primary')
demo.launch()
```
---
**Author:**  [@AI-Trader](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Fu%2FAI-Trader)%5C
**Post date:** [October 31, 2024, 5:25am UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fhow-shall-make-logon-ui-better%2F114808%2F6 "2024-10-31T05:25:23Z")
thank you; it is most what I want except one point:
there is much `gray` around the `login` ui, so shall I make the `gray` to `white` or delete the `gray`?
---
**Author:**  [@John6666](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Fu%2FJohn6666)%5C
**Post date:** [October 31, 2024, 5:29am UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fhow-shall-make-logon-ui-better%2F114808%2F7 "2024-10-31T05:29:03Z")
I don’t know where this gray is coming from, so there’s no way to specify. I’ll check it out from Chrome in a bit.
---
**Author:**  [@AI-Trader](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Fu%2FAI-Trader)%5C
**Post date:** [October 31, 2024, 5:33am UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fhow-shall-make-logon-ui-better%2F114808%2F8 "2024-10-31T05:33:37Z")
ok, thanks your help.
---
**Author:**  [@John6666](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Fu%2FJohn6666)%5C
**Post date:** [October 31, 2024, 6:20am UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fhow-shall-make-logon-ui-better%2F114808%2F9 "2024-10-31T06:20:43Z")
I did.
```py
CSS = """
.loginform {width=50%; align-items:center; background-color:transparent; !important;}
"""
```