diff --git a/client/components/panels/ban-user.jsx b/client/components/panels/ban-user.jsx
index 6371d3b..38dbe1b 100644
--- a/client/components/panels/ban-user.jsx
+++ b/client/components/panels/ban-user.jsx
@@ -1,9 +1,65 @@
-import React from 'react';
+import React, { useRef, useContext } from 'react';
+
+import { TokenContext } from '../utilities/token-provider';
 
 const BanUser = props => {
+	//context
+	const authTokens = useContext(TokenContext);
+
+	//ref
+	const usernameRef = useRef();
+
 	return (
-		<></>
+		<div>
+			<h2 className='centered'>Permanently Ban User</h2>
+			<form>
+				<div>
+					<label htmlFor='username'>Username:</label>
+					<input type='text' name='username' ref={usernameRef} />
+				</div>
+
+				<button type='button' onClick={async evt => {
+					evt.preventDefault();
+					const yes = confirm('Permanently ban this user from the website?');
+
+					if (!yes) {
+						return;
+					}
+
+					const [err, result] = await handleButtonPress(usernameRef.current.value, authTokens.tokenFetch);
+
+					if (err) {
+						alert(err);
+					}
+
+					if (result) {
+						usernameRef.current.value = '';
+					}
+				}}>Submit</button>
+			</form>
+		</div>
 	);
 };
 
-export default BanUser;
\ No newline at end of file
+const handleButtonPress = async (username, tokenFetch) => {
+	const result = await tokenFetch(`${process.env.AUTH_URI}/admin/banuser`, {
+		method: 'POST',
+		headers: {
+			'Content-Type': 'application/json',
+			'Access-Control-Allow-Origin': '*'
+		},
+		body: JSON.stringify({
+			username
+		})
+	});
+
+	if (!result.ok) {
+		const err = `${result.status}: ${await result.text()}`;
+		console.log(err);
+		return [err, false];
+	}
+
+	return [null, true];
+};
+
+export default BanUser;