diff --git a/src/client/JoinLobbyModal.ts b/src/client/JoinLobbyModal.ts
index 22e674fda..5ed20369a 100644
--- a/src/client/JoinLobbyModal.ts
+++ b/src/client/JoinLobbyModal.ts
@@ -221,7 +221,7 @@ export class JoinLobbyModal extends BaseModal {
           onBack: () => this.closeAndLeave(),
           ariaLabel: translateText("common.close"),
         })}
-        <div class="flex-1 overflow-y-auto custom-scrollbar p-6 space-y-4 mr-1">
+        <form @submit=${this.joinLobbyFromInput} class="flex-1 overflow-y-auto custom-scrollbar p-6 space-y-4 mr-1">
           <div class="flex flex-col gap-3">
             <div class="flex gap-2">
               <input
@@ -255,7 +255,7 @@ export class JoinLobbyModal extends BaseModal {
             <o-button
               title=${translateText("private_lobby.join_lobby")}
               block
-              @click=${this.joinLobbyFromInput}
+              submit
             ></o-button>
           </div>
         </div>
@@ -673,7 +673,8 @@ export class JoinLobbyModal extends BaseModal {
     }
   }
 
-  private async joinLobbyFromInput(): Promise<void> {
+  private async joinLobbyFromInput(e: SubmitEvent): Promise<void> {
+    e.preventDefault();
     const lobbyId = this.normalizeLobbyId(this.lobbyIdInput.value);
     if (!lobbyId) {
       this.showMessage(translateText("private_lobby.not_found"), "red");
diff --git a/src/client/components/baseComponents/Button.ts b/src/client/components/baseComponents/Button.ts
index e3dd03898..3d2ccfdcd 100644
--- a/src/client/components/baseComponents/Button.ts
+++ b/src/client/components/baseComponents/Button.ts
@@ -12,6 +12,7 @@ export class OButton extends LitElement {
   @property({ type: Boolean }) blockDesktop = false;
   @property({ type: Boolean }) disable = false;
   @property({ type: Boolean }) fill = false;
+  @property({ type: Boolean }) submit = false;
   private static readonly BASE_CLASS =
     "bg-blue-600 hover:bg-blue-700 text-white font-bold uppercase tracking-wider px-4 py-3 rounded-xl transition-all duration-300 transform hover:-translate-y-px outline-none border border-transparent text-center text-base lg:text-lg whitespace-normal break-words leading-tight overflow-hidden relative";
 
@@ -38,6 +39,7 @@ export class OButton extends LitElement {
       <button
         class=${classMap(this.getButtonClasses())}
         ?disabled=${this.disable}
+        type=${this.submit ? "submit" : "button"}
       >
         <span class="block min-w-0">
           ${this.translationKey === ""