diff --git a/frontend-next/src/components/app/header.js b/frontend-next/src/components/app/header.js
index 1fb986d..8a71e2a 100644
--- a/frontend-next/src/components/app/header.js
+++ b/frontend-next/src/components/app/header.js
@@ -1,14 +1,9 @@
-import { auth, database } from "../../../firebase-config";
+import { database } from "../../../firebase-config";
 import { ref, set, remove } from "firebase/database";
-import { signOut } from "firebase/auth";
-import { Popover } from "@headlessui/react";
 import Link from "next/link"
 
 import { NotificationPanel } from "./notifications/notifications";
-
-function logout() {
-  signOut(auth);
-}
+import { ProfilePanel } from "./profile/ProfilePanel"
 
 // Closes chat room
 function closeChatRoom(roomObj, user) {
@@ -126,39 +121,8 @@ export function Header({
         {/* Notifications Panel */}
         <NotificationPanel user={user}/>
 
-        {/*"Profile Dropdown TODO: MOVE TO PROFILE IMPORT - req user, take logout function with"*/}
-        <Popover className="relative">
-          <Popover.Button as="div">
-            <div className="mr-5 h-[44px] p-[2px] pr-[15px] cursor-pointer bg-cyan-500 text-white font-bold rounded-full shadow-2xl flex">
-              <div className="flex items-center pl-1">{user.firstName}</div>
-              <div className="ml-3 rounded-lg">
-                <img
-                  src={user.pfp}
-                  width="40px"
-                  className="relative mx-auto rounded-xl overflow-hidden"
-                />
-              </div>
-            </div>
-          </Popover.Button>
-
-          <Popover.Panel className="absolute z-10 bg-white mt-[4px] rounded-xl ml-3 shadow-2xl">
-            <div className="grid grid-cols-1">
-              <Link
-                className="rounded-xl p-4 hover:bg-[#C0C0C0]"
-                href={"/user/" + user.uid}
-              >
-                View Profile
-              </Link>
-              <Link
-                className="rounded-xl p-4 hover:bg-[#C0C0C0]"
-                onClick={logout}
-                href="/"
-              >
-                Sign Out
-              </Link>
-            </div>
-          </Popover.Panel>
-        </Popover>
+        {/*Profile Dropdown */}
+        <ProfilePanel user={user}/>
       </div>
     </div>
   );
diff --git a/frontend-next/src/components/app/profile/ProfilePanel.js b/frontend-next/src/components/app/profile/ProfilePanel.js
new file mode 100644
index 0000000..b9ee881
--- /dev/null
+++ b/frontend-next/src/components/app/profile/ProfilePanel.js
@@ -0,0 +1,46 @@
+import { Popover } from "@headlessui/react";
+import { auth } from "../../../../firebase-config";
+import { signOut } from "firebase/auth";
+import Link from "next/link"
+
+
+function logout() {
+  signOut(auth);
+}
+
+export function ProfilePanel({user}) {
+    return (
+      <Popover className="relative">
+        <Popover.Button as="div">
+          <div className="mr-5 h-[44px] p-[2px] pr-[15px] cursor-pointer bg-cyan-500 text-white font-bold rounded-full shadow-2xl flex">
+            <div className="flex items-center pl-1">{user.firstName}</div>
+            <div className="ml-3 rounded-lg">
+              <img
+                src={user.pfp}
+                width="40px"
+                className="relative mx-auto rounded-xl overflow-hidden"
+              />
+            </div>
+          </div>
+        </Popover.Button>
+
+        <Popover.Panel className="absolute z-10 bg-white mt-[4px] rounded-xl ml-3 shadow-2xl">
+          <div className="grid grid-cols-1">
+            <Link
+              className="rounded-xl p-4 hover:bg-[#C0C0C0]"
+              href={"/user/" + user.uid}
+            >
+              View Profile
+            </Link>
+            <Link
+              className="rounded-xl p-4 hover:bg-[#C0C0C0]"
+              onClick={logout}
+              href="/"
+            >
+              Sign Out
+            </Link>
+          </div>
+        </Popover.Panel>
+      </Popover>
+    )
+}
\ No newline at end of file