diff --git a/todo/roles/about.js b/todo/roles/about.js
new file mode 100644
index 0000000..3c86b9a
--- /dev/null
+++ b/todo/roles/about.js
@@ -0,0 +1 @@
+export default function About(props) {}
\ No newline at end of file
diff --git a/todo/roles/failure.js b/todo/roles/failure.js
new file mode 100644
index 0000000..e188b06
--- /dev/null
+++ b/todo/roles/failure.js
@@ -0,0 +1 @@
+export default function Failure(props) {}
\ No newline at end of file
diff --git a/todo/roles/index.js b/todo/roles/index.js
new file mode 100644
index 0000000..f125eee
--- /dev/null
+++ b/todo/roles/index.js
@@ -0,0 +1,93 @@
+import { Component } from 'react';
+import Styles from '../../../styles/nucleus/nucleus.module.css'
+import HCaptcha from 'react-hcaptcha';
+import Axios from 'axios';
+import Router from 'next/router';
+import React from 'react';
+import Header from '../../../Components/Header'
+import Link from 'next/link'
+
+import { AutoLayout, Panel, Title, Subtitle, Text, Divider } from '../../../Components/Panels';
+import { List, ListItem, Code } from '../../../Components/Texttools';
+
+class Verify extends Component {
+    constructor(props) {
+        super(props);
+        this.v = false;
+        this.state = {
+            captchaComplete: false,
+            clicked: false
+        }
+    }
+
+    async handleVerificationSuccess(cls, token) {
+        const chk = await Axios.put('/api/nucleus/verifyTkn', { tkn: token.toString() })
+        if(chk.data.success == true) {
+            this.setState({
+                captchaComplete: true
+            })
+            return cls.v = true;
+        } else {
+            return;
+        }
+    }
+
+    async submitForm(cls) {
+        if ( cls.state.clicked ) {
+            return
+        }
+        cls.setState({
+            clicked: true
+        })
+        if (!cls.v) {
+            return Router.push('/nucleus/verify/failure','/nucleus/verify/failure')
+        }
+        let code = await Axios.post('/api/nucleus/complete', {
+            uid:cls.props.uID,
+            rid:cls.props.rID,
+            gid:cls.props.gID,
+            code:cls.props.code
+        });
+        if (code.status === 200 ) return Router.push('/nucleus/verify/success','/nucleus/verify/success')
+        else return Router.push('/nucleus/verify/failure','/nucleus/verify/failure')
+    }
+
+    render() {
+        return <>
+            <Header
+                name={this.props.guild_name}
+                customImage={this.props.guild_icon_url}
+                roundImage={true}
+                subtext={`${this.props.memberCount} members`}
+                gradient={["F27878", "D96B6B"]}
+                wave="web/waves/header/nucleus"
+                buttons={[]}
+            />
+            <AutoLayout>
+                <Panel>
+                    <Text>Complete the check below to join {this.props.guild_name}</Text>
+                    <div style={{height: "125px"}}>
+                        <HCaptcha
+                            id="Captchas mitigate problems"
+                            sitekey="85074411-fa13-4d9b-b901-53095c6d1fc6"
+                            onVerify={token => this.handleVerificationSuccess(this, token)}
+                            theme={this.theme ? "light" : "dark"}
+                        />
+                    </div>
+                    <button type="button" className={Styles.button + " " + (this.state.captchaComplete ? Styles.buttonComplete : null)} onClick={(success) => this.submitForm(this)}>Proceed</button>
+                    <List colour="F27878">
+                        <ListItem>This is an automatic check performed by Nucleus.</ListItem>
+                        <ListItem>By clicking Proceed, you will be given the <code>{this.props.role_name}</code> role in <code>{this.props.guild_name}</code>.</ListItem>
+                        <ListItem>For the full list of data stored by Nucleus, please check <Link href="https://clicksminuteper.github.io/policies/nucleus#verification">here</Link></ListItem>
+                    </List>
+                    <Text>You can add Nucleus to your server by inviting it <Link href="https://discord.com/api/oauth2/authorize?client_id=715989276382462053&permissions=121295465718&scope=bot%20applications.commands">here</Link>.</Text>
+                    <div id="confetti" />
+                </Panel>
+            </AutoLayout>
+        </>
+    }
+}
+
+export default Verify;
+export async function getServerSideProps(ctx) {
+}
\ No newline at end of file
diff --git a/todo/roles/success.js b/todo/roles/success.js
new file mode 100644
index 0000000..f7155ed
--- /dev/null
+++ b/todo/roles/success.js
@@ -0,0 +1 @@
+export default function Success(props) {}
\ No newline at end of file