diff --git a/frontend/src/assets/profile-avatar.jpg b/frontend/src/assets/profile-avatar.jpg
new file mode 100644
index 0000000..ec44f5d
Binary files /dev/null and b/frontend/src/assets/profile-avatar.jpg differ
diff --git a/frontend/src/components/TopBar.vue b/frontend/src/components/TopBar.vue
index 18106bc..82cc73c 100644
--- a/frontend/src/components/TopBar.vue
+++ b/frontend/src/components/TopBar.vue
@@ -1,7 +1,9 @@
 <template>
   <header class="topbar">
     <div class="profile" @click="goAbout">
-      <div class="avatar">BS</div>
+      <div class="avatar">
+        <img src="@/assets/profile-avatar.jpg" alt="Brad Stein" />
+      </div>
       <div>
         <div class="name">Brad Stein</div>
         <div class="role">Software Development Engineer</div>
@@ -50,12 +52,17 @@ const goAbout = () => router.push("/about");
   width: 44px;
   height: 44px;
   border-radius: 50%;
-  background: linear-gradient(135deg, rgba(0, 229, 197, 0.5), rgba(127, 124, 255, 0.45));
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  overflow: hidden;
   display: grid;
   place-items: center;
-  color: #010e17;
-  font-weight: 700;
-  border: 1px solid rgba(255, 255, 255, 0.14);
+  background: linear-gradient(135deg, rgba(0, 229, 197, 0.5), rgba(127, 124, 255, 0.45));
+}
+
+.avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
 .name {
diff --git a/frontend/src/views/AboutView.vue b/frontend/src/views/AboutView.vue
index b91f822..0307d5c 100644
--- a/frontend/src/views/AboutView.vue
+++ b/frontend/src/views/AboutView.vue
@@ -2,7 +2,9 @@
   <div class="page">
     <section class="card about">
       <div class="left">
-        <div class="portrait">BS</div>
+        <div class="portrait">
+          <img src="@/assets/profile-avatar.jpg" alt="Brad Stein" />
+        </div>
         <div class="contact">
           <div class="name">Brad Stein</div>
           <div class="role">Senior Software Development Engineer </div>
@@ -194,13 +196,17 @@ const timeline = [
   width: 120px;
   height: 120px;
   border-radius: 50%;
-  background: linear-gradient(135deg, rgba(0, 229, 197, 0.5), rgba(127, 124, 255, 0.45));
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.12);
   display: grid;
   place-items: center;
-  font-size: 34px;
-  font-weight: 800;
-  color: #010e17;
-  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: linear-gradient(135deg, rgba(0, 229, 197, 0.5), rgba(127, 124, 255, 0.45));
+}
+
+.portrait img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
 .left {