diff --git a/components/Messages.tsx b/components/Messages.tsx
index 3dfcc3c..c275f3a 100644
--- a/components/Messages.tsx
+++ b/components/Messages.tsx
@@ -1,25 +1,38 @@
-import { useMemo, useState } from "react"
+import { useMemo, useState, useRef } from "react"
 import { mimcHash } from "utils/mimc"
 import { Menu, Transition } from "@headlessui/react"
 import UserIcon from "./UserIcon"
 
-export default function Messages({ messages }) {
+export default function Messages({ secret, messages, handleSend }) {
+	const messageRef = useRef()
+
 	return (
 		<>
 			<div className="pt-1 pb-6">
-				<div className="flex">
+				<form
+					className="flex"
+					onSubmit={(e) => {
+						e.preventDefault()
+						handleSend(messageRef.current.value)
+						messageRef.current.value = ""
+					}}
+				>
 					<input
+						disabled={!secret}
 						type="text"
-						className="rounded-xl px-4 py-3 mr-3 flex-1 !font-monospace outline-none"
-						placeholder="Type your message here"
+						ref={messageRef}
+						className="rounded-xl px-4 py-3 mr-3 flex-1 !font-monospace outline-none bg-white placeholder-light"
+						placeholder={secret ? "Type your message here" : "Log in to post"}
 					/>
 					<input
-						className="cursor-pointer hover:bg-midpink bg-pink text-white rounded-xl px-4 py-2"
-						type="button"
+						disabled={!secret}
+						className={`cursor-pointer text-white rounded-xl px-4 py-2 ${
+							secret ? "bg-pink hover:bg-midpink" : "bg-gray-200"
+						}`}
+						type="submit"
 						value="Send"
-						onClick={() => null /* prove, then send to server */}
 					/>
-				</div>
+				</form>
 			</div>
 			{messages.map((message, index) => (
 				<div
diff --git a/pages/backup.tsx b/pages/backup.tsx
index 722d435..d665738 100644
--- a/pages/backup.tsx
+++ b/pages/backup.tsx
@@ -36,7 +36,7 @@ export default function BackupPage(props: {}) {
 		<div className="max-w-lg m-auto font-mono">
 			<Header />
 			<div className="border border-gray-300 rounded-xl p-6">
-				<div>This is your ZK CHAT secret token. Save it somewhere safe:</div>
+				<div>This is your ZK CHAT login token. Keep it secret and save it somewhere safe:</div>
 				<textarea
 					className="block w-full outline-none py-5 px-6 my-6 resize-none text-gray-800"
 					rows={3}
diff --git a/pages/index.tsx b/pages/index.tsx
index de51348..78c5625 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -17,6 +17,46 @@ interface IndexPageProps {
 	userCount: number
 }
 
+const users = [
+	{
+		handle: "zero",
+		hash: "2b68833d258d2439328267662b1b2e0a3415ee3d70125bd5a28bf8d9020b8144",
+	},
+	{
+		handle: "one",
+		hash: "155c1ffe0caa4c8fa68bb34c4a7c8d6246bc87489993709231a3557fda128c4b",
+	},
+	{
+		handle: "two",
+		hash: "2edf7af3393ac06294c2b9e5bba4362048a48ef55cfaa64f6f4489d4ecc37cb5",
+	},
+]
+
+const messages = [
+	{
+		message: "Hello world!",
+		proof: "",
+		group: ["0", "1", "2"],
+		reveals: [],
+		denials: [],
+	},
+	{
+		message:
+			"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempo",
+		proof: "",
+		group: ["0", "1", "2"],
+		reveals: ["0"],
+		denials: ["1", "2"],
+	},
+	{
+		message: "Random message",
+		proof: "",
+		group: ["0", "1", "2"],
+		reveals: [],
+		denials: [],
+	},
+]
+
 export const getServerSideProps: GetServerSideProps<IndexPageProps, {}> =
 	async (context) => {
 		const userCount = await prisma.user.count()
@@ -25,29 +65,32 @@ export const getServerSideProps: GetServerSideProps<IndexPageProps, {}> =
 		}
 	}
 
-function Users({ users }) {
+function Users({ secret, users, handleUpdateSelectedUsers }) {
 	const [selectedUsers, setSelectedUsers] = useState([])
 
 	return (
 		<>
 			{users.map((u) => (
-				<div className="block mb-1 flex">
-					<label for={u.hash} className="flex-1 flex py-0.5">
+				<div key={u.hash} className="block mb-1 flex">
+					<label htmlFor={u.hash} className="flex-1 flex py-0.5">
 						<UserIcon address={u.handle} />
 						<div className="flex-1 ml-2 pt-0.5">{u.handle}</div>
 					</label>
-					<input
-						className="mt-2.5"
-						type="checkbox"
-						id={u.hash}
-						onChange={() => {
-							if (selectedUsers.indexOf(u.hash) === -1) {
-								setSelectedUsers(selectedUsers.concat(u.hash))
-							} else {
-								setSelectedUsers(selectedUsers.filter((h) => h !== u.hash))
-							}
-						}}
-					/>
+					{secret && (
+						<input
+							className="mt-2.5"
+							type="checkbox"
+							id={u.hash}
+							onChange={() => {
+								if (selectedUsers.indexOf(u.hash) === -1) {
+									setSelectedUsers(selectedUsers.concat(u.hash))
+								} else {
+									setSelectedUsers(selectedUsers.filter((h) => h !== u.hash))
+								}
+								handleUpdateSelectedUsers(selectedUsers)
+							}}
+						/>
+					)}
 				</div>
 			))}
 		</>
@@ -55,67 +98,39 @@ function Users({ users }) {
 }
 
 export default function Index(props: IndexPageProps) {
+	const router = useRouter()
+	const [secret, setSecret] = useState()
+	const [selectedUsers, setSelectedUsers] = useState()
+
 	console.log("we have", props.userCount, "users")
 
-	const router = useRouter()
-
-	// useEffect(() => {
-	// 	const secret = localStorage.getItem(LOCAL_STORAGE_SECRET_KEY)
-	// 	if (secret === null) {
-	// 		// user doesn't have a secret key in localstorage
-	// 		router.push("/login")
-	// 	}
-	// }, [])
-
-	const users = [
-		{
-			handle: "zero",
-			hash: "2b68833d258d2439328267662b1b2e0a3415ee3d70125bd5a28bf8d9020b8144",
-		},
-		{
-			handle: "one",
-			hash: "155c1ffe0caa4c8fa68bb34c4a7c8d6246bc87489993709231a3557fda128c4b",
-		},
-		{
-			handle: "two",
-			hash: "2edf7af3393ac06294c2b9e5bba4362048a48ef55cfaa64f6f4489d4ecc37cb5",
-		},
-	]
-
-	const messages = [
-		{
-			message: "Hello world!",
-			proof: "",
-			group: ["0", "1", "2"],
-			reveals: [],
-			denials: [],
-		},
-		{
-			message:
-				"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempo",
-			proof: "",
-			group: ["0", "1", "2"],
-			reveals: ["0"],
-			denials: ["1", "2"],
-		},
-		{
-			message: "Random message",
-			proof: "",
-			group: ["0", "1", "2"],
-			reveals: [],
-			denials: [],
-		},
-	]
+	useEffect(() => {
+		setSecret(localStorage.getItem(LOCAL_STORAGE_SECRET_KEY))
+	}, [])
+	const handleUpdateSelectedUsers = (users) => {
+		setSelectedUsers(users)
+	}
+	const handleSend = (msg) => {
+		console.log(msg)
+	}
 
 	return (
 		<div className="max-w-4xl m-auto font-mono">
 			<Header />
 			<div className="grid grid-cols-4 gap-6 pt-2">
 				<div className="col-span-3">
-					<Messages messages={messages} />
+					<Messages
+						secret={secret}
+						messages={messages}
+						handleSend={handleSend}
+					/>
 				</div>
 				<div className="col-span-1">
-					<Users users={users} />
+					<Users
+						secret={secret}
+						users={users}
+						handleUpdateSelectedUsers={handleUpdateSelectedUsers}
+					/>
 					<NewGroup />
 				</div>
 			</div>
diff --git a/pages/login.tsx b/pages/login.tsx
index 3d623d4..04e6c45 100644
--- a/pages/login.tsx
+++ b/pages/login.tsx
@@ -46,10 +46,10 @@ export default function LoginPage(props: {}) {
 				>
 					Login
 				</button>
-				<div className="mt-8 mb-4">Or sign up to get a new token:</div>
+				<div className="mt-8 mb-4">Or sign up for a new account:</div>
 				<Link href="/backup">
 					<div className="block w-full cursor-pointer bg-pink text-white rounded-xl px-4 py-2 mt-2 mb-1 text-center">
-						Sign up
+						Sign up (generate a new token)
 					</div>
 				</Link>
 			</div>
diff --git a/style.css b/style.css
index 414dea3..dcea898 100644
--- a/style.css
+++ b/style.css
@@ -19,3 +19,7 @@ main fieldset textarea {
 input[type="text"] {
 	width: 100%;
 }
+
+.placeholder-light::placeholder {
+	color: #d0d0d0 !important;
+}