diff --git a/src/components/layout/Header.astro b/src/components/layout/Header.astro
index b1cd99e..1b56bd9 100644
--- a/src/components/layout/Header.astro
+++ b/src/components/layout/Header.astro
@@ -1,5 +1,6 @@
 ---
-
+import kazootttAvatar from '../../assets/kazoottt-avatar.jpeg'
+import { Image } from 'astro:assets'
 ---
 
 <header class='mb-12 flex w-full flex-wrap pb-3 text-sm sm:flex-nowrap sm:justify-start'>
@@ -7,7 +8,15 @@
 		class='relative mx-auto flex w-full items-center justify-between sm:flex sm:items-center'
 		aria-label='global'
 	>
-		<a class='flex-none text-xl font-semibold' href='/' aria-label='Brand'>KazooTTT</a>
+		<a class='flex items-center' href='/'>
+			<Image
+				src={kazootttAvatar}
+				alt='profile photo'
+				class='mr-2 h-8 w-auto rounded-full sm:hidden'
+				loading='eager'
+			/>
+			<div class='hidden flex-none text-xl font-semibold sm:block' aria-label='Brand'>KazooTTT</div>
+		</a>
 
 		<div class='flex flex-row items-center justify-center gap-x-5 sm:gap-x-7'>
 			<a
diff --git a/src/styles/app.css b/src/styles/app.css
index 6276471..6278b73 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -15,7 +15,7 @@
 		--secondary: 240 4.8% 95.9%;
 		--secondary-foreground: 240 5.9% 10%;
 		--muted: 240 4.8% 95.9%;
-		--muted-foreground: 240 3.8% 46.1%;
+		--muted-foreground: 240 3.8% 25%;
 		--accent: 240 4.8% 95.9%;
 		--accent-foreground: 240 5.9% 10%;
 		--destructive: 0 72.22% 50.59%;