diff --git a/src/app/page.tsx b/src/app/page.tsx
index 1fe36a4..8786d31 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,7 +2,6 @@
 import Box from "@mui/material/Box";
 import { ReactNode } from "react";
 
-import Dropdown from "@/components/Dropdown";
 import VolunteerEventCard from "@/components/VolunteerEventCard";
 import VolunteerEventCardHeader from "@/components/VolunteerEventCardHeader";
 import WelcomeCard from "@/components/WelcomeCard";
@@ -25,7 +24,6 @@ export default function HomePage(): ReactNode {
         <WelcomeCard />
         <VolunteerEventCardHeader />
         <VolunteerEventCard />
-        <Dropdown />
       </Box>
     </div>
   );
diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx
deleted file mode 100644
index 211530f..0000000
--- a/src/components/Dropdown/index.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import { Box, Button } from "@mui/material";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import { useRouter } from "next/navigation";
-import * as React from "react";
-
-export default function Dropdown(): React.ReactElement {
-  const router = useRouter();
-  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-  const open = Boolean(anchorEl);
-
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement>): void => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleClose = (): void => {
-    setAnchorEl(null);
-  };
-
-  return (
-    <Box>
-      <div>
-        <Button
-          id="basic-button"
-          aria-controls={open ? "basic-menu" : undefined}
-          aria-haspopup="true"
-          aria-expanded={open ? "true" : undefined}
-          onClick={handleClick}
-        >
-          Tester Tester
-        </Button>
-
-        <Menu
-          id="basic-menu"
-          anchorEl={anchorEl}
-          open={open}
-          onClose={handleClose}
-          slotProps={{
-            list: {
-              "aria-labelledby": "basic-button",
-            },
-          }}
-        >
-          <MenuItem
-            onClick={() => {
-              router.push("/update-profile");
-              handleClose();
-            }}
-          >
-            Update Profile
-          </MenuItem>
-          <MenuItem
-            onClick={() => {
-              router.push("/change-password");
-              handleClose();
-            }}
-          >
-            Change Password
-          </MenuItem>
-          <MenuItem
-            onClick={() => {
-              router.push("/manage-affiliations");
-              handleClose();
-            }}
-          >
-            Manage Affiliations
-          </MenuItem>
-          <MenuItem
-            onClick={() => {
-              router.push("/view-hours");
-              handleClose();
-            }}
-          >
-            View Hours
-          </MenuItem>
-          <MenuItem
-            onClick={() => {
-              router.push("/notification-settings");
-              handleClose();
-            }}
-          >
-            Notification Settings
-          </MenuItem>
-          <MenuItem
-            onClick={() => {
-              router.push("/language");
-              handleClose();
-            }}
-          >
-            Language
-          </MenuItem>
-          <MenuItem
-            onClick={() => {
-              router.push("/sign-out");
-              handleClose();
-            }}
-          >
-            Sign Out
-          </MenuItem>
-        </Menu>
-      </div>
-    </Box>
-  );
-}
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index 9d9f05c..2abb1bc 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -1,20 +1,19 @@
 "use client";
 import SearchIcon from "@mui/icons-material/Search";
-import { MenuItem } from "@mui/material";
 import AppBar from "@mui/material/AppBar";
 import Box from "@mui/material/Box";
 import InputBase from "@mui/material/InputBase";
-import Popover from "@mui/material/Popover";
 import { alpha, styled } from "@mui/material/styles";
 import Toolbar from "@mui/material/Toolbar";
 import Typography from "@mui/material/Typography";
 import Image from "next/image";
 import Link from "next/link";
-import { signOut, useSession } from "next-auth/react";
+import { useSession } from "next-auth/react";
 import * as React from "react";
 
 import AuthButton from "../AuthButton";
 import DefaultButton from "../DefaultButton";
