diff --git a/config.go b/config.go
index 04531e6..cf05cb0 100644
--- a/config.go
+++ b/config.go
@@ -93,18 +93,18 @@ func (cfg *ServerConfig) GetUserConfig(user string) *UserConfig {
 }
 
 // NewClientConfig initiates a new client, returning a reference to the new config
-func NewClientConfig(ip net.IP) *ClientConfig {
+func NewClientConfig(ip net.IP, Name, Notes string) *ClientConfig {
 	key, err := wgtypes.GeneratePrivateKey()
 	if err != nil {
 		log.Fatal(err)
 	}
 
 	cfg := ClientConfig{
-		Name:       "Unnamed Client",
+		Name:       Name,
 		PrivateKey: key.String(),
 		PublicKey:  key.PublicKey().String(),
 		IP:         ip,
-		Notes:      "",
+		Notes:      Notes,
 		Created:    time.Now().Format(time.RFC3339),
 		Modified:   time.Now().Format(time.RFC3339),
 	}
diff --git a/server.go b/server.go
index 2625e1d..fe2c5ee 100644
--- a/server.go
+++ b/server.go
@@ -603,18 +603,31 @@ func (s *Server) CreateClient(w http.ResponseWriter, r *http.Request, ps httprou
 				Error: "Max number of configs: " + strconv.Itoa(*maxNumberClientConfig),
 			}
 
-			j, err := json.Marshal(e)
+			w.WriteHeader(http.StatusBadRequest)
+			err := json.NewEncoder(w).Encode(e)
 			if err != nil {
 				log.Error(err)
+				w.WriteHeader(http.StatusInternalServerError)
 				return
 			}
-
-			w.WriteHeader(http.StatusBadRequest)
-			fmt.Fprintf(w, string(j))
 			return
 		}
 	}
 
