diff --git a/app/p/[didOrHandle]/ProfilePageLayout.tsx b/app/p/[didOrHandle]/ProfilePageLayout.tsx
index b5c2db8f..0d7cc091 100644
--- a/app/p/[didOrHandle]/ProfilePageLayout.tsx
+++ b/app/p/[didOrHandle]/ProfilePageLayout.tsx
@@ -5,6 +5,9 @@ import { useState } from "react";
 import { ProfileTabs, TabContent } from "./ProfileTabs/Tabs";
 import { Json } from "supabase/database.types";
 import { ProfileViewDetailed } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
+import { Avatar } from "components/Avatar";
+import { AppBskyActorProfile } from "lexicons/api";
+import { blobRefToSrc } from "src/utils/blobRefToSrc";
 
 export const ProfilePageLayout = (props: {
   profile: {
@@ -51,25 +54,34 @@ const ProfilePageContent = (props: {
 }) => {
   let [tab, setTab] = useState<profileTabsType>("activity");
 
-  let profileRecord = props.profile?.record as unknown as ProfileViewDetailed;
+  let profileRecord = props.profile?.record as AppBskyActorProfile.Record;
   console.log(profileRecord);
 
+  if (!props.profile) return;
   return (
     <div
       className={`
         max-w-prose mx-auto w-full h-full
         flex flex-col
-        border border-border rounded-md
+        border border-border-light rounded-lg
         text-center px-3 sm:px-4 mt-8`}
     >
-      <div className="bg-test rounded-full h-16 w-16 mx-auto -mt-8" />
-      <h3 className="pt-2">
+      <Avatar
+        src={
+          profileRecord.avatar?.ref &&
+          blobRefToSrc(profileRecord.avatar?.ref, props.profile.did)
+        }
+        displayName={profileRecord.displayName}
+        className="mx-auto -mt-8"
+        giant
+      />
+      <h3 className="pt-2 leading-tight">
         {profileRecord.displayName
           ? profileRecord.displayName
           : `@${props.profile?.handle}`}
       </h3>
       {profileRecord.displayName && (
-        <div className="text-tertiary text-sm pb-1">
+        <div className="text-tertiary text-sm pb-1 italic">
           @{props.profile?.handle}
         </div>
       )}
diff --git a/components/Avatar.tsx b/components/Avatar.tsx
index bc9bb6a3..8efc20a3 100644
--- a/components/Avatar.tsx
+++ b/components/Avatar.tsx
@@ -3,12 +3,15 @@ import { AccountTiny } from "./Icons/AccountTiny";
 export const Avatar = (props: {
   src: string | undefined;
   displayName: string | undefined;
+  className?: string;
   tiny?: boolean;
+  large?: boolean;
+  giant?: boolean;
 }) => {
   if (props.src)
     return (
       <img
-        className={`${props.tiny ? "w-4 h-4" : "w-5 h-5"} rounded-full shrink-0 border border-border-light`}
+        className={`${props.tiny ? "w-4 h-4" : props.large ? "h-8 w-8" : props.giant ? "h-16 w-16" : "w-5 h-5"} rounded-full shrink-0 border border-border-light ${props.className}`}
         src={props.src}
         alt={
           props.displayName