+import ProfileDropdown from "../ProfileDropdown";
 
 const Search = styled("div")(({ theme }) => ({
   position: "relative",
@@ -58,20 +57,7 @@ const StyledInputBase = styled(InputBase)(({ theme }) => ({
 }));
 
 export default function Header(): React.ReactElement {
-  const { data: session, status } = useSession();
-
-  const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);
-
-  const handleClick = (event: React.MouseEvent<HTMLElement>): void => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleClose = (): void => {
-    setAnchorEl(null);
-  };
-
-  const open = Boolean(anchorEl);
-  const id = open ? "simple-popover" : undefined;
+  const { status } = useSession();
 
   return (
     <Box
@@ -148,57 +134,7 @@ export default function Header(): React.ReactElement {
               />
             </Search>
             {status === "authenticated" ? (
-              <>
-                <Box
-                  aria-describedby={id}
-                  onClick={handleClick}
-                  sx={{
-                    display: "flex",
-                    alignItems: "center",
-                    borderRadius: "50%",
-                    overflow: "hidden",
-                    border: 2,
-                    borderColor: "primary.main",
-                    cursor: "pointer",
-                    ml: 1,
-
-                    "&:hover": {
-                      borderColor: "primary.dark",
-                    },
-                  }}
-                >
-                  {session?.user?.image && (
-                    <Image
-                      src={session.user.image}
-                      width={32}
-                      height={32}
-                      alt="User avatar"
-                    />
-                  )}
-                </Box>
-                <Popover
-                  open={open}
-                  anchorEl={anchorEl}
-                  onClose={handleClose}
-                  anchorOrigin={{
-                    vertical: "bottom",
-                    horizontal: "right",
-                  }}
-                  transformOrigin={{
-                    vertical: "top",
-                    horizontal: "right",
-                  }}
-                >
-                  <MenuItem
-                    onClick={async () => {
-                      handleClose();
-                      await signOut({ callbackUrl: "/" });
-                    }}
-                  >
-                    Log out
-                  </MenuItem>
-                </Popover>
-              </>
+              <ProfileDropdown />
             ) : (
               <>
                 <AuthButton label="Sign In" />
diff --git a/src/components/ProfileDropdown/index.tsx b/src/components/ProfileDropdown/index.tsx
new file mode 100644
index 0000000..8c7702c
--- /dev/null
+++ b/src/components/ProfileDropdown/index.tsx
@@ -0,0 +1,125 @@
+import { MenuItem } from "@mui/material";
+import Box from "@mui/material/Box";
+import Popover from "@mui/material/Popover";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import { signOut, useSession } from "next-auth/react";
+import { useState } from "react";
+
+export default function ProfileDropdown(): React.ReactElement {
+  const router = useRouter();
+  const { data: session } = useSession();
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>): void => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = (): void => {
+    setAnchorEl(null);
+  };
+
+  const open = Boolean(anchorEl);
+  const id = open ? "simple-popover" : undefined;
+  return (
+    <>
+      <Box
+        aria-describedby={id}
+        onClick={handleClick}
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          borderRadius: "50%",
+          overflow: "hidden",
+          border: 2,
+          borderColor: "primary.main",
+          cursor: "pointer",
+          ml: 1,
+
+          "&:hover": {
+            borderColor: "primary.dark",
+          },
+        }}
+      >
+        {session?.user?.image && (
+          <Image
+            src={session.user.image}
+            width={32}
+            height={32}
+            alt="User avatar"
+          />
+        )}
+      </Box>
+      <Popover
+        open={open}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "right",
+        }}
+        transformOrigin={{
+          vertical: "top",
+          horizontal: "right",
+        }}
+      >
+        <MenuItem
+          onClick={() => {
+            void router.push("/update-profile");
+            handleClose();
+          }}
+        >
+          Update Profile
+        </MenuItem>
+        <MenuItem
+          onClick={() => {
+            void router.push("/change-password");
+            handleClose();
+          }}
+        >
+          Change Password
+        </MenuItem>
+        <MenuItem
+          onClick={() => {
+            void router.push("/manage-affiliations");
+            handleClose();
+          }}
+        >
+          Manage Affiliations
+        </MenuItem>
+        <MenuItem
+          onClick={() => {
+            void router.push("/view-hours");
+            handleClose();
+          }}
+        >
+          View Hours
+        </MenuItem>
+        <MenuItem
+          onClick={() => {
+            void router.push("/notification-settings");
+            handleClose();
+          }}
+        >
+          Notification Settings
+        </MenuItem>
+        <MenuItem
+          onClick={() => {
+            void router.push("/language");
+            handleClose();
+          }}
+        >
+          Language
+        </MenuItem>
+        <MenuItem
+          onClick={() => {
+            void signOut({ callbackUrl: "/" });
+            handleClose();
+          }}
+        >
+          Log out
+        </MenuItem>
+      </Popover>
+    </>
+  );
+}
diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
deleted file mode 100644
index 9d9f05c..0000000
--- a/src/components/header/index.tsx
+++ /dev/null
@@ -1,218 +0,0 @@
-"use client";
-import SearchIcon from "@mui/icons-material/Search";
-import { MenuItem } from "@mui/material";
-import AppBar from "@mui/material/AppBar";
-import Box from "@mui/material/Box";
-import InputBase from "@mui/material/InputBase";
-import Popover from "@mui/material/Popover";
-import { alpha, styled } from "@mui/material/styles";
-import Toolbar from "@mui/material/Toolbar";
-import Typography from "@mui/material/Typography";
-import Image from "next/image";
-import Link from "next/link";
-import { signOut, useSession } from "next-auth/react";
-import * as React from "react";
-
-import AuthButton from "../AuthButton";
-import DefaultButton from "../DefaultButton";
-
-const Search = styled("div")(({ theme }) => ({
-  position: "relative",
-  borderRadius: theme.shape.borderRadius,
-  backgroundColor: alpha(theme.palette.common.white, 0.15),
-  "&:hover": {
-    backgroundColor: alpha(theme.palette.common.white, 0.25),
-  },
-  marginLeft: 0,
-  width: "100%",
-  [theme.breakpoints.up("sm")]: {
-    marginLeft: theme.spacing(1),
-    width: "auto",
-  },
-}));
-
-const SearchIconWrapper = styled("div")(({ theme }) => ({
-  padding: theme.spacing(0, 2),
-  height: "100%",
-  position: "absolute",
-  pointerEvents: "none",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-}));
-
-const StyledInputBase = styled(InputBase)(({ theme }) => ({
-  color: "inherit",
-  width: "100%",
-  "& .MuiInputBase-input": {
-    padding: theme.spacing(1, 1, 1, 0),
-    paddingLeft: `calc(1em + ${theme.spacing(4)})`,
-    transition: theme.transitions.create("width"),
-    [theme.breakpoints.up("sm")]: {
-      width: "12ch",
-      "&:focus": {
-        width: "20ch",
-      },
-    },
-  },
-}));
-
-export default function Header(): React.ReactElement {
-  const { data: session, status } = useSession();
-
-  const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);
-
-  const handleClick = (event: React.MouseEvent<HTMLElement>): void => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleClose = (): void => {
-    setAnchorEl(null);
-  };
-
-  const open = Boolean(anchorEl);
-  const id = open ? "simple-popover" : undefined;
-
-  return (
-    <Box
-      sx={{
-        flexGrow: 1,
-        position: "sticky",
-        top: 0,
-        zIndex: 10,
-      }}
-    >
-      <AppBar position="static" color="default">
-        <Toolbar>
-          <Box
-            sx={{
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "flex-start",
-              flexGrow: 1,
-              ml: "10%",
-            }}
-          >
-            <Box
-              sx={{
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "center",
-              }}
-            >
-              <Link href="/">
-                <Box
-                  sx={{
-                    display: "flex",
-                    flexDirection: "column",
-                    alignItems: "center",
-                  }}
-                >
-                  <Image
-                    src="/logo.svg"
-                    alt="Thrive logo"
-                    width={35}
-                    height={35}
-                  />
-                </Box>
-              </Link>
-              <Typography
-                variant="h6"
-                noWrap
-                component="a"
-                href="#app-bar-with-responsive-menu"
-                sx={{
-                  ml: 1,
-                  mr: 2,
-                  display: { xs: "none", md: "flex" },
-                  fontSize: ".9rem",
-                  fontWeight: 700,
-                  color: "#22305B",
-                  textDecoration: "none",
-                  flexGrow: 1,
-                }}
-              >
-                THRIVE
-              </Typography>
-            </Box>
-          </Box>
-
-          <Box sx={{ display: "flex", alignItems: "center", mr: "10%" }}>
-            <Search>
-              <SearchIconWrapper>
-                <SearchIcon />
-              </SearchIconWrapper>
-              <StyledInputBase
-                placeholder="Search…"
-                inputProps={{ "aria-label": "search" }}
-              />
-            </Search>
-            {status === "authenticated" ? (
-              <>
-                <Box
-                  aria-describedby={id}
-                  onClick={handleClick}
-                  sx={{
-                    display: "flex",
-                    alignItems: "center",
-                    borderRadius: "50%",
-                    overflow: "hidden",
-                    border: 2,
-                    borderColor: "primary.main",
-                    cursor: "pointer",
-                    ml: 1,
-
-                    "&:hover": {
-                      borderColor: "primary.dark",
-                    },
-                  }}
-                >
-                  {session?.user?.image && (
-                    <Image
-                      src={session.user.image}
-                      width={32}
-                      height={32}
-                      alt="User avatar"
-                    />
-                  )}
-                </Box>
-                <Popover
-                  open={open}
-                  anchorEl={anchorEl}
-                  onClose={handleClose}
-                  anchorOrigin={{
-                    vertical: "bottom",
-                    horizontal: "right",
-                  }}
-                  transformOrigin={{
-                    vertical: "top",
-                    horizontal: "right",
-                  }}
-                >
-                  <MenuItem
-                    onClick={async () => {
-                      handleClose();
-                      await signOut({ callbackUrl: "/" });
-                    }}
-                  >
-                    Log out
-                  </MenuItem>
-                </Popover>
-              </>
-            ) : (
-              <>
-                <AuthButton label="Sign In" />
-                <DefaultButton
-                  label="Create account"
-                  href="/create-account"
-                  bgcolor="inherit"
-                  color="primary"
-                />
-              </>
-            )}
-          </Box>
-        </Toolbar>
-      </AppBar>
-    </Box>
-  );
-}