diff --git a/src/app/components/token_form.tsx b/src/app/components/token_form.tsx
new file mode 100644
index 0000000..49b6632
--- /dev/null
+++ b/src/app/components/token_form.tsx
@@ -0,0 +1,26 @@
+"use client"
+import {Raleway} from "next/font/google";
+import React from "react";
+import { useFormState } from "react-dom";
+import {Message} from "@/app/page";
+
+const raleway_button = Raleway({subsets: ["latin"], weight: "600"});
+
+export function TokenForm(props: {call: (_prevState: Message, data: FormData) => Promise<Message>}) {
+
+    const [state, formAction] = useFormState(props.call, {message: ""} as Message);
+
+    return <form action={formAction} className="flex flex-col mx-auto justify-center gap-2">
+        <label>Enter your Canvas token below:</label>
+        <input required name="canvas" className="border-2 border-white bg-black rounded"/>
+        <button className="bg-white mx-auto text-black py-1 px-4 rounded">
+            <div className={raleway_button.className}>
+                Submit
+            </div>
+        </button>
+        {
+            state.message &&
+            <div className="text-red-600 text-center">{state.message}</div>
+        }
+    </form>
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 3ac75a3..650f121 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,10 +1,22 @@
 import {Raleway} from "next/font/google";
+import {TokenForm} from "@/app/components/token_form";
 
 const raleway = Raleway({subsets: ["latin"]});
 const raleway_heavy = Raleway({subsets: ["latin"], weight: "700"});
-const raleway_button = Raleway({subsets: ["latin"], weight: "600"});
 
-export default function Home() {
+export interface Message {
+    message: string;
+}
+
+export default async function Home() {
+    async function call(_prevState: Message, data: FormData): Promise<Message> {
+        "use server"
+        console.log(data.get("canvas"));
+        return {
+            message: "Hello"
+        }
+    }
+
   return (
     <main className={raleway.className + " flex flex-col w-full h-[100vh]"}>
         <div className="d-flex w-100 p-5 text-3xl text-center flex-shrink">
@@ -13,15 +25,7 @@ export default function Home() {
             </h1>
         </div>
         <div className="flex flex-col mx-auto flex-grow justify-center">
-            <form className="flex flex-col mx-auto justify-center gap-2">
-                <label>Enter your Canvas token below:</label>
-                <input className="border-2 border-white bg-black rounded"/>
-                <button className="bg-white mx-auto text-black py-1 px-4 rounded">
-                    <div className={raleway_button.className}>
-                        Submit
-                    </div>
-                </button>
-            </form>
+            <TokenForm call={call}/>
     </div>
     </main>
   );
diff --git a/src/config.ts b/src/config.ts
new file mode 100644
index 0000000..ec7400f
--- /dev/null
+++ b/src/config.ts
@@ -0,0 +1,11 @@
+export class Config {
+    private canvas_url: string;
+
+    constructor() {
+        this.canvas_url = "https://gatech.instructure.com/api/v1/courses";
+    }
+
+    public getCanvasUrl() {
+        return this.canvas_url;
+    }
+}
\ No newline at end of file