diff --git a/src/Input.jsx b/src/Input.jsx
index 3acc9e8..d890ab3 100644
--- a/src/Input.jsx
+++ b/src/Input.jsx
@@ -22,14 +22,16 @@ export function Field({ children, className, ...rest }) {
 }
 
 export const InputField = forwardRef(
-  ({ id, label, className, type, checked, ...rest }, ref) => {
+  ({ id, label, className, type, checked, prefix, suffix, ...rest }, ref) => {
     return (
       <Field
         className={classNames(
           type === "checkbox" ? styles.checkboxField : styles.inputField,
+          { [styles.prefix]: !!prefix },
           className
         )}
       >
+        {prefix && <span>{prefix}</span>}
         <input id={id} {...rest} ref={ref} type={type} checked={checked} />
         <label htmlFor={id}>
           {type === "checkbox" && (
@@ -39,6 +41,7 @@ export const InputField = forwardRef(
           )}
           {label}
         </label>
+        {suffix && <span>{suffix}</span>}
       </Field>
     );
   }
diff --git a/src/Input.module.css b/src/Input.module.css
index 736a3b7..b47a20d 100644
--- a/src/Input.module.css
+++ b/src/Input.module.css
@@ -40,6 +40,10 @@
   min-width: 0;
 }
 
+.inputField span {
+  padding: 11px 9px;
+}
+
 .inputField input::placeholder {
   transition: color 0.25s ease-in 0s;
   color: transparent;
@@ -77,7 +81,8 @@
 }
 
 .inputField input:focus + label,
-.inputField input:not(:placeholder-shown) + label {
+.inputField input:not(:placeholder-shown) + label,
+.inputField.prefix input + label {
   background-color: var(--bgColor2);
   transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s,
     top 0.25s ease-out 0s, background-color 0.25s ease-out 0s;
diff --git a/src/LoginPage.jsx b/src/LoginPage.jsx
index 67493cd..c20e7da 100644
--- a/src/LoginPage.jsx
+++ b/src/LoginPage.jsx
@@ -67,17 +67,6 @@ export function LoginPage() {
             <h2>Log In</h2>
             <h4>To continue to Element</h4>
             <form onSubmit={onSubmitLoginForm}>
-              <FieldRow>
-                <InputField
-                  type="text"
-                  value={homeserver}
-                  onChange={(e) => setHomeServer(e.target.value)}
-                  placeholder="Homeserver"
-                  label="Homeserver"
-                  autoCorrect="off"
-                  autoCapitalize="none"
-                />
-              </FieldRow>
               <FieldRow>
                 <InputField
                   type="text"
@@ -86,6 +75,8 @@ export function LoginPage() {
                   label="Username"
                   autoCorrect="off"
                   autoCapitalize="none"
+                  prefix="@"
+                  suffix={`:${window.location.host}`}
                 />
               </FieldRow>
               <FieldRow>
diff --git a/src/RegisterPage.jsx b/src/RegisterPage.jsx
index 4209bc5..d6b59fe 100644
--- a/src/RegisterPage.jsx
+++ b/src/RegisterPage.jsx
@@ -71,6 +71,8 @@ export function RegisterPage() {
                   label="Username"
                   autoCorrect="off"
                   autoCapitalize="none"
+                  prefix="@"
+                  suffix={`:${window.location.host}`}
                 />
               </FieldRow>
               <FieldRow>