diff --git a/routes/login_page.go b/routes/login_page.go
index eb3048a..74fc632 100644
--- a/routes/login_page.go
+++ b/routes/login_page.go
@@ -17,9 +17,12 @@ import (
 	"sunshine.industries/some-automoderation/sessions"
 )
 
-type MainData struct {
+type LoginSectionData struct {
 	IsRoomExisting bool
 }
+type loginPageData struct {
+	LoginSection LoginSectionData
+}
 
 // function to register all http routes for servicing auth pages and logic
 func registerLoginRoutes(
@@ -93,14 +96,17 @@ func authedPageMiddleware(
 
 func renderLoginPage(w http.ResponseWriter) {
 	baseFile := "templates/base.gohtml"
-	templFile := "templates/login.gohtml"
-	tmpl := template.Must(template.ParseFS(templateFs, templFile, baseFile))
+	pageTempl := "templates/login.gohtml"
+	loginSecion := "templates/login-section.gohtml"
+	tmpl := template.Must(template.ParseFS(templateFs, pageTempl, baseFile, loginSecion))
 	data := pageData{
 		Base: baseData{
 			Title: "login",
 		},
-		Content: MainData{
-			IsRoomExisting: false,
+		Content: loginPageData{
+			LoginSection: LoginSectionData{
+				IsRoomExisting: false,
+			},
 		},
 	}
 
@@ -182,7 +188,7 @@ func checkRoomName(templateFs *embed.FS,
 		if err != nil {
 			log.Printf("/login/room-name-check error finding room %s\n", err)
 		}
-		var templFile = "templates/login.gohtml"
+		templFile := "templates/login-section.gohtml"
 		tmpl := template.Must(template.ParseFS(templateFs, templFile))
 		err = tmpl.ExecuteTemplate(w, "formButton", isFound)
 	}
@@ -241,7 +247,7 @@ func joinRoomHandler(templateFs *embed.FS,
 		if (person == rooms.Person{}) {
 			log.Printf("/login/join room pass correct, new person joins")
 			// creating a new person with provided password hash
-			personPassHash, err := hashPassword(personPass) 
+			personPassHash, err := hashPassword(personPass)
 			person = rooms.Person{
 				Name:         personName,
 				PasswordHash: personPassHash,
diff --git a/routes/templates/login-section.gohtml b/routes/templates/login-section.gohtml
new file mode 100644
index 0000000..5dfa898
--- /dev/null
+++ b/routes/templates/login-section.gohtml
@@ -0,0 +1,111 @@
+      {{ define "loginSection" }}
+      <section class="h-full grid place-content-center">
+        <form
+          id="loginForm"
+          class="grid grid-cols-2 place-content-center border border-black rounded p-4 gap-6"
+        >
+          <div id="roomInput" class="flex flex-col gap-4">
+            <p>Please specify room</p>
+            <input
+              id="roomName"
+              type="text"
+              name="roomName"
+              value=""
+              placeholder="room name!!!"
+              hx-trigger="keyup changed delay:500ms"
+              hx-post="/login/room-name-check"
+              hx-target="#formButton"
+              hx-swap="outerHTML"
+              class="invalid:bg-red-700"
+            />
+            <input
+              id="roomPassword"
+              type="password"
+              name="roomPassword"
+              value=""
+              placeholder="room password"
+            />
+          </div>
+          <div id="personInput" class="flex flex-col gap-4">
+            <p>And input your personal</p>
+            <input
+              id="personalName"
+              type="text"
+              name="personalName"
+              value=""
+              placeholder="personal name"
+              class="invalid:bg-red-700"
+            />
+            <input
+              id="personalPassword"
+              type="password"
+              name="personalPassword"
+              value=""
+              placeholder="personal password"
+            />
+          </div>
+          {{ block "formButton" .IsRoomExisting }} {{ if not . }}
+          <button
+            id="formButton"
+            class="col-span-full"
+            hx-post="/login/create"
+            hx-validate="true"
+          >
+            Create Room
+          </button>
+          {{ else }}
+          <button
+            id="formButton"
+            class="col-span-full"
+            hx-post="/login/join"
+            hx-validate="true"
+          >
+            Join Room
+          </button>
+          {{ end }} {{ end }}
+        </form>
+        <script>
+          window.addEventListener("DOMContentLoaded", (event) => {
+            document.getElementById("loginForm").reset();
+          });
+
+          const requiredInputFunc = function (event) {
+            // If the input is empty...
+            if (this.value.trim() === "") {
+              // ...set a custom validity message
+              console.log("empty name");
+              this.setCustomValidity("Please fill out this field.");
+              this.checkValidity();
+            } else {
+              // If not empty, clear any custom validity message
+              console.log("other");
+              this.setCustomValidity("");
+            }
+          };
+
+          // Find the input element
+          const personalNameInput = document.getElementById("personalName");
+          const roomNameInput = document.getElementById("roomName");
+
+          // Listen for the 'htmx:validation:validate' event on the input element
+          personalNameInput.addEventListener(
+            "htmx:validation:validate",
+            requiredInputFunc,
+          );
+          roomNameInput.addEventListener(
+            "htmx:validation:validate",
+            requiredInputFunc,
+          );
+
+          // You can also listen for the 'input' event to clear the validation message as the user types
+          personalNameInput.addEventListener("input", function (event) {
+            // Always clear the custom validity message when the user types
+            this.setCustomValidity("");
+          });
+          roomNameInput.addEventListener("input", function (event) {
+            // Always clear the custom validity message when the user types
+            this.setCustomValidity("");
+          });
+        </script>
+      </section>
+      {{ end }}
diff --git a/routes/templates/login.gohtml b/routes/templates/login.gohtml
index 939ce87..cb02b17 100644
--- a/routes/templates/login.gohtml
+++ b/routes/templates/login.gohtml
@@ -33,115 +33,7 @@
       <header>
         <h1>Some Automoderation: login page</h1>
       </header>
-      <section class="h-full grid place-content-center">
-        <form
-          id="loginForm"
-          class="grid grid-cols-2 place-content-center border border-black rounded p-4 gap-6"
-        >
-          <div id="roomInput" class="flex flex-col gap-4">
-            <p>Please specify room</p>
-            <input
-              id="roomName"
-              type="text"
-              name="roomName"
-              value=""
-              placeholder="room name!!!"
-              hx-trigger="keyup changed delay:500ms"
-              hx-post="/login/room-name-check"
-              hx-target="#formButton"
-              hx-swap="outerHTML"
-              class="invalid:bg-red-700"
-            />
-            <input
-              id="roomPassword"
-              type="password"
-              name="roomPassword"
-              value=""
-              placeholder="room password"
-            />
-          </div>
-          <div id="personInput" class="flex flex-col gap-4">
-            <p>And input your personal</p>
-            <input
-              id="personalName"
-              type="text"
-              name="personalName"
-              value=""
-              placeholder="personal name"
-              class="invalid:bg-red-700"
-            />
-            <input
-              id="personalPassword"
-              type="password"
-              name="personalPassword"
-              value=""
-              placeholder="personal password"
-            />
-          </div>
-          {{ block "formButton" .IsRoomExisting }} {{ if not . }}
-          <button
-            id="formButton"
-            class="col-span-full"
-            hx-post="/login/create"
-            hx-validate="true"
-          >
-            Create Room
-          </button>
-          {{ else }}
-          <button
-            id="formButton"
-            class="col-span-full"
-            hx-post="/login/join"
-            hx-validate="true"
-          >
-            Join Room
-          </button>
-          {{ end }} {{ end }}
-        </form>
-        <script>
-          window.addEventListener("DOMContentLoaded", (event) => {
-            document.getElementById("loginForm").reset();
-          });
-
-          const requiredInputFunc = function (event) {
-            // If the input is empty...
-            if (this.value.trim() === "") {
-              // ...set a custom validity message
-              console.log("empty name");
-              this.setCustomValidity("Please fill out this field.");
-              this.checkValidity();
-            } else {
-              // If not empty, clear any custom validity message
-              console.log("other");
-              this.setCustomValidity("");
-            }
-          };
-
-          // Find the input element
-          const personalNameInput = document.getElementById("personalName");
-          const roomNameInput = document.getElementById("roomName");
-
-          // Listen for the 'htmx:validation:validate' event on the input element
-          personalNameInput.addEventListener(
-            "htmx:validation:validate",
-            requiredInputFunc,
-          );
-          roomNameInput.addEventListener(
-            "htmx:validation:validate",
-            requiredInputFunc,
-          );
-
-          // You can also listen for the 'input' event to clear the validation message as the user types
-          personalNameInput.addEventListener("input", function (event) {
-            // Always clear the custom validity message when the user types
-            this.setCustomValidity("");
-          });
-          roomNameInput.addEventListener("input", function (event) {
-            // Always clear the custom validity message when the user types
-            this.setCustomValidity("");
-          });
-        </script>
-      </section>
+      {{ template "loginSection" .LoginSection }}
     </main>
     {{ end }}
   </body>