diff --git a/client/src/components/Footer.jsx b/client/src/components/Footer.jsx
index 2876d220..8a86ee44 100644
--- a/client/src/components/Footer.jsx
+++ b/client/src/components/Footer.jsx
@@ -3,32 +3,63 @@ import { Redirect } from 'react-router-dom';
 
 import pkg from '../../package.json';
 import useAuth from '../hooks/useAuth';
+import { Button, Box, Typography } from '@mui/material';
 
 import '../sass/Footer.scss';
 
 const Footer = () => {
-    const { auth, logout } = useAuth();
+  const { auth, logout } = useAuth();
 
-    const handleLogout = async (e) => {
-        e.preventDefault();
-        await logout();
-        return <Redirect to='/' />
-    };
+  const handleLogout = async (e) => {
+    e.preventDefault();
+    await logout();
+    return <Redirect to="/" />;
+  };
 
-    return (
-        <div className="footer-wrapper">
-            <footer className="footer" aria-label="footer">
-                <p className="footer-text">v{pkg.version} "Alpha"</p>
+  return (
+    //<Box className="footer-wrapper">
+    <Box
+      component="footer"
+      sx={{ display: 'flex', alignItems: 'center', padding: '5px 0' }}
+      aria-label="footer"
+    >
+      <Typography
+        variant="body2"
+        sx={{ fontSize: '9px', fontWeight: 700, textTransform: 'uppercase' }}
+      >{`v${pkg.version} "Alpha"`}</Typography>
 
-                {auth?.user && (
-                    <div className="footer-greeting">
-                        <p className="footer-text">{`Hi ${auth.user.name.firstName}`}</p>
-                        <button className="logout-button" onClick={handleLogout}>{`(LOGOUT)`}</button>
-                    </div>
-                )}
-            </footer>
-        </div>
-    );
+      {auth?.user && (
+        <Box
+          sx={{
+            position: 'absolute',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            left: '50%',
+            transform: 'translateX(-50%)',
+            minWidth: 'max-content',
+          }}
+        >
+          <Typography
+            variant="body2"
+            sx={{
+              fontSize: '9px',
+              whiteSpace: 'nowrap',
+              fontWeight: 700,
+              textTransform: 'uppercase',
+            }}
+          >{`Hi ${auth.user.name.firstName}`}</Typography>
+          <Button
+            sx={{
+              fontSize: '9px',
+              marginLeft: '4px',
+            }}
+            onClick={handleLogout}
+          >{`(LOGOUT)`}</Button>
+        </Box>
+      )}
+    </Box>
+  );
 };
 
-export default Footer;
\ No newline at end of file
+export default Footer;