diff --git a/ui/src/app/layout.tsx b/ui/src/app/layout.tsx
index 3ead78f..84eacba 100644
--- a/ui/src/app/layout.tsx
+++ b/ui/src/app/layout.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import RecoilRootWrapper from '@app/recoil-root-wrapper';
-import Topbar from '@/components/Topbar';
+import Header from '@/components/Header';
 import { Inter } from 'next/font/google';
 import { Box, MantineProvider } from '@mantine/core';
 import { ModalsProvider } from '@mantine/modals';
@@ -27,7 +27,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           <MantineProvider>
             <Notifications />
             <ModalsProvider>
-              <Topbar />
+              <Header />
               <Box p='xl' pt='sm' className='h-full'>
                 {children}
               </Box>
diff --git a/ui/src/components/Topbar/LoginModal.tsx b/ui/src/components/Header/HeaderModal.tsx
similarity index 98%
rename from ui/src/components/Topbar/LoginModal.tsx
rename to ui/src/components/Header/HeaderModal.tsx
index 7adde5a..83adedd 100644
--- a/ui/src/components/Topbar/LoginModal.tsx
+++ b/ui/src/components/Header/HeaderModal.tsx
@@ -18,14 +18,14 @@ import {
 import { useForm } from '@mantine/form';
 import { notifications } from '@mantine/notifications';
 
-interface LoginModalProps {
+interface HeaderModalProps {
   type?: string;
   toggle: any;
   setUser: (user: User) => void;
   setRefreshId: (id: NodeJS.Timeout) => void;
 }
 
-export function LoginModal({ type, toggle, setUser, setRefreshId }: LoginModalProps) {
+export function HeaderModal({ type, toggle, setUser, setRefreshId }: HeaderModalProps) {
   function passwordValidator(value: string) {
     if (value.trim().length < 10) {
       return 'Password must be at least 10 characters';
diff --git a/ui/src/components/Topbar/topbar.css b/ui/src/components/Header/header.css
similarity index 100%
rename from ui/src/components/Topbar/topbar.css
rename to ui/src/components/Header/header.css
diff --git a/ui/src/components/Topbar/headerItems.ts b/ui/src/components/Header/headerItems.ts
similarity index 100%
rename from ui/src/components/Topbar/headerItems.ts
rename to ui/src/components/Header/headerItems.ts
diff --git a/ui/src/components/Topbar/index.tsx b/ui/src/components/Header/index.tsx
similarity index 95%
rename from ui/src/components/Topbar/index.tsx
rename to ui/src/components/Header/index.tsx
index 3d31c94..c133219 100644
--- a/ui/src/components/Topbar/index.tsx
+++ b/ui/src/components/Header/index.tsx
@@ -2,17 +2,17 @@
 
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import './topbar.css';
+import './header.css';
 import { Avatar, Button, Card, Grid, Group, Menu, Text, UnstyledButton } from '@mantine/core';
 import Cookies from 'js-cookie';
 import { useEffect, useState } from 'react';
 import { logout, me, refreshLoggedIn } from '@/api/auth';
 import { User } from '@/api/auth.types';
 import { useToggle } from '@mantine/hooks';
-import { LoginModal } from './LoginModal';
+import { HeaderModal } from './HeaderModal';
 import { HeaderItem, headerItems } from './headerItems';
 
-export default function Topbar() {
+export default function Header() {
   const pathName = usePathname();
   const [modalType, toggle] = useToggle([undefined, 'login', 'register', 'reset']);
   const [headers, setHeaders] = useState<HeaderItem[]>([]);
@@ -126,7 +126,7 @@ export default function Topbar() {
           )}
         </div>
       </nav>
-      <LoginModal type={modalType} toggle={toggle} setUser={setUser} setRefreshId={setRefreshId} />
+      <HeaderModal type={modalType} toggle={toggle} setUser={setUser} setRefreshId={setRefreshId} />
     </>
   );
 }