diff --git a/client/src/Header.tsx b/client/src/Header.tsx
index 88df0d9..e350113 100644
--- a/client/src/Header.tsx
+++ b/client/src/Header.tsx
@@ -1,93 +1,169 @@
-import { AppBar, Button, ButtonGroup, Grid, Link, Typography } from "@mui/material";
+import {
+  AppBar,
+  Button,
+  ButtonGroup,
+  Grid,
+  Link,
+  Typography,
+} from "@mui/material";
 import Box from "@mui/material/Box";
-import AcUnitIcon from '@mui/icons-material/AcUnit';
+import AcUnitIcon from "@mui/icons-material/AcUnit";
 import { cyan } from "@mui/material/colors";
 import { useContext } from "react";
 import { LoginContext } from "./Context";
-import AccountCircleIcon from '@mui/icons-material/AccountCircle';
-import HomeIcon from '@mui/icons-material/Home';
-import PostAddIcon from '@mui/icons-material/PostAdd';
+import AccountCircleIcon from "@mui/icons-material/AccountCircle";
+import HomeIcon from "@mui/icons-material/Home";
+import PostAddIcon from "@mui/icons-material/PostAdd";
 
 function LoginDisplay({ sx }: { sx?: React.CSSProperties }): JSX.Element {
-    const loginCtx = useContext(LoginContext);
+  const loginCtx = useContext(LoginContext);
 
-    const handleLogin = (): void => {
-        console.log("Login button pressed")
-        if (loginCtx.currentUser == undefined) {
-            loginCtx.setOpen?.(true); // If the loginCtx.setOpen is defined, call it with true as the argument
-        } else {
-            loginCtx.setCurrentUser?.("");
-            loginCtx.setUserToken?.("");
-        }
-    }
-
-    if (loginCtx.currentUser != undefined) {
-        return (
-            <Box sx={{ textAlign: "right", ...sx }}>
-                <Typography color={"#808080"} sx={{ textAlign: "right" }}>
-                    Logged in as:
-                </Typography>
-                <Typography sx={{ textAlign: "right" }}>
-                    <Link href='#' underline='hover' onClick={(): void => handleLogin()}>
-                        {loginCtx.currentUser}
-                    </Link>
-                </Typography>
-            </Box>
-        )
+  const handleLogin = (): void => {
+    console.log("Login button pressed");
+    if (loginCtx.currentUser == undefined) {
+      loginCtx.setOpen?.(true); // If the loginCtx.setOpen is defined, call it with true as the argument
+    } else {
+      loginCtx.setCurrentUser?.("");
+      loginCtx.setUserToken?.("");
     }
+  };
 
+  if (loginCtx.currentUser != undefined) {
     return (
-        <Box sx={{ textAlign: "right", ...sx }}>
-            <Button variant="text" startIcon={<AccountCircleIcon />} onClick={(): void => handleLogin()}>Login</Button>
-        </Box>
-    )
+      <Box sx={{ textAlign: "right", ...sx }}>
+        <Typography color={"#808080"} sx={{ textAlign: "right" }}>
+          Logged in as:
+        </Typography>
+        <Typography sx={{ textAlign: "right" }}>
+          <Link href="#" underline="hover" onClick={(): void => handleLogin()}>
+            {loginCtx.currentUser}
+          </Link>
+        </Typography>
+      </Box>
+    );
+  }
+
+  return (
+    <Box sx={{ textAlign: "right", ...sx }}>
+      <Button
+        variant="text"
+        startIcon={<AccountCircleIcon />}
+        onClick={(): void => handleLogin()}
+      >
+        Login
+      </Button>
+    </Box>
+  );
 }
 
 function Header({ sx }: { sx?: React.CSSProperties }): JSX.Element {
-    return (
-        <AppBar position='static' sx={{ p: 1, px: 3, display: 'flex', flexDirection: 'row', justifyContent: 'space-evenly', ...sx }}>
-            <Grid container px={2} spacing={2} sx={{ flexGrow: 1, display: "flex", maxWidth: "1200px", flexDirection: "row", alignItems: "center", justifyContent: "space-between" }}>
-                <Grid item xs={12} sm={6} md={4} lg={4}><HeaderLogo clickable /></Grid>
-                <Grid item xs={12} sm={6} md={4} lg={4}><NavButtons /></Grid>
-                <Grid item xs={12} sm={6} md={4} lg={4}><LoginDisplay /></Grid>
-            </Grid>
-        </AppBar >)
+  return (
+    <AppBar
+      position="static"
+      sx={{
+        p: 1,
+        px: 3,
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "space-evenly",
+        ...sx,
+      }}
+    >
+      <Grid
+        container
+        px={2}
+        spacing={2}
+        sx={{
+          flexGrow: 1,
+          display: "flex",
+          maxWidth: "1200px",
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "space-between",
+        }}
+      >
+        <Grid item xs={12} sm={6} md={4} lg={4}>
+          <HeaderLogo clickable />
+        </Grid>
+        <Grid item xs={12} sm={6} md={4} lg={4}>
+          <NavButtons />
+        </Grid>
+        <Grid item xs={12} sm={6} md={4} lg={4}>
+          <LoginDisplay />
+        </Grid>
+      </Grid>
+    </AppBar>
+  );
 }
 
