diff --git a/src/pages/CreateOptions.jsx b/src/pages/CreateOptions.jsx
index 1d486f8..2f1bb45 100644
--- a/src/pages/CreateOptions.jsx
+++ b/src/pages/CreateOptions.jsx
@@ -14,21 +14,16 @@ import { useCreateServer, useVersionList } from "@mcl/queries";
 const defaultServer = {
   version: "latest",
   serverType: "VANILLA",
-  difficulty: "easy",
-  maxPlayers: "5",
-  gamemode: "survival",
   memory: "512",
-  motd: `\\u00A7e\\u00A7ka\\u00A7l\\u00A7aMine\\u00A76Cluster\\u00A7r\\u00A78\\u00A7b\\u00A7ka`,
 };
 
 export default function Create() {
-  const [wl, setWl] = useState([]);
-  const [ops, setOps] = useState([]);
   const [spec, setSpec] = useState(defaultServer);
   const nav = useNavigate();
   const versionList = useVersionList();
   const [versions, setVersions] = useState(["latest"]);
   const createServer = useCreateServer(spec);
+
   const updateSpec = (attr, val) => {
     const s = { ...spec };
     s[attr] = val;
@@ -48,46 +43,6 @@ export default function Create() {
 
   const coreUpdate = (attr) => (e) => updateSpec(attr, e.target.value);
 
-  function opsAdd(e) {
-    const opEntry = e.target.innerHTML ?? e.target.value;
-    if (!opEntry) return;
-    const newOps = [...ops, opEntry];
-    setOps(newOps);
-    updateSpec("ops", newOps.join(","));
-  }
-
-  function whitelistAdd(e) {
-    const wlEntry = e.target.value;
-    if (!wlEntry) return;
-    const newWl = [...wl, wlEntry];
-    setWl(newWl);
-    updateSpec("whitelist", newWl.join(","));
-  }
-
-  const opsRemove =
-    (name, { onDelete: updateAutoComplete }) =>
-    (e) => {
-      updateAutoComplete(e);
-      const newOps = [...ops];
-      const entryIndex = newOps.indexOf(name);
-      if (entryIndex === -1) return;
-      newOps.splice(entryIndex, 1);
-      setOps(newOps);
-      updateSpec("ops", newOps.join(","));
-    };
-
-  const whitelistRemove =
-    (name, { onDelete: updateAutocomplete }) =>
-    (e) => {
-      updateAutocomplete(e);
-      const newWl = [...wl];
-      const entryIndex = newWl.indexOf(name);
-      if (entryIndex === -1) return;
-      newWl.splice(entryIndex, 1);
-      setWl(newWl);
-      updateSpec("whitelist", newWl.join(","));
-    };
-
   async function upsertSpec() {
     if (validateSpec() !== "validated") return;
     createServer(spec)
@@ -97,9 +52,9 @@ export default function Create() {
 
   function validateSpec() {
     console.log("TODO CREATE VALIDATION");
+    if (!spec.host) return alertValidationError("Host cannot be blank");
     if (!spec.name) return alertValidationError("Name not included");
     if (!spec.version) return alertValidationError("Version cannot be blank");
-    if (!spec.host) return alertValidationError("Host cannot be blank");
     return "validated";
   }
 
@@ -124,7 +79,7 @@ export default function Create() {
         <TextField
           label="Host"
           onChange={coreUpdate("host")}
-          helperText="Example: host.mc.example.com"
+          helperText="Example: host.mydomain.com"
           FormHelperTextProps={{ sx: { ml: 0 } }}
           required
         />
@@ -154,93 +109,13 @@ export default function Create() {
           <MenuItem value={"PAPER"}>Paper</MenuItem>
           <MenuItem value={"SPIGOT"}>Spigot</MenuItem>
         </TextField>
-        <TextField
-          label="Difficulty"
-          onChange={coreUpdate("difficulty")}
-          value={spec.difficulty}
-          select
-          required
-        >
-          <MenuItem value={"peaceful"}>Peaceful</MenuItem>
-          <MenuItem value={"easy"}>Easy</MenuItem>
-          <MenuItem value={"medium"}>Medium</MenuItem>
-          <MenuItem value={"hard"}>Hard</MenuItem>
-        </TextField>
 
-        <Autocomplete
-          multiple
-          id="whitelist-autocomplete"
-          options={[]}
-          onChange={whitelistAdd}
-          freeSolo
-          renderInput={(p) => <TextField {...p} label="Whitelist" />}
-          renderTags={(value, getTagProps) =>
-            value.map((option, index) => {
-              const defaultChipProps = getTagProps({ index });
-              return (
-                <Chip
-                  label={option}
-                  {...defaultChipProps}
-                  onDelete={whitelistRemove(option, defaultChipProps)}
-                />
-              );
-            })
-          }
-        />
-        <Autocomplete
-          filterSelectedOptions={true}
-          multiple
-          id="ops-autocomplete"
-          options={wl}
-          onChange={opsAdd}
-          renderInput={(p) => <TextField {...p} label="Ops" />}
-          renderTags={(value, getTagProps) =>
-            value.map((option, index) => {
-              const defaultChipProps = getTagProps({ index });
-              return (
-                <Chip
-                  label={option}
-                  {...defaultChipProps}
-                  onDelete={opsRemove(option, defaultChipProps)}
-                />
-              );
-            })
-          }
-        />
-        {/*<TextField label="Ops" onChange={coreUpdate("ops")} />*/}
-        {/*<TextField label="Icon" onChange={coreUpdate("icon")} required />*/}
-        <TextField
-          label="Max Players"
-          onChange={coreUpdate("maxPlayers")}
-          defaultValue={spec.maxPlayers}
-          required
-        />
-        <TextField
-          label="Gamemode"
-          onChange={coreUpdate("gamemode")}
-          value={spec.gamemode}
-          select
-          required
-        >
-          <MenuItem value={"survival"}>Survival</MenuItem>
-          <MenuItem value={"creative"}>Creative</MenuItem>
-          <MenuItem value={"adventure"}>Adventure</MenuItem>
-          <MenuItem value={"spectator"}>Spectator</MenuItem>
-        </TextField>
-        <TextField label="Seed" onChange={coreUpdate("seed")} />
-        {/*<TextField label="Modpack" onChange={coreUpdate("modpack")} />*/}
         <TextField
           label="Memory"
           onChange={coreUpdate("memory")}
           defaultValue={spec.memory}
           required
         />
-        <TextField
-          label="MOTD"
-          onChange={coreUpdate("motd")}
-          defaultValue={spec.motd}
-          required
-        />
         <Button onClick={upsertSpec} variant="contained">
           Create
         </Button>
diff --git a/src/pages/CreateOptionsFull.jsx b/src/pages/CreateOptionsFull.jsx
new file mode 100644
index 0000000..1d486f8
--- /dev/null
+++ b/src/pages/CreateOptionsFull.jsx
@@ -0,0 +1,250 @@
+import { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import Autocomplete from "@mui/material/Autocomplete";
+import TextField from "@mui/material/TextField";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Chip from "@mui/material/Chip";
+import Select from "@mui/material/Select";
+import MenuItem from "@mui/material/MenuItem";
+import InputLabel from "@mui/material/InputLabel";
+import FormControl from "@mui/material/FormControl";
+import { useCreateServer, useVersionList } from "@mcl/queries";
+
+const defaultServer = {
+  version: "latest",
+  serverType: "VANILLA",
+  difficulty: "easy",
+  maxPlayers: "5",
+  gamemode: "survival",
+  memory: "512",
+  motd: `\\u00A7e\\u00A7ka\\u00A7l\\u00A7aMine\\u00A76Cluster\\u00A7r\\u00A78\\u00A7b\\u00A7ka`,
+};
+
+export default function Create() {
+  const [wl, setWl] = useState([]);
+  const [ops, setOps] = useState([]);
+  const [spec, setSpec] = useState(defaultServer);
+  const nav = useNavigate();
+  const versionList = useVersionList();
+  const [versions, setVersions] = useState(["latest"]);
+  const createServer = useCreateServer(spec);
+  const updateSpec = (attr, val) => {
+    const s = { ...spec };
+    s[attr] = val;
+    setSpec(s);
+    console.log(s);
+  };
+
+  useEffect(() => {
+    if (!versionList.data) return;
+    setVersions([
+      "latest",
+      ...versionList.data.versions
+        .filter(({ type: releaseType }) => releaseType === "release")
+        .map(({ id }) => id),
+    ]);
+  }, [versionList.data]);
+
+  const coreUpdate = (attr) => (e) => updateSpec(attr, e.target.value);
+
+  function opsAdd(e) {
+    const opEntry = e.target.innerHTML ?? e.target.value;
+    if (!opEntry) return;
+    const newOps = [...ops, opEntry];
+    setOps(newOps);
+    updateSpec("ops", newOps.join(","));
+  }
+
+  function whitelistAdd(e) {
+    const wlEntry = e.target.value;
+    if (!wlEntry) return;
+    const newWl = [...wl, wlEntry];
+    setWl(newWl);
+    updateSpec("whitelist", newWl.join(","));
+  }
+
+  const opsRemove =
+    (name, { onDelete: updateAutoComplete }) =>
+    (e) => {
+      updateAutoComplete(e);
+      const newOps = [...ops];
+      const entryIndex = newOps.indexOf(name);
+      if (entryIndex === -1) return;
+      newOps.splice(entryIndex, 1);
+      setOps(newOps);
+      updateSpec("ops", newOps.join(","));
+    };
+
+  const whitelistRemove =
+    (name, { onDelete: updateAutocomplete }) =>
+    (e) => {
+      updateAutocomplete(e);
+      const newWl = [...wl];
+      const entryIndex = newWl.indexOf(name);
+      if (entryIndex === -1) return;
+      newWl.splice(entryIndex, 1);
+      setWl(newWl);
+      updateSpec("whitelist", newWl.join(","));
+    };
+
+  async function upsertSpec() {
+    if (validateSpec() !== "validated") return;
+    createServer(spec)
+      .then(() => nav("/"))
+      .catch(alert);
+  }
+
+  function validateSpec() {
+    console.log("TODO CREATE VALIDATION");
+    if (!spec.name) return alertValidationError("Name not included");
+    if (!spec.version) return alertValidationError("Version cannot be blank");
+    if (!spec.host) return alertValidationError("Host cannot be blank");
+    return "validated";
+  }
+
+  function alertValidationError(reason) {
+    alert(`Could not validate spec because: ${reason}`);
+  }
+
+  return (
+    <Box
+      className="create-options"
+      sx={{ width: "100%", maxWidth: "600px", margin: "auto" }}
+    >
+      <FormControl fullWidth sx={{ mt: "2rem", display: "flex", gap: ".5rem" }}>
+        <TextField
+          label="Name"
+          onChange={coreUpdate("name")}
+          helperText="Example: My Survival World"
+          defaultValue={spec.name}
+          FormHelperTextProps={{ sx: { ml: 0 } }}
+          required
+        />
+        <TextField
+          label="Host"
+          onChange={coreUpdate("host")}
+          helperText="Example: host.mc.example.com"
+          FormHelperTextProps={{ sx: { ml: 0 } }}
+          required
+        />
+        <TextField
+          label="Version"
+          onChange={coreUpdate("version")}
+          value={spec.version}
+          select
+          required
+          SelectProps={{ MenuProps: { sx: { maxHeight: "20rem" } } }}
+        >
+          {versions.map((v, k) => (
+            <MenuItem value={v} key={k}>
+              {v}
+            </MenuItem>
+          ))}
+        </TextField>
+        <TextField
+          label="Server Type"
+          onChange={coreUpdate("serverType")}
+          value={spec.serverType}
+          select
+          required
+        >
+          <MenuItem value={"VANILLA"}>Vanilla</MenuItem>
+          <MenuItem value={"FABRIC"}>Fabric</MenuItem>
+          <MenuItem value={"PAPER"}>Paper</MenuItem>
+          <MenuItem value={"SPIGOT"}>Spigot</MenuItem>
+        </TextField>
+        <TextField
+          label="Difficulty"
+          onChange={coreUpdate("difficulty")}
+          value={spec.difficulty}
+          select
+          required
+        >
+          <MenuItem value={"peaceful"}>Peaceful</MenuItem>
+          <MenuItem value={"easy"}>Easy</MenuItem>
+          <MenuItem value={"medium"}>Medium</MenuItem>
+          <MenuItem value={"hard"}>Hard</MenuItem>
+        </TextField>
+
+        <Autocomplete
+          multiple
+          id="whitelist-autocomplete"
+          options={[]}
+          onChange={whitelistAdd}
+          freeSolo
+          renderInput={(p) => <TextField {...p} label="Whitelist" />}
+          renderTags={(value, getTagProps) =>
+            value.map((option, index) => {
+              const defaultChipProps = getTagProps({ index });
+              return (
+                <Chip
+                  label={option}
+                  {...defaultChipProps}
+                  onDelete={whitelistRemove(option, defaultChipProps)}
+                />
+              );
+            })
+          }
+        />
+        <Autocomplete
+          filterSelectedOptions={true}
+          multiple
+          id="ops-autocomplete"
+          options={wl}
+          onChange={opsAdd}
+          renderInput={(p) => <TextField {...p} label="Ops" />}
+          renderTags={(value, getTagProps) =>
+            value.map((option, index) => {
+              const defaultChipProps = getTagProps({ index });
+              return (
+                <Chip
+                  label={option}
+                  {...defaultChipProps}
+                  onDelete={opsRemove(option, defaultChipProps)}
+                />
+              );
+            })
+          }
+        />
+        {/*<TextField label="Ops" onChange={coreUpdate("ops")} />*/}
+        {/*<TextField label="Icon" onChange={coreUpdate("icon")} required />*/}
+        <TextField
+          label="Max Players"
+          onChange={coreUpdate("maxPlayers")}
+          defaultValue={spec.maxPlayers}
+          required
+        />
+        <TextField
+          label="Gamemode"
+          onChange={coreUpdate("gamemode")}
+          value={spec.gamemode}
+          select
+          required
+        >
+          <MenuItem value={"survival"}>Survival</MenuItem>
+          <MenuItem value={"creative"}>Creative</MenuItem>
+          <MenuItem value={"adventure"}>Adventure</MenuItem>
+          <MenuItem value={"spectator"}>Spectator</MenuItem>
+        </TextField>
+        <TextField label="Seed" onChange={coreUpdate("seed")} />
+        {/*<TextField label="Modpack" onChange={coreUpdate("modpack")} />*/}
+        <TextField
+          label="Memory"
+          onChange={coreUpdate("memory")}
+          defaultValue={spec.memory}
+          required
+        />
+        <TextField
+          label="MOTD"
+          onChange={coreUpdate("motd")}
+          defaultValue={spec.motd}
+          required
+        />
+        <Button onClick={upsertSpec} variant="contained">
+          Create
+        </Button>
+      </FormControl>
+    </Box>
+  );
+}