diff --git a/client/src/components/Navbar.tsx b/client/src/components/Navbar.tsx
index 9672128..2ef0084 100644
--- a/client/src/components/Navbar.tsx
+++ b/client/src/components/Navbar.tsx
@@ -7,6 +7,7 @@ import { useAuth } from '../context/AuthContext';
 
 const Navbar: React.FC = () => {
   const [isOpen, setIsOpen] = useState(false);
+  const { user, isAuthenticated } = useAuth0();
 
   return (
     <nav className="bg-secondaryElements p-4">
@@ -16,6 +17,10 @@ const Navbar: React.FC = () => {
          <Link     to="/home" ><img src={Logo} alt="Logo" className="size-16" /></Link> <div className="text-primaryText font-primary font-bold text-xl ml-8">
             StudyFlow
           </div>
+          {isAuthenticated && user && 
+          <p className="text-flair font-primary font-bold text-xl ml-8 lg:ml-16 xs:text-md hidden xs:block">
+            Hi, {user.given_name ? user.given_name : user.nickname}
+          </p>}
         </div>
 
         {/* Links */}
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index da8efea..b538b9e 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -3,6 +3,9 @@ export default {
 	content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
 	theme: {
 		extend: {
+			screens: {
+        'xs': '400px',
+      },
 			colors: {
 				primaryText: "#0F172A",
 				primaryTextLighter: "#0F172A80",