diff --git a/apps/web/src/api/profile.ts b/apps/web/src/api/profile.ts
index 7ca41a10..2ab213a0 100644
--- a/apps/web/src/api/profile.ts
+++ b/apps/web/src/api/profile.ts
@@ -1,4 +1,5 @@
 import { client } from ".";
+import { Neighbour } from "../types/neighbour";
 import { Scrobble } from "../types/scrobble";
 
 export const getProfileByDid = async (did: string) => {
@@ -28,3 +29,13 @@ export const getRecentTracksByDid = async (
   );
   return response.data.scrobbles || [];
 };
+
+export const getActorNeighbours = async (did: string) => {
+  const response = await client.get<{ neighbours: Neighbour[] }>(
+    "/xrpc/app.rocksky.actor.getActorNeighbours",
+    {
+      params: { did },
+    },
+  );
+  return response.data;
+};
diff --git a/apps/web/src/hooks/useProfile.tsx b/apps/web/src/hooks/useProfile.tsx
index 385e4c89..563114f3 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 {
+  getActorNeighbours,
   getProfileByDid,
   getProfileStatsByDid,
   getRecentTracksByDid,
@@ -30,6 +31,13 @@ export const useRecentTracksByDidQuery = (did: string, offset = 0, size = 10) =>
     enabled: !!did,
   });
 
