diff --git a/src/routes/config/[guildId].tsx b/src/routes/config/[guildId].tsx
index 741dcb3..831e143 100644
--- a/src/routes/config/[guildId].tsx
+++ b/src/routes/config/[guildId].tsx
@@ -148,7 +148,7 @@ const saveConfig = async (
   return { success: true };
 };
 
-function MyConfig() {
+function config() {
   const params = useParams();
   const navigator = useNavigate();
   const location = useLocation();
@@ -201,7 +201,7 @@ function MyConfig() {
   });
 
   const updateValues = createMemo(() => {
-    const guild = payload()?.guild;
+    const guild = !payload.loading && payload()?.guild;
     if (!guild) return {};
     const data = config.features.timePlanning;
     const tpInterval = combineInterval(
@@ -285,254 +285,257 @@ function MyConfig() {
   });
 
   return (
-    <div class="group">
-      <h3>Configure li&apos;l Judd in</h3>
-      <div>
+    <Layout site="config">
+      <div class="group">
+        <h3>Configure li&apos;l Judd in</h3>
         <div>
-          <div class="flex-row centered">
-            <img
-              class="guildpfp"
-              src={
-                payload()?.guild.icon
-                  ? `https://cdn.discordapp.com/icons/${payload()?.guild.id}/${
-                      payload()?.guild.icon
-                    }.webp?size=240`
-                  : "https://cdn.discordapp.com/icons/1040502664506646548/bb5a51c4659cf47bdd942bb11e974da7.webp?size=240"
-              }
-              alt="Server pfp"
-            />
-            <h1>{payload()?.guild.name}</h1>
+          <div>
+            <div class="flex-row centered">
+              <img
+                class="guildpfp"
+                src={
+                  payload()?.guild.icon
+                    ? `https://cdn.discordapp.com/icons/${payload()?.guild.id}/${
+                        payload()?.guild.icon
+                      }.webp?size=240`
+                    : "https://cdn.discordapp.com/icons/1040502664506646548/bb5a51c4659cf47bdd942bb11e974da7.webp?size=240"
+                }
+                alt="Server pfp"
+              />
+              <h1>{payload()?.guild.name}</h1>
+            </div>
           </div>
-        </div>
 
-        <section class="box">
-          <h2>Guild</h2>
-          <p>General settings for this guild.</p>
-          <div class="flex-row">
-            <label for="timezone">Timezone for your server:</label>
+          <section class="box">
+            <h2>Guild</h2>
+            <p>General settings for this guild.</p>
+            <div class="flex-row">
+              <label for="timezone">Timezone for your server:</label>
+              <input
+                type="text"
+                list="timezones"
+                id="timezone"
+                ref={(e) => setTimezoneRef(e)}
+                value={payload()?.guild.timezone}
+                onInput={(e) =>
+                  setConfig(
+                    "features",
+                    "timePlanning",
+                    "timezone",
+                    e.target.value,
+                  )
+                }
+              />
+
+              <datalist id="timezones">
+                <Index each={payload()?.tzNames}>
+                  {(zone) => <option value={zone()} />}
+                </Index>
+              </datalist>
+
+              <button
+                disabled={guessTZ() === config.features.timePlanning.timezone}
+                title={"Detected: " + guessTZ()}
+                onClick={() =>
+                  setConfig("features", "timePlanning", "timezone", guessTZ())
+                }
+              >
+                Auto-detect
+              </button>
+            </div>
+          </section>
+
+          <section class="box">
+            <h2>Features</h2>
+            <p>Configure the features of the bot</p>
+            <label for="timePlanning" class="flex-row">
+              <p>Time Planning </p>
+              <FontAwesomeIcon
+                icon={
+                  config.features.timePlanning.enabled
+                    ? faToggleOn
+                    : faToggleOff
+                }
+                size="xl"
+              />
+            </label>
             <input
-              type="text"
-              list="timezones"
-              id="timezone"
-              ref={(e) => setTimezoneRef(e)}
-              value={payload()?.guild.timezone}
+              hidden
+              type="checkbox"
+              id="timePlanning"
+              ref={(e) => setTpEnabledRef(e)}
+              checked={!!payload()?.guild.tpChannelId}
               onInput={(e) =>
                 setConfig(
                   "features",
                   "timePlanning",
-                  "timezone",
-                  e.target.value,
+                  "enabled",
+                  e.target.checked,
                 )
               }
             />
-
-            <datalist id="timezones">
-              <Index each={payload()?.tzNames}>
-                {(zone) => <option value={zone()} />}
-              </Index>
-            </datalist>
-
-            <button
-              disabled={guessTZ() === config.features.timePlanning.timezone}
-              title={"Detected: " + guessTZ()}
-              onClick={() =>
-                setConfig("features", "timePlanning", "timezone", guessTZ())
-              }
+            <div
+              class="sub"
+              classList={{ disabled: !config.features.timePlanning.enabled }}
             >
-              Auto-detect
-            </button>
-          </div>
-        </section>
-
-        <section class="box">
-          <h2>Features</h2>
-          <p>Configure the features of the bot</p>
-          <label for="timePlanning" class="flex-row">
-            <p>Time Planning </p>
-            <FontAwesomeIcon
-              icon={
-                config.features.timePlanning.enabled ? faToggleOn : faToggleOff
-              }
-              size="xl"
-            />
-          </label>
-          <input
-            hidden
-            type="checkbox"
-            id="timePlanning"
-            ref={(e) => setTpEnabledRef(e)}
-            checked={!!payload()?.guild.tpChannelId}
-            onInput={(e) =>
-              setConfig("features", "timePlanning", "enabled", e.target.checked)
-            }
-          />
-          <div
-            class="sub"
-            classList={{ disabled: !config.features.timePlanning.enabled }}
-          >
-            <div class="flex-row">
-              <label>Target channel:</label>
-              <select
-                ref={(e) => setChannelRef(e)}
-                value={payload()?.guild.tpChannelId}
-                onInput={(e) =>
-                  setConfig(
-                    "features",
-                    "timePlanning",
-                    "channelId",
-                    e.target.value,
-                  )
-                }
-              >
-                <option disabled value="">
-                  --Select a Channel--
-                </option>
-                <For each={payload()?.guild.channels}>
-                  {(channel) => (
-                    <option value={channel.id}>{channel.name}</option>
-                  )}
-                </For>
-              </select>
-              <Show
-                when={
-                  config.features.timePlanning.enabled &&
-                  !config.features.timePlanning.channelId
-                }
-              >
-                {"<-- or changes won't be saved"}
-              </Show>
-            </div>
-            <div class="flex-row">
-              <label>Target Interval:</label>
-              <select
-                ref={(e) => setTargetDayRef(e)}
-                value={
-                  splitInterval(payload()?.guild.tpInterval ?? 0).targetDay
-                }
-                onInput={(e) =>
-                  setConfig(
-                    "features",
-                    "timePlanning",
-                    "targetDay",
-                    Number(e.target.value),
-                  )
-                }
-              >
-                <Index each={Array.from(Array(7)).map((_e, i) => i)}>
-                  {(id) => {
-                    const weekdays = [
-                      "Sunday",
-                      "Monday",
-                      "Tuesday",
-                      "Wednesday",
-                      "Thursday",
-                      "Friday",
-                      "Saturday",
-                    ];
-                    return (
-                      <option value={String(id())}>{weekdays[id()]}</option>
-                    );
-                  }}
-                </Index>
-              </select>
-              at
-              <select
-                ref={(e) => setTargetHourRef(e)}
-                value={
-                  splitInterval(payload()?.guild.tpInterval ?? 0).targetHour
-                }
-                onInput={(e) =>
-                  setConfig(
-                    "features",
-                    "timePlanning",
-                    "targetHour",
-                    Number(e.target.value),
-                  )
-                }
-              >
-                <Index each={Array.from(Array(24)).map((_e, i) => i)}>
-                  {(id) => <option value={String(id())}>{String(id())}</option>}
-                </Index>
-              </select>
-              :
-              <select
-                ref={(e) => setTargetMinuteRef(e)}
-                value={
-                  splitInterval(payload()?.guild.tpInterval ?? 0).targetMinute
-                }
-                onInput={(e) =>
-                  setConfig(
-                    "features",
-                    "timePlanning",
-                    "targetMinute",
-                    Number(e.target.value),
-                  )
-                }
-              >
-                <Index each={Array.from(Array(60)).map((_e, i) => i)}>
-                  {(id) => (
-                    <option value={String(id())}>
-                      {String(id()).padStart(2, "0")}
-                    </option>
-                  )}
-                </Index>
-              </select>
-            </div>
-            <div class="flex-row">
-              <label for="pingableRoles" class="flex-row">
-                <p>Enable pingable Roles:</p>
-                <FontAwesomeIcon
-                  icon={
-                    config.features.timePlanning.pingableRoles
-                      ? faToggleOn
-                      : faToggleOff
+              <div class="flex-row">
+                <label>Target channel:</label>
+                <select
+                  ref={(e) => setChannelRef(e)}
+                  value={payload()?.guild.tpChannelId}
+                  onInput={(e) =>
+                    setConfig(
+                      "features",
+                      "timePlanning",
+                      "channelId",
+                      e.target.value,
+                    )
+                  }
+                >
+                  <option disabled value="">
+                    --Select a Channel--
+                  </option>
+                  <For each={payload()?.guild.channels}>
+                    {(channel) => (
+                      <option value={channel.id}>{channel.name}</option>
+                    )}
+                  </For>
+                </select>
+                <Show
+                  when={
+                    config.features.timePlanning.enabled &&
+                    !config.features.timePlanning.channelId
+                  }
+                >
+                  {"<-- or changes won't be saved"}
+                </Show>
+              </div>
+              <div class="flex-row">
+                <label>Target Interval:</label>
+                <select
+                  ref={(e) => setTargetDayRef(e)}
+                  value={
+                    splitInterval(payload()?.guild.tpInterval ?? 0).targetDay
+                  }
+                  onInput={(e) =>
+                    setConfig(
+                      "features",
+                      "timePlanning",
+                      "targetDay",
+                      Number(e.target.value),
+                    )
+                  }
+                >
+                  <Index each={Array.from(Array(7)).map((_e, i) => i)}>
+                    {(id) => {
+                      const weekdays = [
+                        "Sunday",
+                        "Monday",
+                        "Tuesday",
+                        "Wednesday",
+                        "Thursday",
+                        "Friday",
+                        "Saturday",
+                      ];
+                      return (
+                        <option value={String(id())}>{weekdays[id()]}</option>
+                      );
+                    }}
+                  </Index>
+                </select>
+                at
+                <select
+                  ref={(e) => setTargetHourRef(e)}
+                  value={
+                    splitInterval(payload()?.guild.tpInterval ?? 0).targetHour
+                  }
+                  onInput={(e) =>
+                    setConfig(
+                      "features",
+                      "timePlanning",
+                      "targetHour",
+                      Number(e.target.value),
+                    )
+                  }
+                >
+                  <Index each={Array.from(Array(24)).map((_e, i) => i)}>
+                    {(id) => (
+                      <option value={String(id())}>{String(id())}</option>
+                    )}
+                  </Index>
+                </select>
+                :
+                <select
+                  ref={(e) => setTargetMinuteRef(e)}
+                  value={
+                    splitInterval(payload()?.guild.tpInterval ?? 0).targetMinute
+                  }
+                  onInput={(e) =>
+                    setConfig(
+                      "features",
+                      "timePlanning",
+                      "targetMinute",
+                      Number(e.target.value),
+                    )
+                  }
+                >
+                  <Index each={Array.from(Array(60)).map((_e, i) => i)}>
+                    {(id) => (
+                      <option value={String(id())}>
+                        {String(id()).padStart(2, "0")}
+                      </option>
+                    )}
+                  </Index>
+                </select>
+              </div>
+              <div class="flex-row">
+                <label for="pingableRoles" class="flex-row">
+                  <p>Enable pingable Roles:</p>
+                  <FontAwesomeIcon
+                    icon={
+                      config.features.timePlanning.pingableRoles
+                        ? faToggleOn
+                        : faToggleOff
+                    }
+                    size="xl"
+                  />
+                </label>
+                <input
+                  hidden
+                  type="checkbox"
+                  id="pingableRoles"
+                  ref={(e) => setPingableRolesRef(e)}
+                  checked={payload()?.guild.pingableRoles}
+                  onInput={(e) =>
+                    setConfig(
+                      "features",
+                      "timePlanning",
+                      "pingableRoles",
+                      e.target.checked,
+                    )
                   }
-                  size="xl"
                 />
-              </label>
-              <input
-                hidden
-                type="checkbox"
-                id="pingableRoles"
-                ref={(e) => setPingableRolesRef(e)}
-                checked={payload()?.guild.pingableRoles}
-                onInput={(e) =>
-                  setConfig(
-                    "features",
-                    "timePlanning",
-                    "pingableRoles",
-                    e.target.checked,
-                  )
-                }
-              />
+              </div>
             </div>
-          </div>
-        </section>
+          </section>
 
-        <section class="box">
-          <button
-            onClick={async () => {
-              const id = payload()?.guild.id;
-              if (!id || !willUpdateValues()) return;
-              await saveConfig(id, updateValues());
-              refetch();
-            }}
-          >
-            Apply
-          </button>
-          <button onClick={() => navigator("/config")}>Back</button>
-          <button onClick={() => refetch()}>Reset</button>
-          <Show when={willUpdateValues()}>UNSAVED CHANGES</Show>
-        </section>
+          <section class="box">
+            <button
+              onClick={async () => {
+                const id = payload()?.guild.id;
+                if (!id || !willUpdateValues()) return;
+                await saveConfig(id, updateValues());
+                refetch();
+              }}
+            >
+              Apply
+            </button>
+            <button onClick={() => navigator("/config")}>Back</button>
+            <button onClick={() => refetch()}>Reset</button>
+            <Show when={willUpdateValues()}>UNSAVED CHANGES</Show>
+          </section>
+        </div>
       </div>
-    </div>
-  );
-}
-
-function config() {
-  return (
-    <Layout site="config">
-      <MyConfig />
     </Layout>
   );
 }