diff --git a/.gitignore b/.gitignore
index fd3dbb5..4fc911e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -34,3 +34,4 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+app/test/*
diff --git a/app/components/form.tsx b/app/components/form.tsx
index 71457a0..bf5a932 100644
--- a/app/components/form.tsx
+++ b/app/components/form.tsx
@@ -1,10 +1,10 @@
 'use client';
 import { useState } from "react";
 
-const Form = <T,>({ initialData, onSubmit }) => {
+const Form = <T,>({ initialData, submitFunction }) => {
   const [formData, setFormData] = useState( initialData );
 
-  const handleSubmit = (event) => {
+  const handleSubmit = async (event) => {
     event.preventDefault();
 
     //q = formData;
@@ -13,7 +13,7 @@ const Form = <T,>({ initialData, onSubmit }) => {
 
     //console.log( `Adding question ${JSON.stringify(q)}` );
 
-    onSubmit( formData );
+    await submitFunction( formData );
   }
 
   const handleChange = (event) => {
@@ -27,13 +27,13 @@ const Form = <T,>({ initialData, onSubmit }) => {
   return ( 
     <form onSubmit={handleSubmit} className="flex">
       <div>
-        {Object.entries( initialData ).map( (key, val) => {
+        {Object.entries( initialData ).map( (elem) => {
           return(
             <input
-              type = { typeof( val ) == typeof( 0 ) ? "number" : "text" /* pretty hacky, we should change this */ } 
-              id = {key[0]}
-              name = {key[0]}
-              value = {formData[key[0]]}
+              type = { typeof( elem[1] ) == typeof( 0 ) ? "number" : "text" /* pretty hacky, we should change this */ } 
+              id = {elem[0]}
+              name = {elem[0]}
+              value = {formData[elem[0]]}
               onChange = {handleChange}
               required
             />)})}
diff --git a/app/components/logo.tsx b/app/components/logo.tsx
new file mode 100644
index 0000000..c3469ed
--- /dev/null
+++ b/app/components/logo.tsx
@@ -0,0 +1,11 @@
+const Logo = () => {
+  return (
+    <div style={{ display:"flex", alignItems: 'center', justifyContent: 'center'}}>
+      <a href="/">
+        <img src="/logo-no-background.png" height="auto" width="40%"/>
+      </a>
+    </div>
+  )
+}
+
+export default Logo;
\ No newline at end of file
diff --git a/app/components/topic_card.tsx b/app/components/topic_card.tsx
index 112a3fa..e7bc881 100644
--- a/app/components/topic_card.tsx
+++ b/app/components/topic_card.tsx
@@ -1,7 +1,6 @@
-
 const TopicCard = ({ title, children, link }) => {
   return(
-    <div className="mx-auto mt-16 max-w-2xl rounded-3xl sm:mt-20 lg:mx-0 lg:flex lg:max-w-none relative isolate overflow-hidden bg-gray-900 px-6 pt-16 shadow-2xl sm:rounded-3xl sm:px-16 md:pt-24 lg:flex lg:gap-x-20 lg:px-24 lg:pt-0">
+    <div className="mx-auto mt-16 max-w-2xl rounded-3xl sm:mt-20 lg:mx-0 lg:flex lg:max-w-none relative isolate overflow-hidden bg-gray-900 px-6 pt-16 shadow-2xl sm:rounded-3xl sm:px-16 md:pt-24 lg:flex lg:gap-x-20 lg:px-24 lg:pt-0" style={{marginTop: '20px', paddingTop: '0px', paddingBottom: '24px'}}>
     <svg
         viewBox="0 0 1024 1024"
         className="absolute left-1/2 top-1/2 -z-10 h-[64rem] w-[64rem] -translate-y-1/2 [mask-image:radial-gradient(closest-side,white,transparent)] sm:left-full sm:-ml-80 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2 lg:translate-y-0"
@@ -21,24 +20,16 @@ const TopicCard = ({ title, children, link }) => {
           {children} 
         </p>
       </div>
-      <div className="-mt-2 p-2 lg:mt-0 lg:w-full lg:max-w-md lg:flex-shrink-0">
-        <div className="rounded-2xl bg-gray-50 py-10 text-center ring-1 ring-inset ring-gray-900/5 lg:flex lg:flex-col lg:justify-center lg:py-16">
-          <div className="mx-auto max-w-xs px-8">
-            <p className="mt-6 flex items-baseline justify-center gap-x-2">
-              <span className="text-5xl font-bold tracking-tight text-gray-900">Start</span>
-              <span className="text-sm font-semibold leading-6 tracking-wide text-gray-900">now!</span>
-            </p>
+      <div className="-mt-2 p-2 lg:mt-0 lg:w-full lg:max-w-md lg:flex-shrink-0 lg:flex lg:flex-col lg:justify-center">
             <a
               href={link}
-              className="mt-10 block w-full rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+              className="mt-10 block w-full rounded-md bg-blue-500 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
             >
               Begin
             </a>
-          </div>
-        </div>
       </div>
     </div>
   )
 }
 
-export default TopicCard;
\ No newline at end of file
+export default TopicCard;
diff --git a/app/sessionconfig/page.tsx b/app/sessionconfig/page.tsx
index 8d5d004..6e29fc9 100644
--- a/app/sessionconfig/page.tsx
+++ b/app/sessionconfig/page.tsx
@@ -1,5 +1,6 @@
 import { CheckIcon } from '@heroicons/react/20/solid'
 import TopicCard from '../components/topic_card'
+import Logo from '../components/logo';
 
 const includedFeatures = [
   'Private forum access',
@@ -13,26 +14,12 @@ export default function Example() {
     const cards = [
       ["Learn cybersecurity", "Learning cybersecurity is like becoming a guardian of the digital realm.\nIt's about mastering the art of protecting information, systems, and networks from cyber threats.\nFrom understanding encryption algorithms to detecting malware, every lesson equips you with tools to fortify against cyber-attacks.", "/learn/cybersec" ],
       ["Learn geography", "It's cool ig", "/learn/geography"],
-      ["Learn C++", "Don't.", "/learn/cpp"],
-      ["Learn C", "Do.", "/learn/c"]
+      ["Learn C++", "Don't.", "/learn/cpp"]
     ];
   return (
     
-    <div className="sm:py-32">
-        <div
-          className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
-          aria-hidden="true"
-        >
-          <div
-            className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
-            style={{
-              clipPath:
-                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
-            }}
-          />
-        </div>
-      <div style={{ display:"flex", alignItems: 'center', justifyContent: 'center', paddingTop:'40px'}}><img className="flex" src="/logo-no-background.png" height="auto" width="40%" style={{ alignSelf: 'center'}}></img></div>
-<div style={{ display:"flex", alignItems: 'center', justifyContent: 'center'}}><a href="/"><img src="/logo-no-background.png" height="auto" width="40%"/></a></div>
+    <div className="bg-black py-24 sm:py-32" style = {{ alignItems: 'center', justifyContent: 'center' }}>
+      <Logo/>
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         { cards.map((elem) => {
           return (<TopicCard title={elem[0]} link={elem[2]}>{elem[1]}</TopicCard>)
@@ -55,18 +42,6 @@ export default function Example() {
         </TopicCard>
   */}
       </div>
-      <div
-          className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
-          aria-hidden="true"
-        >
-          <div
-            className="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
-            style={{
-              clipPath:
-                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
-            }}
-          />
-        </div>
     </div>
   )
 }