diff --git a/frontend/src/TeamPanel.tsx b/frontend/src/TeamPanel.tsx
index d759d94..97e5a6c 100644
--- a/frontend/src/TeamPanel.tsx
+++ b/frontend/src/TeamPanel.tsx
@@ -70,158 +70,169 @@ const TeamPanel = () => {
       (team) => team.id == teams?.activeTeam
     )[0];
     return (
-      <section className="section">
-        <h1 className="title">{activeTeam.name}</h1>
-        <h2 className="subtitle">
-          {activeTeam.location}, {activeTeam.country}
-        </h2>
-        <div className="box">
-          <h2 className="title is-4">Players</h2>
-          {players ? (
-            <div className="buttons">
-              {players.map((p) => (
+      <>
+        <section className="section">
+          <h1 className="title">{activeTeam.name}</h1>
+          <h2 className="subtitle">
+            {activeTeam.location}, {activeTeam.country}
+          </h2>
+          <div className="box">
+            <h2 className="title is-4">Players</h2>
+            {players ? (
+              <div className="buttons">
+                {players.map((p) => (
+                  <button
+                    className={
+                      "button is-primary is-light " +
+                      p.gender +
+                      (p.id === player.id ? " is-focused is-active" : "")
+                    }
+                    key={p.id}
+                    onClick={() => {
+                      setPlayer(p);
+                      setError({ ok: true, message: "" });
+                    }}
+                  >
+                    {p.display_name}
+                  </button>
+                ))}
                 <button
-                  className={
-                    "button is-primary is-light " +
-                    p.gender +
-                    (p.id === player.id ? " is-focused is-active" : "")
-                  }
-                  key={p.id}
+                  className="button is-success is-light new-player"
+                  key="add-player"
                   onClick={() => {
-                    setPlayer(p);
+                    setPlayer(newPlayerTemplate);
                     setError({ ok: true, message: "" });
                   }}
                 >
-                  {p.display_name}
+                  +
                 </button>
-              ))}
-              <button
-                className="button is-success is-light new-player"
-                key="add-player"
-                onClick={() => {
-                  setPlayer(newPlayerTemplate);
-                  setError({ ok: true, message: "" });
-                }}
-              >
-                +
-              </button>
-            </div>
-          ) : (
-            <span className="loader" />
-          )}
-        </div>
+              </div>
+            ) : (
+              <span className="loader" />
+            )}
+          </div>
 
-        <form className="container block" onSubmit={handleSubmit}>
-          <div className="field">
-            <label className="label">name</label>
-            <div className="control">
-              <input
-                className="input"
-                type="text"
-                required
-                value={player.display_name}
-                onChange={(e) => {
-                  setPlayer({
-                    ...player,
-                    ...(player.id === 0 && {
-                      username: e.target.value.toLowerCase().replace(/\W/g, ""),
-                    }),
-                    display_name: e.target.value,
-                  });
-                  setError({ ok: true, message: "" });
-                }}
-              />
-            </div>
-          </div>
-          <div className="field">
-            <label className="label">username</label>
-            <div className="control">
-              <input
-                className="input"
-                type="text"
-                required
-                disabled={player.id !== 0}
-                value={player.username}
-                onChange={(e) => {
-                  setPlayer({ ...player, username: e.target.value });
-                  setError({ ok: true, message: "" });
-                }}
-              />
-            </div>
-          </div>
-          <div className="field">
-            <label className="label">gender</label>
-            <div className="control">
-              <div className="select">
-                <select
-                  name="gender"
-                  value={player.gender}
+          <form className="container block" onSubmit={handleSubmit}>
+            <div className="field">
+              <label className="label">name</label>
+              <div className="control">
+                <input
+                  className="input"
+                  type="text"
+                  required
+                  value={player.display_name}
                   onChange={(e) => {
-                    setPlayer({ ...player, gender: e.target.value as Gender });
+                    setPlayer({
+                      ...player,
+                      ...(player.id === 0 && {
+                        username: e.target.value
+                          .toLowerCase()
+                          .replace(/\W/g, ""),
+                      }),
+                      display_name: e.target.value,
+                    });
                     setError({ ok: true, message: "" });
                   }}
-                >
-                  <option value={undefined}></option>
-                  <option value="fmp">FMP</option>
-                  <option value="mmp">MMP</option>
-                </select>
+                />
               </div>
             </div>
-          </div>
-          <div className="field">
-            <label className="label">number (optional)</label>
-            <div className="control">
-              <input
-                className="input"
-                type="text"
-                value={player.number || ""}
-                onChange={(e) => {
-                  setPlayer({ ...player, number: e.target.value });
-                  setError({ ok: true, message: "" });
-                }}
-              />
+            <div className="field">
+              <label className="label">username</label>
+              <div className="control">
+                <input
+                  className="input"
+                  type="text"
+                  required
+                  disabled={player.id !== 0}
+                  value={player.username}
+                  onChange={(e) => {
+                    setPlayer({ ...player, username: e.target.value });
+                    setError({ ok: true, message: "" });
+                  }}
+                />
+              </div>
             </div>
-          </div>
-          <div className="field">
-            <label className="label">email (optional)</label>
-            <div className="control">
-              <input
-                className="input"
-                type="email"
-                value={player.email || ""}
-                onChange={(e) => {
-                  setPlayer({ ...player, email: e.target.value });
-                  setError({ ok: true, message: "" });
-                }}
-              />
+            <div className="field">
+              <label className="label">gender</label>
+              <div className="control">
+                <div className="select">
+                  <select
+                    name="gender"
+                    value={player.gender}
+                    onChange={(e) => {
+                      setPlayer({
+                        ...player,
+                        gender: e.target.value as Gender,
+                      });
+                      setError({ ok: true, message: "" });
+                    }}
+                  >
+                    <option value={undefined}></option>
+                    <option value="fmp">FMP</option>
+                    <option value="mmp">MMP</option>
+                  </select>
+                </div>
+              </div>
             </div>
-            {error?.message && (
-              <p className={"help" + (error.ok ? " is-success" : " is-danger")}>
-                {error.message}
-              </p>
-            )}
-          </div>
-          <div className="field is-grouped">
-            <button
-              className={
-                "button is-light" +
-                (player.id === 0 ? " is-success" : " is-link")
-              }
-            >
-              {player.id === 0 ? "add player" : "modify player"}
-            </button>
-            {player.id !== 0 && (
+            <div className="field">
+              <label className="label">number (optional)</label>
+              <div className="control">
+                <input
+                  className="input"
+                  type="text"
+                  value={player.number || ""}
+                  onChange={(e) => {
+                    setPlayer({ ...player, number: e.target.value });
+                    setError({ ok: true, message: "" });
+                  }}
+                />
+              </div>
+            </div>
+            <div className="field">
+              <label className="label">email (optional)</label>
+              <div className="control">
+                <input
+                  className="input"
+                  type="email"
+                  value={player.email || ""}
+                  onChange={(e) => {
+                    setPlayer({ ...player, email: e.target.value });
+                    setError({ ok: true, message: "" });
+                  }}
+                />
+              </div>
+              {error?.message && (
+                <p
+                  className={"help" + (error.ok ? " is-success" : " is-danger")}
+                >
+                  {error.message}
+                </p>
+              )}
+            </div>
+            <div className="field is-grouped">
               <button
-                className="button is-danger is-light"
-                onClick={handleDisable}
+                className={
+                  "button is-light" +
+                  (player.id === 0 ? " is-success" : " is-link")
+                }
               >
-                remove player
+                {player.id === 0 ? "add player" : "modify player"}
               </button>
-            )}
-          </div>
-        </form>
-        <Calendar playerId={player.id} />
-      </section>
+              {player.id !== 0 && (
+                <button
+                  className="button is-danger is-light"
+                  onClick={handleDisable}
+                >
+                  remove player
+                </button>
+              )}
+            </div>
+          </form>
+        </section>
+        <section className="section">
+          <Calendar playerId={player.id} />
+        </section>
+      </>
     );
   } else <span className="loader" />;
 };