diff --git a/frontend/src/TeamPanel.tsx b/frontend/src/TeamPanel.tsx
index 97e5a6c..e0d865c 100644
--- a/frontend/src/TeamPanel.tsx
+++ b/frontend/src/TeamPanel.tsx
@@ -72,165 +72,171 @@ const TeamPanel = () => {
     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) => (
+          <div className="container">
+            <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,
+                        ...(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>
+                {player.id !== 0 && (
+                  <button
+                    className="button is-danger is-light"
+                    onClick={handleDisable}
+                  >
+                    remove player
+                  </button>
+                )}
+              </div>
+            </form>
+          </div>
         </section>
         <section className="section">
-          <Calendar playerId={player.id} />
+          <div className="container">
+            <Calendar playerId={player.id} />
+          </div>
         </section>
       </>
     );