+export const useActorNeighboursQuery = (did: string) =>
+  useQuery({
+    queryKey: ["profile", "neighbours", did],
+    queryFn: () => getActorNeighbours(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 a54ee8c8..56717d66 100644
--- a/apps/web/src/pages/profile/Profile.tsx
+++ b/apps/web/src/pages/profile/Profile.tsx
@@ -29,6 +29,7 @@ import {
 import Follows from "./follows";
 import Followers from "./followers";
 import { activeTabAtom } from "../../atoms/tab";
+import Circles from "./circles";
 
 const Group = styled.div`
   display: flex;
@@ -91,10 +92,11 @@ function Profile(props: ProfileProps) {
 
   useEffect(() => {
     if (!props.activeKey) {
+      setActiveKey("0");
       return;
     }
     setActiveKey(_.get(props, "activeKey", "0").split("/")[0]);
-  }, [props.activeKey]);
+  }, [props.activeKey, setActiveKey, props]);
 
   useEffect(() => {
     if (!data || isLoading) {
@@ -113,7 +115,7 @@ function Profile(props: ProfileProps) {
       }
       return newSet;
     });
-  }, [data, isLoading]);
+  }, [data, isLoading, currentDid, setFollows, profile.data?.did]);
 
   useEffect(() => {
     if (tab === undefined) {
@@ -121,7 +123,7 @@ function Profile(props: ProfileProps) {
     }
 
     setActiveKey(1);
-  }, [tab]);
+  }, [tab, setActiveKey]);
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: <reason>want to run only on profile.data changes</reason>
   useEffect(() => {
@@ -339,6 +341,19 @@ function Profile(props: ProfileProps) {
           >
             <Follows />
           </Tab>
+          <Tab
+            title="Circles"
+            overrides={{
+              Tab: {
+                style: {
+                  color: "var(--color-text)",
+                  backgroundColor: "var(--color-background) !important",
+                },
+              },
+            }}
+          >
+            <Circles />
+          </Tab>
           <Tab
             title="Loved Tracks"
             overrides={{
diff --git a/apps/web/src/pages/profile/circles/Circles.tsx b/apps/web/src/pages/profile/circles/Circles.tsx
new file mode 100644
index 00000000..89c1c3c2
--- /dev/null
+++ b/apps/web/src/pages/profile/circles/Circles.tsx
@@ -0,0 +1,193 @@
+import { HeadingSmall, LabelMedium, LabelSmall } from "baseui/typography";
+import {
+  useActorNeighboursQuery,
+  useProfileByDidQuery,
+} from "../../../hooks/useProfile";
+import { Link, useParams } from "@tanstack/react-router";
+import { Neighbour } from "../../../types/neighbour";
+import { Avatar } from "baseui/avatar";
+import { IconCheck, IconPlus } from "@tabler/icons-react";
+import { Button } from "baseui/button";
+import { useAtom } from "jotai";
+import { followsAtom } from "../../../atoms/follows";
+import {
+  useFollowAccountMutation,
+  useUnfollowAccountMutation,
+} from "../../../hooks/useGraph";
+import { useState } from "react";
+import SignInModal from "../../../components/SignInModal";
+import { activeTabAtom } from "../../../atoms/tab";
+
+function Circles() {
+  const [, setActiveKey] = useAtom(activeTabAtom);
+  const [follows, setFollows] = useAtom(followsAtom);
+  const [isSignInOpen, setIsSignInOpen] = useState(false);
+  const { did } = useParams({ strict: false });
+  const profile = useProfileByDidQuery(did!);
+  const { data, isLoading } = useActorNeighboursQuery(did!);
+  const { mutate: followAccount } = useFollowAccountMutation();
+  const { mutate: unfollowAccount } = useUnfollowAccountMutation();
+
+  const onFollow = (followerDid: string) => {
+    if (!localStorage.getItem("token")) {
+      setIsSignInOpen(true);
+      return;
+    }
+    setFollows((prev) => new Set(prev).add(followerDid));
+    followAccount(followerDid);
+  };
+
+  const onUnfollow = (followerDid: string) => {
+    if (!localStorage.getItem("token")) {
+      setIsSignInOpen(true);
+      return;
+    }
+    setFollows((prev) => {
+      const newSet = new Set(prev);
+      newSet.delete(followerDid);
+      return newSet;
+    });
+    unfollowAccount(followerDid);
+  };
+
+  return (
+    <>
+      <HeadingSmall className="!text-[var(--color-text)] mb-[15px]">
+        Circles
+      </HeadingSmall>
+      <p>
+        People on Rocksky with similar music taste to @{profile.data?.handle}
+      </p>
+      {!isLoading && (
+        <div className="mt-[40px]">
+          {data?.neighbours.map((neighbour: Neighbour) => (
+            <div
+              key={neighbour.did}
+              className="flex items-start justify-between gap-2 mb-[40px]"
+            >
+              <div className="flex items-center gap-2">
+                <Link
+                  to={`/profile/${neighbour.handle}` as string}
+                  className="no-underline mt-[10px]"
+                  onClick={() => setActiveKey(0)}
+                >
+                  <Avatar
+                    src={neighbour.avatar}
+                    name={neighbour.displayName}
+                    size={"60px"}
+                  />
+                </Link>
+                <div className="ml-[16px]">
+                  <div className="flex ">
+                    <Link
+                      to={`/profile/${neighbour.handle}` as string}
+                      className="no-underline"
+                      onClick={() => setActiveKey(0)}
+                    >
+                      <LabelMedium
+                        marginTop={"0px"}
+                        className="!text-[var(--color-text)]"
+                      >
+                        {neighbour.displayName}
+                      </LabelMedium>
+                    </Link>
+                    <a
+                      href={`https://bsky.app/profile/${neighbour.handle}`}
+                      className="no-underline text-[var(--color-primary)] ml-[5px]"
+                      target="_blank"
+                    >
+                      <LabelSmall className="!text-[var(--color-primary)] mt-[3px] mb-[5px]">
+                        @{neighbour.handle}
+                      </LabelSmall>
+                    </a>
+                  </div>
+                  <p className="mt-[0px] mb-[0px] text-[14px]">
+                    They both listen to{" "}
+                    {neighbour.topSharedArtistsDetails.map((artist, index) => (
+                      <div key={artist.id} className="inline">
+                        <a
+                          href={`/${artist.uri.split("at://")[1].replace("app.rocksky.", "")}`}
+                          className="no-underline"
+                        >
+                          <span className="mt-[0px] mb-[0px] text-[14px] !text-[var(--color-primary)]">
+                            {artist.name}
+                          </span>
+                        </a>
+                        {index !==
+                          neighbour.topSharedArtistsDetails.length - 1 &&
+                          (index ===
+                          neighbour.topSharedArtistsDetails.length - 2
+                            ? " and "
+                            : ", ")}
+                      </div>
+                    ))}
+                  </p>
+                </div>
+              </div>
+              {(neighbour.did !== localStorage.getItem("did") ||
+                !localStorage.getItem("did")) && (
+                <div className="ml-[10px] mt-[10px]">
+                  {!follows.has(neighbour.did) && (
+                    <Button
+                      shape="pill"
+                      size="mini"
+                      startEnhancer={<IconPlus size={16} />}
+                      onClick={() => onFollow(neighbour.did)}
+                      overrides={{
+                        BaseButton: {
+                          style: {
+                            minWidth: "90px",
+                            backgroundColor: "#ff2876",
+                            ":hover": {
+                              backgroundColor: "#ff2876",
+                            },
+                            ":focus": {
+                              backgroundColor: "#ff2876",
+                            },
+                          },
+                        },
+                      }}
+                    >
+                      Follow
+                    </Button>
+                  )}
+                  {follows.has(neighbour.did) && (
+                    <Button
+                      shape="pill"
+                      size="mini"
+                      startEnhancer={<IconCheck size={16} />}
+                      onClick={() => onUnfollow(neighbour.did)}
+                      overrides={{
+                        BaseButton: {
+                          style: {
+                            backgroundColor: "var(--color-default-button)",
+                            color: "var(--color-text)",
+                            ":hover": {
+                              backgroundColor: "var(--color-default-button)",
+                            },
+                            ":focus": {
+                              backgroundColor: "var(--color-default-button)",
+                            },
+                          },
+                        },
+                      }}
+                    >
+                      Following
+                    </Button>
+                  )}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+      <SignInModal
+        isOpen={isSignInOpen}
+        onClose={() => setIsSignInOpen(false)}
+        follow
+      />
+    </>
+  );
+}
+
+export default Circles;
diff --git a/apps/web/src/pages/profile/circles/index.tsx b/apps/web/src/pages/profile/circles/index.tsx
new file mode 100644
index 00000000..c0770ec3
--- /dev/null
+++ b/apps/web/src/pages/profile/circles/index.tsx
@@ -0,0 +1,3 @@
+import Circles from "./Circles";
+
+export default Circles;
diff --git a/apps/web/src/pages/profile/followers/Followers.tsx b/apps/web/src/pages/profile/followers/Followers.tsx
index ef44131e..63d3bc67 100644
--- a/apps/web/src/pages/profile/followers/Followers.tsx
+++ b/apps/web/src/pages/profile/followers/Followers.tsx
@@ -24,7 +24,7 @@ function Followers() {
   const { did } = useParams({ strict: false });
   const profile = useProfileByDidQuery(did!);
   const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
-    useFollowersInfiniteQuery(profile.data?.did!, 20);
+    useFollowersInfiniteQuery(profile.data?.did, 20);
   const { mutate: followAccount } = useFollowAccountMutation();
   const { mutate: unfollowAccount } = useUnfollowAccountMutation();
 
diff --git a/apps/web/src/types/neighbour.ts b/apps/web/src/types/neighbour.ts
new file mode 100644
index 00000000..423645cb
--- /dev/null
+++ b/apps/web/src/types/neighbour.ts
@@ -0,0 +1,17 @@
+export type Neighbour = {
+  id: string;
+  avatar: string;
+  did: string;
+  displayName: string;
+  handle: string;
+  sharedArtistsCount: number;
+  similarityScore: number;
+  topSharedArtistNames: string[];
+  topSharedArtistsDetails: {
+    id: string;
+    name: string;
+    picture: string;
+    uri: string;
+  }[];
+  userId: string;
+};