diff --git a/website/public/images/temp-avatars/av1.jpg b/website/public/images/temp-avatars/av1.jpg
new file mode 100644
index 00000000..0c76c2b7
Binary files /dev/null and b/website/public/images/temp-avatars/av1.jpg differ
diff --git a/website/public/images/temp-avatars/av2.jpg b/website/public/images/temp-avatars/av2.jpg
new file mode 100644
index 00000000..9eb06f60
Binary files /dev/null and b/website/public/images/temp-avatars/av2.jpg differ
diff --git a/website/public/images/temp-avatars/av3.jpg b/website/public/images/temp-avatars/av3.jpg
new file mode 100644
index 00000000..402d485f
Binary files /dev/null and b/website/public/images/temp-avatars/av3.jpg differ
diff --git a/website/public/images/temp-avatars/av4.jpg b/website/public/images/temp-avatars/av4.jpg
new file mode 100644
index 00000000..286997af
Binary files /dev/null and b/website/public/images/temp-avatars/av4.jpg differ
diff --git a/website/public/images/temp-avatars/av5.jpg b/website/public/images/temp-avatars/av5.jpg
new file mode 100644
index 00000000..c017c767
Binary files /dev/null and b/website/public/images/temp-avatars/av5.jpg differ
diff --git a/website/src/components/Avatar.tsx b/website/src/components/Avatar.tsx
new file mode 100644
index 00000000..26bdec0b
--- /dev/null
+++ b/website/src/components/Avatar.tsx
@@ -0,0 +1,96 @@
+import React from "react";
+import { signOut, useSession } from "next-auth/react";
+import Image from "next/image";
+import { Popover } from "@headlessui/react";
+import { AnimatePresence, motion } from "framer-motion";
+import { FaCog, FaSignOutAlt, FaGithub } from "react-icons/fa";
+
+export function Avatar() {
+  const { data: session } = useSession();
+
+  if (!session) {
+    return <></>;
+  }
+  if (session && session.user) {
+    const email = session.user.email;
+    const accountOptions = [
+      {
+        name: "Account Settings",
+        href: "#",
+        desc: "Account Settings",
+        icon: FaCog,
+        //For future use
+      },
+    ];
+    return (
+      <Popover className="relative">
+        {({ open }) => (
+          <>
+            <Popover.Button aria-label="Toggle Account Options" className="flex">
+              <div className="flex items-center gap-4 p-1 lg:pr-6 rounded-full bg-white border border-slate-300/70 hover:bg-gray-200/50 transition-colors duration-300">
+                <Image
+                  src="/images/temp-avatars/av1.jpg"
+                  alt="Profile Picture"
+                  width="40"
+                  height="40"
+                  className="rounded-full"
+                ></Image>
+                <p className="hidden lg:flex">{email}</p>
+                {/* Will be changed to username once it is implemented */}
+              </div>
+            </Popover.Button>
+            <AnimatePresence initial={false}>
+              {open && (
+                <>
+                  <Popover.Panel
+                    static
+                    as={motion.div}
+                    initial={{ opacity: 0, y: -10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    exit={{
+                      opacity: 0,
+                      y: -10,
+                      transition: { duration: 0.2 },
+                    }}
+                    className="absolute right-0 mt-3 w-screen max-w-xs p-4 rounded-md bg-white border border-slate-300/70"
+                  >
+                    <div className="flex flex-col gap-1">
+                      {accountOptions.map((item) => (
+                        <a
+                          key={item.name}
+                          href={item.href}
+                          aria-label={item.desc}
+                          className="flex items-center rounded-md hover:bg-gray-200/50"
+                        >
+                          <div className="p-4">
+                            <item.icon aria-hidden="true" />
+                          </div>
+                          <div>
+                            <p>{item.name}</p>
+                          </div>
+                        </a>
+                      ))}
+                      <a
+                        className="flex items-center rounded-md hover:bg-gray-100 cursor-pointer"
+                        onClick={() => signOut()}
+                      >
+                        <div className="p-4">
+                          <FaSignOutAlt />
+                        </div>
+                        <div>
+                          <p>Sign Out</p>
+                        </div>
+                      </a>
+                    </div>
+                  </Popover.Panel>
+                </>
+              )}
+            </AnimatePresence>
+          </>
+        )}
+      </Popover>
+    );
+  }
+}
+
+export default Avatar;
diff --git a/website/src/components/Header.tsx b/website/src/components/Header.tsx
index aae657aa..c47982a1 100644
--- a/website/src/components/Header.tsx
+++ b/website/src/components/Header.tsx
@@ -4,7 +4,9 @@ import { AnimatePresence, motion } from "framer-motion";
 import Image from "next/image";
 import Link from "next/link";
 import { signOut, useSession } from "next-auth/react";
+import { FaUser, FaSignOutAlt } from "react-icons/fa";
 
+import { Avatar } from "./Avatar";
 import { Container } from "./Container";
 import { NavLinks } from "./NavLinks";
 
@@ -40,15 +42,13 @@ function MobileNavLink({ children, ...props }) {
 function AccountButton() {
   const { data: session } = useSession();
   if (session) {
-    return (
-      <Button variant="outline" onClick={() => signOut()}>
-        Log out
-      </Button>
-    );
+    return;
   }
   return (
     <Link href="/auth/signup" aria-label="Home" className="flex items-center">
-      <Button variant="outline">Log in</Button>
+      <Button variant="outline" leftIcon={<FaUser />}>
+        Log in
+      </Button>
     </Link>
   );
 }
@@ -57,7 +57,7 @@ export function Header() {
   return (
     <header>
       <nav>
-        <Container className="relative z-50 flex justify-between py-8">
+        <Container className="relative bg-white z-10 flex justify-between py-8">
           <div className="relative z-10 flex items-center gap-16">
             <Link href="/" aria-label="Home" className="flex items-center">
               <Image src="/images/logos/logo.svg" className="mx-auto object-fill" width="50" height="50" alt="logo" />
@@ -67,12 +67,12 @@ export function Header() {
               <NavLinks />
             </div>
           </div>
-          <div className="flex items-center gap-6">
+          <div className="flex items-center gap-4">
             <Popover className="lg:hidden">
               {({ open }) => (
                 <>
                   <Popover.Button
-                    className="relative z-10 -m-2 inline-flex items-center rounded-lg stroke-gray-900 p-2 hover:bg-gray-200/50 hover:stroke-gray-600 active:stroke-gray-900 [&:not(:focus-visible)]:focus:outline-none"
+                    className="relative z-10 inline-flex items-center rounded-lg stroke-gray-900 p-2 hover:bg-gray-200/50 hover:stroke-gray-600 active:stroke-gray-900 [&:not(:focus-visible)]:focus:outline-none"
                     aria-label="Toggle site navigation"
                   >
                     {({ open }) => (open ? <ChevronUpIcon className="h-6 w-6" /> : <MenuIcon className="h-6 w-6" />)}
@@ -86,7 +86,7 @@ export function Header() {
                           initial={{ opacity: 0 }}
                           animate={{ opacity: 1 }}
                           exit={{ opacity: 0 }}
-                          className="fixed inset-0 z-0 bg-gray-300/60 backdrop-blur"
+                          className="fixed inset-0 z-1 bg-gray-300/60 backdrop-blur"
                         />
                         <Popover.Panel
                           static
@@ -98,15 +98,13 @@ export function Header() {
                             y: -32,
                             transition: { duration: 0.2 },
                           }}
-                          className="absolute inset-x-0 top-0 z-0 origin-top rounded-b-2xl bg-gray-50 px-6 pb-6 pt-32 shadow-2xl shadow-gray-900/20"
+                          className="absolute inset-x-0 top-0 z-0 origin-top rounded-b-2xl bg-white px-6 pb-6 pt-32 shadow-2xl shadow-gray-900/20"
                         >
                           <div className="space-y-4">
                             <MobileNavLink href="#join-us">Join Us</MobileNavLink>
                             <MobileNavLink href="#faqs">FAQs</MobileNavLink>
                           </div>
-                          <div className="mt-8 flex flex-col gap-4">
-                            <AccountButton />
-                          </div>
+                          <div className="mt-8 flex flex-col gap-4"></div>
                         </Popover.Panel>
                       </>
                     )}
@@ -115,6 +113,7 @@ export function Header() {
               )}
             </Popover>
             <AccountButton />
+            <Avatar />
           </div>
         </Container>
       </nav>
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
index 5c7b6acf..6090468c 100644
--- a/website/src/pages/index.tsx
+++ b/website/src/pages/index.tsx
@@ -2,6 +2,7 @@ import { useSession } from "next-auth/react";
 
 import Head from "next/head";
 import Link from "next/link";
+import { Button, Input, Stack } from "@chakra-ui/react";
 
 import { CallToAction } from "../components/CallToAction";
 import { Faq } from "../components/Faq";
@@ -25,7 +26,7 @@ export default function Home() {
           />
         </Head>
         <Header />
-        <main>
+        <main className="z-0">
           <Hero />
           <CallToAction />
 
@@ -45,12 +46,10 @@ export default function Home() {
         />
       </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="h-3/4  z-0 bg-white flex items-center justify-center">
+        <Button size="lg" colorScheme="blue" className="drop-shadow">
+          <Link href="/grading/grade-output">Rate a prompt and output now</Link>
+        </Button>
       </main>
       <Footer />
     </>