+	decoder := json.NewDecoder(r.Body)
+	client := &ClientConfig{}
+	err := decoder.Decode(&client)
+	if err != nil {
+		log.Warn("Error parsing request: ", err)
+		w.WriteHeader(http.StatusBadRequest)
+		return
+	}
+
+	if client.Name == "" {
+		log.Debugf("No clientName:using default: \"Unnamed Client\"")
+		client.Name = "Unnamed Client"
+	}
+
 	i := 0
 	for k := range c.Clients {
 		n, err := strconv.Atoi(k)
@@ -630,12 +643,12 @@ func (s *Server) CreateClient(w http.ResponseWriter, r *http.Request, ps httprou
 	i = i + 1
 
 	ip := s.allocateIP()
-	client := NewClientConfig(ip)
+	client = NewClientConfig(ip, client.Name, client.Notes)
 	c.Clients[strconv.Itoa(i)] = client
 
 	s.reconfigure()
 
-	err := json.NewEncoder(w).Encode(client)
+	err = json.NewEncoder(w).Encode(client)
 	if err != nil {
 		log.Error(err)
 		w.WriteHeader(http.StatusInternalServerError)
diff --git a/ui/src/App.svelte b/ui/src/App.svelte
index fcd156f..2998ba3 100644
--- a/ui/src/App.svelte
+++ b/ui/src/App.svelte
@@ -9,6 +9,7 @@
   import Clients from "./Clients.svelte";
   import EditClient from "./EditClient.svelte";
   import Nav from "./Nav.svelte";
+  import NewClient from "./NewClient.svelte";
 
   import Cookie from "cookie-universal";
   const cookies = Cookie();
@@ -42,6 +43,7 @@ footer {
     <main role="main" class="container">
       <div>
         <Route path="client/:clientId" component="{EditClient}" />
+        <Route path="newclient/" component="{NewClient}" />
         <Route path="about" component="{About}" />
         <Route path="/"><Clients user="{user}" /></Route>
       </div>
diff --git a/ui/src/Clients.svelte b/ui/src/Clients.svelte
index f4dcc1a..5eeee74 100644
--- a/ui/src/Clients.svelte
+++ b/ui/src/Clients.svelte
@@ -1,7 +1,8 @@
 <script>
   import Fab, {Label, Icon} from '@smui/fab';
   import { onMount } from 'svelte';
-	import Client from './Client.svelte';
+  import Client from './Client.svelte';
+  import { link,navigate } from "svelte-routing";
 
   export let user;
 
@@ -14,22 +15,9 @@
     console.log("Fetched clients", clients);
   }
 
-  async function handleNewClick(event) {
-    const res = await fetch(clientsUrl, {
-      method: "POST",
-    })
-      .then(response => {
-        return response.json()
-    })
-    .then(data => {
-      if (typeof data.Error != "undefined") {
-          console.log(data.Error);
-          alert(data.Error);
-    } else {
-        console.log("New client added", data);
-    }
-  });
-    await getClients();
+
+  function onCreateNewClient() {
+    navigate("/newclient", { replace: true });
   }
 
 
@@ -97,7 +85,7 @@ padding: 0;
       {/each}
 
       <div class="newClient">
-        <Fab color="primary" on:click={handleNewClick}><Icon class="material-icons">add</Icon></Fab>
+        <Fab color="primary" on:click={onCreateNewClient}><Icon class="material-icons">add</Icon></Fab>
       </div>
 
 
diff --git a/ui/src/NewClient.svelte b/ui/src/NewClient.svelte
new file mode 100644
index 0000000..81f48a8
--- /dev/null
+++ b/ui/src/NewClient.svelte
@@ -0,0 +1,85 @@
+<script>
+  import Fab, {Label, Icon} from '@smui/fab';
+  import Dialog, {Actions, InitialFocus} from '@smui/dialog';
+  import Textfield, {Input, Textarea} from '@smui/textfield';
+  import HelperText from '@smui/textfield/helper-text/index';
+  import Button, {Group, GroupItem} from '@smui/button';
+  import Paper, {Title, Subtitle, Content} from '@smui/paper';
+
+  import Cookie from "cookie-universal";
+  import { onMount } from 'svelte';
+  import { link, navigate } from "svelte-routing";
+
+  const user = Cookie().get("wguser", { fromRes: true});
+
+  let clientsUrl = "/api/v1/users/" + user + "/clients";
+
+  let client = {};
+  let clientName = "";
+  let clientNotes = "";
+  let deleteDialog;
+
+  async function handleSubmit(event) {
+    client.Name = clientName;
+    client.Notes = clientNotes;
+    const res = await fetch(clientsUrl, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(client),
+    })
+      .then(response => {
+        return response.json();
+    })
+    .then(data => {
+      if (typeof data.Error != "undefined") {
+          console.log(data.Error);
+          alert(data.Error);
+      } else {
+        console.log("New client added", data);
+      }
+    });
+    navigate("/", { replace: true });
+  };
+
+
+  function handleBackClick(event) {
+    navigate("/", { replace: true });
+  }
+
+</script>
+
+<style>
+  .back {
+    position: fixed;
+    left: 10px;
+    top: 70px;
+  }
+</style>
+
+<div class="back">
+<Fab color="primary" on:click={handleBackClick}><Icon class="material-icons">arrow_back</Icon></Fab>
+</div>
+
+<h3 class="mdc-typography--headline3"><small>Create New Device Configuration</small></h3>
+
+<div class="container">
+
+
+  <form on:submit|preventDefault={handleSubmit}>
+
+    <div class="margins">
+      <Textfield input$id="name" bind:value={clientName} variant="outlined" label="Client Name" input$aria-controls="client-name" input$aria-describedby="client-name-help" />
+      <HelperText id="client-name-help">Friendly name of client / device</HelperText>
+    </div>
+
+    <div class="margins">
+      <Textfield input$id="notes" fullwidth textarea bind:value={clientNotes} label="Label" input$aria-controls="client-notes" input$aria-describedby="client-notes-help" />
+      <HelperText id="client-notes-help">Notes about the client.</HelperText>
+    </div>
+
+    <Button variant="raised"><Label>Create</Label></Button>
+  </form>
+</div>
+