diff --git a/website/src/components/Footer.tsx b/website/src/components/Footer.tsx
index fa3d8c0d..90fca02f 100644
--- a/website/src/components/Footer.tsx
+++ b/website/src/components/Footer.tsx
@@ -1,35 +1,75 @@
 import Image from "next/image";
 import Link from "next/link";
 
+import { FaGithub, FaDiscord } from "react-icons/fa";
 import { Container } from "./Container";
-import { NavLinks } from "./NavLinks";
 
 export function Footer() {
   return (
-    <footer className="border-t border-gray-200">
-      <Container className="">
-        <div className="flex flex-col items-start justify-between gap-y-12 pt-16 pb-6 lg:flex-row lg:items-center lg:py-16">
-          <div>
-            <div className="flex items-center text-gray-900">
+    <footer className="border-t border-gray-200 bg-white">
+      <main>
+        <Container className="">
+          <div className="flex flex-wrap justify-between gap-y-12 py-10 lg:items-center lg:py-16">
+            <div className="flex items-center text-black pr-8">
               <Link href="/" aria-label="Home" className="flex items-center">
-                <Image
-                  src="/images/logos/CHAT-THOUGHT-LOGO.svg"
-                  className="mx-auto object-fill"
-                  width="50"
-                  height="50"
-                  alt="logo"
-                />
+                <Image src="/images/logos/logo.svg" className="mx-auto object-fill" width="52" height="52" alt="logo" />
               </Link>
 
-              <div className="ml-4">
-                <p className="text-base font-semibold">Open Assistant</p>
-                <p className="mt-1 text-sm">Conversational AI for everyone.</p>
+              <div className="ml-2">
+                <p className="text-base font-bold">Open Assistant</p>
+                <p className="text-sm">Conversational AI for everyone.</p>
               </div>
             </div>
-            <nav className="mt-11 flex gap-8">{/* <NavLinks /> */}</nav>
+            <nav className="flex justify-center gap-20">
+              <div className="flex flex-col text-sm leading-7">
+                <b>Information</b>
+                <div className="flex flex-col leading-5">
+                  <Link href="#" aria-label="Our Team" className="hover:underline underline-offset-2">
+                    Our Team
+                  </Link>
+                  <Link href="#join-us" aria-label="Join Us" className="hover:underline underline-offset-2">
+                    Join Us
+                  </Link>
+                </div>
+              </div>
+              <div className="flex flex-col text-sm leading-7">
+                <b>Legal</b>
+                <div className="flex flex-col leading-5">
+                  <Link href="#" aria-label="Privacy Policy" className="hover:underline underline-offset-2">
+                    Privacy Policy
+                  </Link>
+                  <Link href="#" aria-label="Terms of Service" className="hover:underline underline-offset-2">
+                    Terms of Service
+                  </Link>
+                </div>
+              </div>
+              <div className="flex flex-col text-sm leading-7">
+                <b>Connect</b>
+                <div className="flex flex-col leading-5">
+                  <Link
+                    href="https://github.com/LAION-AI/Open-Assistant"
+                    rel="noopener noreferrer nofollow"
+                    target="_blank"
+                    aria-label="Privacy Policy"
+                    className="hover:underline underline-offset-2"
+                  >
+                    Github
+                  </Link>
+                  <Link
+                    href="https://discord.gg/pXtnYk9c"
+                    rel="noopener noreferrer nofollow"
+                    target="_blank"
+                    aria-label="Terms of Service"
+                    className="hover:underline underline-offset-2"
+                  >
+                    Discord
+                  </Link>
+                </div>
+              </div>
+            </nav>
           </div>
-        </div>
-      </Container>
+        </Container>
+      </main>
     </footer>
   );
 }
diff --git a/website/src/components/Header.tsx b/website/src/components/Header.tsx
index c47982a1..9913124a 100644
--- a/website/src/components/Header.tsx
+++ b/website/src/components/Header.tsx
@@ -6,7 +6,7 @@ import Link from "next/link";
 import { signOut, useSession } from "next-auth/react";
 import { FaUser, FaSignOutAlt } from "react-icons/fa";
 
-import { Avatar } from "./Avatar";
+import { UserMenu } from "./UserMenu";
 import { Container } from "./Container";
 import { NavLinks } from "./NavLinks";
 
@@ -45,9 +45,9 @@ function AccountButton() {
     return;
   }
   return (
-    <Link href="/auth/signup" aria-label="Home" className="flex items-center">
+    <Link href="/auth/signin" aria-label="Home" className="flex items-center">
       <Button variant="outline" leftIcon={<FaUser />}>
-        Log in
+        Sign in
       </Button>
     </Link>
   );
@@ -113,7 +113,7 @@ export function Header() {
               )}
             </Popover>
             <AccountButton />
