diff --git a/frontend/.vscode/react.code-snippets b/frontend/.vscode/react.code-snippets
new file mode 100644
index 0000000..8c4bdc8
--- /dev/null
+++ b/frontend/.vscode/react.code-snippets
@@ -0,0 +1,51 @@
+{
+	"New Functional Component": {
+		"scope": "typescriptreact",
+		"prefix": "fc",
+		"body": [
+			"type Props = {}",
+			"",
+			"export const $1 = (props: Props) => {",
+			"  return <p>$2</p>",
+			"}"
+		],
+		"description": "React Component w/props"
+	},
+	"New Functional Route Component": {
+		"scope": "typescriptreact",
+		"prefix": "fc-routed",
+		"body": [
+			"import { RouteComponentProps } from 'react-router'",
+			"type Props = RouteComponentProps",
+			"",
+			"export const $1 = ({match}: Props) => {",
+			"  return <p>$2</p>",
+			"}"
+		],
+		"description": "React Routed Component"
+	},
+	"New Page Component": {
+		"scope": "typescriptreact",
+		"prefix": "fc-page",
+		"body": [
+			"export const $1 = () => {",
+			"  return <p>$2</p>",
+			"}"
+		],
+		"description": "React Page Component No Props"
+	},
+	"New Form Component": {
+		"scope": "typescriptreact",
+		"prefix": "fc-form",
+		"body": [
+			"import { Form, Input, Layout } from 'antd'",
+			"",
+			"export const $1 = () => {",
+			"  const [form] = Form.useForm()",
+			"  return <Form form={form}>$2</Form>",
+			"}"
+		],
+		"description": "React Page Component No Props"
+		
+	}
+}
\ No newline at end of file
diff --git a/frontend/src/layout/AppHeader.tsx b/frontend/src/layout/AppHeader.tsx
index 9ecbfb6..d6fa0fa 100644
--- a/frontend/src/layout/AppHeader.tsx
+++ b/frontend/src/layout/AppHeader.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
-import { Avatar, Typography } from 'antd'
+import { Avatar, Button, Typography } from 'antd'
 import { Header } from 'antd/lib/layout/layout'
 import { User } from '../types'
-import { Link } from 'react-router-dom'
+import { Link, useHistory } from 'react-router-dom'
 
 export type NavRoute = {
   path: string
@@ -17,6 +17,7 @@ type Props = {
 }
 
 export const AppHeader = ({ user, routes }: Props) => {
+  const history = useHistory()
   // Unauthed Header
   if (!user)
     return (
@@ -34,9 +35,12 @@ export const AppHeader = ({ user, routes }: Props) => {
           <Link to={route.path}>{route.label}</Link>
         ))}
       </div>
+      <div>
+        <Button onClick={() => history.push('/new/user')}>New User</Button>
+      </div>
       <div className="header-right">
         <Typography.Paragraph>Welcome, {user.username}!!</Typography.Paragraph>
-        <Avatar />
+        <Avatar>{user.username[0]}</Avatar>
       </div>
     </Header>
   )
diff --git a/frontend/src/pages/forms/NewUser.tsx b/frontend/src/pages/forms/NewUser.tsx
new file mode 100644
index 0000000..8cff145
--- /dev/null
+++ b/frontend/src/pages/forms/NewUser.tsx
@@ -0,0 +1,14 @@
+import { Form, Input, Layout } from 'antd'
+import { User } from '../../types'
+
+export const NewUser = () => {
+  const [form] = Form.useForm<User>()
+
+  return (
+    <Form form={form}>
+      <Form.Item label="username" name="name">
+        <Input></Input>
+      </Form.Item>
+    </Form>
+  )
+}
diff --git a/frontend/src/scss/app.scss b/frontend/src/scss/app.scss
index 375df2a..408befb 100644
--- a/frontend/src/scss/app.scss
+++ b/frontend/src/scss/app.scss
@@ -34,3 +34,12 @@
   // background-color: #444;
   // color: white;
 }
+
+.ant-avatar {
+  display: flex;
+
+  * {
+    margin: auto;
+    padding: 0;
+  }
+}