-function HeaderLogo({ clickable, sx }: { clickable?: boolean, sx?: React.CSSProperties }): JSX.Element {
-    const clickStyle = {
-        transition: "0.3s all ease-in-out",
-        ":hover": { textShadow: "0 0px 15px" + cyan[400] }
-    }
+function HeaderLogo({
+  clickable,
+  sx,
+}: {
+  clickable?: boolean;
+  sx?: React.CSSProperties;
+}): JSX.Element {
+  const clickStyle = {
+    transition: "0.3s all ease-in-out",
+    ":hover": { textShadow: "0 0px 15px" + cyan[400] },
+  };
 
-    return (
-        <Box sx={{
-            width: "fit-content",
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            userSelect: "none",
-            cursor: "pointer",
-            ...clickable ? clickStyle : {},
-            ...sx
-        }}>
-            <AcUnitIcon fontSize="large" sx={{ color: cyan[400], mr: 1 }}></AcUnitIcon>
-            <Typography variant='h4'>FrostByte</Typography>
-        </Box>
-    )
+  return (
+    <Box
+      sx={{
+        width: "fit-content",
+        // height: "fit-content",
+        // display: "flex",
+        // flexDirection: "row",
+        // alignItems: "center",
+        // justifyContent: "center",
+        userSelect: "none",
+        cursor: "pointer",
+        ...(clickable ? clickStyle : {}),
+        ...sx,
+      }}
+    >
+      <Typography fontSize={"2rem"} sx={{display:"flex", flexDirection:"row", alignItems: "center"}}>
+        <AcUnitIcon
+          fontSize="inherit"
+          sx={{height: "100%", color: cyan[400], mr: 1, mb: 1.1 }}
+        ></AcUnitIcon>
+        FrostByte
+      </Typography>
+    </Box>
+  );
 }
 
 function NavButtons({ sx }: { sx?: React.CSSProperties }): JSX.Element {
-    return (
-        <Box sx={{ display: 'flex', flexDirection: 'row', maxWidth: "400px", width: 1, ...sx }}>
-            <ButtonGroup variant="text" aria-label="text button group" sx={{ width: "100%" }}>
-                {["Home", "New"].map((typename): JSX.Element => {
-                    return (
-                        <Button startIcon={typename === "Home" ? <HomeIcon /> : <PostAddIcon />} key={typename} sx={{ px: 2, bgcolor: "#FFFFFF15", width: 1 }}>{typename}</Button>
-                    )
-                })}
-            </ButtonGroup>
-        </Box>)
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "row",
+        maxWidth: "400px",
+        width: 1,
+        ...sx,
+      }}
+    >
+      <ButtonGroup
+        variant="text"
+        aria-label="text button group"
+        sx={{ width: "100%" }}
+      >
+        {["Home", "New"].map((typename): JSX.Element => {
+          return (
+            <Button
+              startIcon={typename === "Home" ? <HomeIcon /> : <PostAddIcon />}
+              key={typename}
+              sx={{ px: 2, bgcolor: "#FFFFFF15", width: 1 }}
+            >
+              {typename}
+            </Button>
+          );
+        })}
+      </ButtonGroup>
+    </Box>
+  );
 }
 
-export default Header;
\ No newline at end of file
+export default Header;