-            <Avatar />
+            <UserMenu />
           </div>
         </Container>
       </nav>
diff --git a/website/src/components/Avatar.tsx b/website/src/components/UserMenu.tsx
similarity index 92%
rename from website/src/components/Avatar.tsx
rename to website/src/components/UserMenu.tsx
index 26bdec0b..e3b0d819 100644
--- a/website/src/components/Avatar.tsx
+++ b/website/src/components/UserMenu.tsx
@@ -5,7 +5,7 @@ import { Popover } from "@headlessui/react";
 import { AnimatePresence, motion } from "framer-motion";
 import { FaCog, FaSignOutAlt, FaGithub } from "react-icons/fa";
 
-export function Avatar() {
+export function UserMenu() {
   const { data: session } = useSession();
 
   if (!session) {
@@ -16,7 +16,7 @@ export function Avatar() {
     const accountOptions = [
       {
         name: "Account Settings",
-        href: "#",
+        href: "/account",
         desc: "Account Settings",
         icon: FaCog,
         //For future use
@@ -35,8 +35,7 @@ export function Avatar() {
                   height="40"
                   className="rounded-full"
                 ></Image>
-                <p className="hidden lg:flex">{email}</p>
-                {/* Will be changed to username once it is implemented */}
+                <p className="hidden lg:flex">{session.user.name || session.user.email}</p>
               </div>
             </Popover.Button>
             <AnimatePresence initial={false}>
@@ -72,7 +71,7 @@ export function Avatar() {
                       ))}
                       <a
                         className="flex items-center rounded-md hover:bg-gray-100 cursor-pointer"
-                        onClick={() => signOut()}
+                        onClick={() => signOut({ callbackUrl: "/" })}
                       >
                         <div className="p-4">
                           <FaSignOutAlt />
@@ -93,4 +92,4 @@ export function Avatar() {
   }
 }
 
-export default Avatar;
+export default UserMenu;
diff --git a/website/src/middleware.ts b/website/src/middleware.ts
index b383586b..fdaa071c 100644
--- a/website/src/middleware.ts
+++ b/website/src/middleware.ts
@@ -4,5 +4,5 @@ export { default } from "next-auth/middleware";
  * Guards all pages under `/grading` and redirects them to the sign in page.
  */
 export const config = {
-  matcher: ["/grading/:path*"],
+  matcher: ["/grading/:path*", "/account/:path*", "/summarize/:path*"],
 };
diff --git a/website/src/pages/404.tsx b/website/src/pages/404.tsx
index 0b7a5c9b..32fb60a8 100644
--- a/website/src/pages/404.tsx
+++ b/website/src/pages/404.tsx
@@ -5,39 +5,15 @@ import Head from "next/head";
 import Link from "next/link";
 
 export default function Error() {
-  const { data: session } = useSession();
-
-  if (!session) {
-    return (
-      <>
-        <Head>
-          <title>Open Assistant</title>
-          <meta name="404" content="Sorry, this page doesn't exist." />
-        </Head>
-        <Header />
-        <main className="flex h-3/4 items-center justify-center overflow-hidden subpixel-antialiased text-xl">
-          {"Sorry, the page you're looking for does not exist."}
-        </main>
-        <Footer />
-      </>
-    );
-  }
   return (
     <>
       <Head>
-        <title>Open Assistant</title>
-        <meta
-          name="description"
-          content="Conversational AI for everyone. An open source project to create a chat enabled GPT LLM run by LAION and contributors around the world."
-        />
+        <title>404 - Open Assistant</title>
+        <meta name="404" content="Sorry, this page doesn't exist." />
       </Head>
       <Header />
-      <main>
-        <h2>Open Chat Gpt</h2>
-
-        <p>You are logged in</p>
-
-        <Link href="/grading/grade-output">~Rate a prompt and output now~</Link>
+      <main className="flex h-3/4 items-center justify-center overflow-hidden subpixel-antialiased text-xl">
+        "Sorry, the page you're looking for does not exist."
       </main>
       <Footer />
     </>
diff --git a/website/src/pages/_app.tsx b/website/src/pages/_app.tsx
index 18e3315f..c4463d00 100644
--- a/website/src/pages/_app.tsx
+++ b/website/src/pages/_app.tsx
@@ -30,7 +30,7 @@ const theme = extendTheme({
 function MyApp({ Component, pageProps: { session, ...pageProps } }) {
   return (
     <ChakraProvider theme={theme}>
-      <SessionProvider session={session}>
+      <SessionProvider session={pageProps.session}>
         <Component {...pageProps} />
       </SessionProvider>
     </ChakraProvider>
diff --git a/website/src/pages/account/edit.tsx b/website/src/pages/account/edit.tsx
new file mode 100644
index 00000000..3ed83d82
--- /dev/null
+++ b/website/src/pages/account/edit.tsx
@@ -0,0 +1,64 @@
+import Head from "next/head";
+import Link from "next/link";
+import Router from "next/router";
+import React, { useState } from "react";
+import { getSession, useSession } from "next-auth/react";
+import { PrismaClient, User } from "@prisma/client";
+import { Button, Input, InputGroup, Stack } from "@chakra-ui/react";
+import { Footer } from "../../components/Footer";
+import { Header } from "../../components/Header";
+
+import styles from "../styles/Home.module.css";
+
+export default function Account() {
+  const { data: session } = useSession();
+  const [username, setUsername] = useState("");
+  const updateUser = async (e: React.SyntheticEvent) => {
+    e.preventDefault();
+    try {
+      const body = { username };
+      await fetch("../api/username", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body),
+      });
+      await Router.push("/account");
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  if (!session) {
+    return;
+  }
+  return (
+    <>
+      <Head>
+        <title>Open Assistant</title>
+        <meta
+          name="description"
+          content="Conversational AI for everyone. An open source project to create a chat enabled GPT LLM run by LAION and contributors around the world."
+        />
+      </Head>
+      <Header />
+      <main className="h-3/4 z-0 bg-white flex flex-col items-center justify-center">
+        <p>{session.user.name || "No username"}</p>
+        <form onSubmit={updateUser}>
+          <InputGroup>
+            <Input
+              onChange={(e) => setUsername(e.target.value)}
+              placeholder="Edit Username"
+              type="text"
+              value={username}
+            ></Input>
+            <Button disabled={!username} type="submit" value="Change">
+              Submit
+            </Button>
+          </InputGroup>
+        </form>
+        <p>{session.user.email}</p>
+      </main>
+      <Footer />
+    </>
+  );
+}
diff --git a/website/src/pages/account/index.tsx b/website/src/pages/account/index.tsx
new file mode 100644
index 00000000..276236bc
--- /dev/null
+++ b/website/src/pages/account/index.tsx
@@ -0,0 +1,52 @@
+import Head from "next/head";
+import Link from "next/link";
+import Router from "next/router";
+import React, { useEffect, useState } from "react";
+import { getSession, useSession } from "next-auth/react";
+import { Button, Input, InputGroup, Stack } from "@chakra-ui/react";
+import { Footer } from "../../components/Footer";
+import { Header } from "../../components/Header";
+
+import styles from "../styles/Home.module.css";
+import { getSystemErrorName } from "util";
+
+export default function Account() {
+  const { data: session } = useSession();
+  const [username, setUsername] = useState("null");
+
+  const handleUpdate = async () => {
+    const response = await fetch("../api/update", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ username }),
+    });
+    const { name } = await response.json();
+    setUsername(name);
+  };
+
+  if (!session) {
+    return;
+  }
+  return (
+    <>
+      <Head>
+        <title>Open Assistant</title>
+        <meta
+          name="description"
+          content="Conversational AI for everyone. An open source project to create a chat enabled GPT LLM run by LAION and contributors around the world."
+        />
+      </Head>
+      <Header />
+      <main className="h-3/4 z-0 bg-white flex flex-col items-center justify-center">
+        <p>{username}</p>
+        <Button>
+          <Link href="/account/edit">Edit Username</Link>
+        </Button>
+        <p>{session.user.email}</p>
+      </main>
+      <Footer />
+    </>
+  );
+}
diff --git a/website/src/pages/api/auth/[...nextauth].ts b/website/src/pages/api/auth/[...nextauth].ts
index f823ed41..a4e23275 100644
--- a/website/src/pages/api/auth/[...nextauth].ts
+++ b/website/src/pages/api/auth/[...nextauth].ts
@@ -1,5 +1,6 @@
 import type { AuthOptions } from "next-auth";
 import NextAuth from "next-auth";
+import { NextApiHandler } from "next";
 import DiscordProvider from "next-auth/providers/discord";
 import EmailProvider from "next-auth/providers/email";
 import { PrismaAdapter } from "@next-auth/prisma-adapter";
@@ -37,7 +38,7 @@ export const authOptions: AuthOptions = {
   adapter: PrismaAdapter(prisma),
   providers,
   pages: {
-    signIn: "/auth/signup",
+    signIn: "/auth/signin",
     verifyRequest: "/auth/verify",
     // error: "/auth/error", -Will be used later
   },
diff --git a/website/src/pages/api/username.tsx b/website/src/pages/api/username.tsx
new file mode 100644
index 00000000..e2e41e25
--- /dev/null
+++ b/website/src/pages/api/username.tsx
@@ -0,0 +1,22 @@
+import { getSession } from "next-auth/react";
+import { Prisma } from "@prisma/client";
+import Email from "next-auth/providers/email";
+
+// POST /api/post
+// Required fields in body: title
+// Optional fields in body: content
+export default async function handle(req, res) {
+  const { username } = req.body;
+  const { email } = req.body;
+
+  const session = await getSession({ req });
+  const result = await prisma.user.update({
+    where: {
+      email: session?.user?.email,
+    },
+    data: {
+      name: username,
+    },
+  });
+  res.json({ name: result.name });
+}
diff --git a/website/src/pages/auth/signup.tsx b/website/src/pages/auth/signin.tsx
similarity index 75%
rename from website/src/pages/auth/signup.tsx
rename to website/src/pages/auth/signin.tsx
index 4afc3102..458a3d57 100644
--- a/website/src/pages/auth/signup.tsx
+++ b/website/src/pages/auth/signin.tsx
@@ -1,9 +1,9 @@
 import { Button, Input, Stack } from "@chakra-ui/react";
 import Head from "next/head";
+import Link from "next/link";
+import { useRef } from "react";
 import { FaDiscord, FaEnvelope, FaGithub } from "react-icons/fa";
 import { getCsrfToken, getProviders, signIn } from "next-auth/react";
-import { useRef } from "react";
-import Link from "next/link";
 
 import { AuthLayout } from "src/components/AuthLayout";
 
@@ -13,25 +13,25 @@ export default function Signin({ csrfToken, providers }) {
   const signinWithEmail = () => {
     signIn(email.id, { callbackUrl: "/", email: emailEl.current.value });
   };
+  const signinWithDiscord = () => {
+    signIn(discord.id, { callbackUrl: "/" });
+  };
+  const signinWithGithub = () => {
+    signIn(github.id, { callbackUrl: "/" });
+  };
 
   return (
     <>
       <Head>
-        <title>Sign Up - Open Assistant</title>
-        <meta name="Sign Up" content="Sign up to access Open Assistant" />
+        <title>Sign In - Open Assistant</title>
+        <meta name="Sign In" content="Sign in to access Open Assistant" />
       </Head>
       <AuthLayout>
         <Stack spacing="2">
           {email && (
-            <Stack>
+            <Stack className="mb-4">
               <Input variant="outline" size="lg" placeholder="Email Address" ref={emailEl} />
-              <Button
-                size={"lg"}
-                leftIcon={<FaEnvelope />}
-                colorScheme="gray"
-                onClick={signinWithEmail}
-                // isDisabled="false"
-              >
+              <Button size={"lg"} leftIcon={<FaEnvelope />} colorScheme="gray" onClick={signinWithEmail}>
                 Continue with Email
               </Button>
             </Stack>
@@ -46,8 +46,7 @@ export default function Signin({ csrfToken, providers }) {
               size="lg"
               leftIcon={<FaDiscord />}
               color="white"
-              onClick={() => signIn(discord, { callbackUrl: "/" })}
-              // isDisabled="false"
+              onClick={signinWithDiscord}
             >
               Continue with Discord
             </Button>
@@ -62,14 +61,15 @@ export default function Signin({ csrfToken, providers }) {
               size={"lg"}
               leftIcon={<FaGithub />}
               colorScheme="blue"
-              // isDisabled="false"
+              onClick={signinWithGithub}
             >
               Continue with Github
             </Button>
           )}
         </Stack>
-        <div className="pt-10 text-center">
-          By signing up you agree to our <br></br>
+        <hr className="mt-14 mb-4 h-px bg-gray-200 border-0" />
+        <div className="text-center">
+          By continuing you agree to our <br></br>
           <Link href="#" aria-label="Terms of Service" className="hover:underline underline-offset-4">
             <b>Terms of Service</b>
           </Link>{" "}
@@ -79,13 +79,6 @@ export default function Signin({ csrfToken, providers }) {
           </Link>
           .
         </div>
-        <hr className="mt-14 mb-4 h-px bg-gray-200 border-0" />
-        <div className="text-center">
-          Already have an account?{" "}
-          <Link href="#" aria-label="Log In" className="hover:underline underline-offset-4">
-            <b>Log In</b>
-          </Link>
-        </div>
       </AuthLayout>
     </>
   );
diff --git a/website/src/pages/auth/verify.tsx b/website/src/pages/auth/verify.tsx
index b2638e6d..f22bea2d 100644
--- a/website/src/pages/auth/verify.tsx
+++ b/website/src/pages/auth/verify.tsx
@@ -13,14 +13,6 @@ export default function Verify() {
       </Head>
       <AuthLayout>
         <h1 className="text-lg">A sign-in link has been sent to your email address.</h1>
-        <hr className="mt-14 mb-4 h-px bg-gray-200 border-0" />
-        <Link
-          href="#"
-          aria-label="Log In"
-          className="flex justify-center font-medium text-black hover:underline underline-offset-4"
-        >
-          Already have an account? Log In
-        </Link>
       </AuthLayout>
     </>
   );