diff --git a/apps/web/src/api/profile.ts b/apps/web/src/api/profile.ts
index 2ab213a0..780095ad 100644
--- a/apps/web/src/api/profile.ts
+++ b/apps/web/src/api/profile.ts
@@ -1,11 +1,16 @@
 import { client } from ".";
+import { Compatibility } from "../types/compatibility";
 import { Neighbour } from "../types/neighbour";
+import { Profile } from "../types/profile";
 import { Scrobble } from "../types/scrobble";
 
 export const getProfileByDid = async (did: string) => {
-  const response = await client.get("/xrpc/app.rocksky.actor.getProfile", {
-    params: { did },
-  });
+  const response = await client.get<Profile>(
+    "/xrpc/app.rocksky.actor.getProfile",
+    {
+      params: { did },
+    },
+  );
   return response.data;
 };
 
@@ -39,3 +44,16 @@ export const getActorNeighbours = async (did: string) => {
   );
   return response.data;
 };
+
+export const getActorCompatibility = async (did: string) => {
+  const response = await client.get<{ compatibility: Compatibility | null }>(
+    "/xrpc/app.rocksky.actor.getActorCompatibility",
+    {
+      params: { did },
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem("token")}`,
+      },
+    },
+  );
+  return response.data;
+};
diff --git a/apps/web/src/components/Stats/Stats.tsx b/apps/web/src/components/Stats/Stats.tsx
index a28df1a4..0923022f 100644
--- a/apps/web/src/components/Stats/Stats.tsx
+++ b/apps/web/src/components/Stats/Stats.tsx
@@ -27,27 +27,23 @@ export type StatsProps = {
 function Stats(props: StatsProps) {
   const { stats, mb } = props;
   return (
-    <Group mb={mb}>
+    <Group mb={mb} className="!mb-[0px]">
       <div className="mr-[20px]">
-        <LabelMedium className="!text-[var(--color-text-muted)]">
-          SCROBBLES
-        </LabelMedium>
+        <b className="!text-[var(--color-text-muted)] text-[13px]">SCROBBLES</b>
         <HeadingSmall margin={0} className="!text-[var(--color-text)]">
           {numeral(stats?.scrobbles).format("0,0")}
         </HeadingSmall>
       </div>
       <div className="mr-[20px]">
-        <LabelMedium className="!text-[var(--color-text-muted)]">
-          ARTISTS
-        </LabelMedium>
+        <b className="!text-[var(--color-text-muted)] text-[13px]">ARTISTS</b>
         <HeadingSmall margin={0} className="!text-[var(--color-text)]">
           {numeral(stats?.artists).format("0,0")}
         </HeadingSmall>
       </div>
-      <div className="mr-[20px]">
-        <LabelMedium className="!text-[var(--color-text-muted)]">
+      <div>
+        <b className="!text-[var(--color-text-muted)] text-[13px]">
           LOVED TRACKS
-        </LabelMedium>
+        </b>
         <HeadingSmall margin={0} className="!text-[var(--color-text)]">
           {numeral(stats?.lovedTracks).format("0,0")}
         </HeadingSmall>
diff --git a/apps/web/src/hooks/useGraph.tsx b/apps/web/src/hooks/useGraph.tsx
index e57b9eba..1262f803 100644
--- a/apps/web/src/hooks/useGraph.tsx
+++ b/apps/web/src/hooks/useGraph.tsx
@@ -35,14 +35,14 @@ export const useFollowsInfiniteQuery = (
   });
 
 export const useFollowersQuery = (
-  actor: string,
+  actor: string | undefined,
   limit: number,
   dids?: string[],
   cursor?: string,
 ) =>
   useQuery({
     queryKey: ["followers", actor, limit, dids, cursor],
-    queryFn: () => getFollowers(actor, limit, dids, cursor),
+    queryFn: () => getFollowers(actor!, limit, dids, cursor),
   });
 
 export const useFollowersInfiniteQuery = (
diff --git a/apps/web/src/hooks/useProfile.tsx b/apps/web/src/hooks/useProfile.tsx
index 563114f3..8a29526c 100644
--- a/apps/web/src/hooks/useProfile.tsx
+++ b/apps/web/src/hooks/useProfile.tsx
@@ -2,6 +2,7 @@ import { useQuery } from "@tanstack/react-query";
 import { useSetAtom } from "jotai";
 import { useEffect, useState } from "react";
 import {
+  getActorCompatibility,
   getActorNeighbours,
   getProfileByDid,
   getProfileStatsByDid,
@@ -38,6 +39,13 @@ export const useActorNeighboursQuery = (did: string) =>
     enabled: !!did,
   });
 
+export const useActorCompatibilityQuery = (did: string | undefine) =>
+  useQuery({
+    queryKey: ["profile", "compatibility", did],
+    queryFn: () => getActorCompatibility(did!),
+    enabled: !!did,
+  });
+
 function useProfile(token?: string | null) {
   const setProfile = useSetAtom(profileAtom);
   const [data, setData] = useState<string | null>(null);
diff --git a/apps/web/src/pages/profile/Profile.tsx b/apps/web/src/pages/profile/Profile.tsx
index 56717d66..db7dd436 100644
--- a/apps/web/src/pages/profile/Profile.tsx
+++ b/apps/web/src/pages/profile/Profile.tsx
@@ -73,8 +73,11 @@ function Profile(props: ProfileProps) {
       setIsSignInOpen(true);
       return;
     }
-    setFollows((prev) => new Set(prev).add(profile.data?.did));
-    followAccount(profile.data?.did);
+
+    if (!profile.data) return;
+
+    setFollows((prev) => new Set(prev).add(profile.data.did));
+    followAccount(profile.data.did);
   };
 
   const onUnfollow = () => {
@@ -82,12 +85,14 @@ function Profile(props: ProfileProps) {
       setIsSignInOpen(true);
       return;
     }
+    if (!profile.data) return;
+
     setFollows((prev) => {
       const newSet = new Set(prev);
-      newSet.delete(profile.data?.did);
+      newSet.delete(profile.data.did);
       return newSet;
     });
-    unfollowAccount(profile.data?.did);
+    unfollowAccount(profile.data.did);
   };
 
   useEffect(() => {
@@ -104,18 +109,26 @@ function Profile(props: ProfileProps) {
     }
     setFollows((prev) => {
       const newSet = new Set(prev);
+      if (!profile.data) return newSet;
       if (
         data.followers.some(
           (follower: { did: string }) => follower.did === currentDid,
         )
       ) {
-        newSet.add(profile.data?.did);
+        newSet.add(profile.data.did);
       } else {
-        newSet.delete(profile.data?.did);
+        newSet.delete(profile.data.did);
       }
       return newSet;
     });
-  }, [data, isLoading, currentDid, setFollows, profile.data?.did]);
+  }, [
+    data,
+    isLoading,
+    currentDid,
+    setFollows,
+    profile.data?.did,
+    profile.data,
+  ]);
 
   useEffect(() => {
     if (tab === undefined) {
@@ -213,7 +226,7 @@ function Profile(props: ProfileProps) {
           {(profile.data?.did !== localStorage.getItem("did") ||
             !localStorage.getItem("did")) && (
             <>
-              {!follows.has(profile.data?.did) && !isLoading && (
+              {!follows.has(profile.data?.did || "") && !isLoading && (
                 <Button
                   shape="pill"
                   size="compact"
@@ -238,7 +251,7 @@ function Profile(props: ProfileProps) {
                   Follow
                 </Button>
               )}
-              {follows.has(profile.data?.did) && !isLoading && (
+              {follows.has(profile.data?.did || "") && !isLoading && (
                 <Button
                   shape="pill"
                   size="compact"
diff --git a/apps/web/src/pages/profile/overview/Overview.tsx b/apps/web/src/pages/profile/overview/Overview.tsx
index cf212893..035d2a75 100644
--- a/apps/web/src/pages/profile/overview/Overview.tsx
+++ b/apps/web/src/pages/profile/overview/Overview.tsx
@@ -8,6 +8,7 @@ import RecentTracks from "./recenttracks";
 import TopAlbums from "./topalbums";
 import TopArtists from "./topartists";
 import TopTracks from "./toptracks";
+import Compatibility from "./compatibility";
 
 function Overview() {
   const { did } = useParams({ strict: false });
@@ -39,7 +40,12 @@ function Overview() {
 
   return (
     <>
-      {did && stats[did] && <Stats stats={stats[did]} />}
+      <div className="flex flex-row mb-[50px]">
+        {did && stats[did] && <Stats stats={stats[did]} />}
+        <div className="flex-1">
+          <Compatibility />
+        </div>
+      </div>
       <div className="mb-20">
         <RecentTracks />
       </div>
diff --git a/apps/web/src/pages/profile/overview/compatibility/Compatibility.tsx b/apps/web/src/pages/profile/overview/compatibility/Compatibility.tsx
new file mode 100644
index 00000000..9f66debc
--- /dev/null
+++ b/apps/web/src/pages/profile/overview/compatibility/Compatibility.tsx
@@ -0,0 +1,116 @@
+import { useParams } from "@tanstack/react-router";
+import {
+  useActorCompatibilityQuery,
+  useProfileByDidQuery,
+} from "../../../../hooks/useProfile";
+import { Avatar } from "baseui/avatar";
+import { Link } from "@tanstack/react-router";
+
+function Compatibility() {
+  const { did } = useParams({ strict: false });
+  const profile = useProfileByDidQuery(did!);
+  const currentUser = useProfileByDidQuery(localStorage.getItem("did") || "");
+  const { data, isLoading } = useActorCompatibilityQuery(profile.data?.did);
+  const currentUserDid = localStorage.getItem("did");
+
+  const getBorderColor = (percentage: number | undefined) => {
+    if (!percentage) return "#666666";
+    if (percentage >= 80) return "#19d825"; // Green
+    if (percentage >= 60) return "#ffd700"; // Gold
+    if (percentage >= 40) return "#ff8c00"; // Orange
+    return "#ff4500"; // Red
+  };
+
+  const percentage = data?.compatibility?.compatibilityPercentage || 0;
+  const borderColor = getBorderColor(percentage);
+
+  return (
+    <>
+      {currentUserDid &&
+        data &&
+        data.compatibility &&
+        currentUserDid != profile.data?.did &&
+        !isLoading && (
+          <div className="mt-[20px] ml-[19px] flex flex-row items-center">
+            <div
+              style={{
+                position: "relative",
+                width: "54px",
+                height: "54px",
+                flexShrink: 0,
+              }}
+            >
+              <div
+                style={{
+                  position: "absolute",
+                  inset: 0,
+                  borderRadius: "50%",
+                  background: `conic-gradient(${borderColor} 0deg ${(percentage / 100) * 360}deg, transparent ${(percentage / 100) * 360}deg 360deg)`,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                <div
+                  style={{
+                    width: "48px",
+                    height: "48px",
+                    borderRadius: "50%",
+                    background: "var(--color-background)",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                  }}
+                >
+                  <Avatar
+                    name={currentUser.data?.displayName}
+                    src={currentUser.data?.avatar}
+                    size="46px"
+                  />
+                </div>
+              </div>
+            </div>
+            <div className="ml-[10px] text-[14px]">
+              <div className="!text-[var(--color-text)]">
+                Your compatibility with <b>@{profile.data?.handle}</b> is{" "}
+                <span style={{ color: borderColor }}>
+                  <b>{data.compatibility?.compatibilityLevel}</b>
+                </span>
+              </div>
+              <div className="!text-[var(--color-text)] mt-[5px]">
+                You both listen to{" "}
+                {(data.compatibility?.topSharedDetailedArtists || []).map(
+                  (artist, index) => (
+                    <div key={artist.id} className="inline">
+                      <Link
+                        to={
+                          `/${artist.uri.split("at://")[1].replace("app.rocksky.", "")}` as string
+                        }
+                        className="no-underline"
+                      >
+                        <span className="mt-[0px] mb-[0px] text-[14px] !text-[var(--color-primary)]">
+                          {artist.name}
+                        </span>
+                      </Link>
+                      {index !==
+                        (data.compatibility?.topSharedDetailedArtists || [])
+                          .length -
+                          1 &&
+                        (index ===
+                        (data.compatibility?.topSharedDetailedArtists || [])
+                          .length -
+                          2
+                          ? " and "
+                          : ", ")}
+                    </div>
+                  ),
+                )}
+              </div>
+            </div>
+          </div>
+        )}
+    </>
+  );
+}
+
+export default Compatibility;
diff --git a/apps/web/src/pages/profile/overview/compatibility/index.tsx b/apps/web/src/pages/profile/overview/compatibility/index.tsx
new file mode 100644
index 00000000..02775768
--- /dev/null
+++ b/apps/web/src/pages/profile/overview/compatibility/index.tsx
@@ -0,0 +1,3 @@
+import Compatibility from "./Compatibility";
+
+export default Compatibility;
diff --git a/apps/web/src/types/compatibility.ts b/apps/web/src/types/compatibility.ts
new file mode 100644
index 00000000..c124c9b3
--- /dev/null
+++ b/apps/web/src/types/compatibility.ts
@@ -0,0 +1,17 @@
+export type Compatibility = {
+  compatibilityLevel: number;
+  compatibilityPercentage: number;
+  sharedArtists: number;
+  topSharedArtists: string[];
+  topSharedDetailedArtists: {
+    id: string;
+    name: string;
+    picture: string;
+    uri: string;
+    user1Rank: number;
+    user2Rank: number;
+    weight: number;
+  }[];
+  user1ArtistCount: number;
+  user2ArtistCount: number;
+};
diff --git a/apps/web/src/types/profile.ts b/apps/web/src/types/profile.ts
new file mode 100644
index 00000000..0f5dec43
--- /dev/null
+++ b/apps/web/src/types/profile.ts
@@ -0,0 +1,54 @@
+export type Profile = {
+  id: string;
+  did: string;
+  handle: string;
+  displayName: string;
+  avatar: string;
+  createdAt: string;
+  spotifyUser: {
+    id: string;
+    xataVersion: number;
+    email: string;
+    userId: string;
+    isBetaUser: boolean;
+    spotifyAppId: string;
+    createdAt: string;
+    updatedAt: string;
+  };
+  spotifyToken: {
+    id: string;
+    xataVersion: number;
+    userId: string;
+    spotifyAppId: string;
+    createdAt: string;
+    updatedAt: string;
+  };
+  spotifyConnected: boolean;
+  googledrive: {
+    id: string;
+    email: string;
+    isBetaUser: boolean;
+    userId: string;
+    xataVersion: number;
+    createdAt: string;
+    updatedAt: string;
+  };
+  dropbox: {
+    id: string;
+    email: string;
+    isBetaUser: boolean;
+    userId: string;
+    xataVersion: number;
+    createdAt: string;
+    updatedAt: string;
+  };
+  googleDrive: {
+    id: string;
+    email: string;
+    isBetaUser: boolean;
+    userId: string;
+    xataVersion: number;
+    createdAt: string;
+    updatedAt: string;
+  };
+};