diff --git a/src/app/follow/page.tsx b/src/app/follow/page.tsx
new file mode 100644
index 0000000..59f37d1
--- /dev/null
+++ b/src/app/follow/page.tsx
@@ -0,0 +1,46 @@
+import { ProjectSection } from "@/components/ProjectSection";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { getProjectCardData } from "@/lib/data/projectQuery";
+import { createSupabaseClient } from "@/lib/supabase/serverComponentClient";
+import { getFollowByUserId } from "@/lib/data/followQuery";
+
+export default async function FollowPage() {
+  const supabase = createSupabaseClient();
+  const { data: user, error: userError } = await supabase.auth.getUser();
+
+  if (userError || !user) {
+    throw new Error(userError?.message || "Unknown error");
+  }
+
+  const { data: followsProjects, error: followsProjectsError } = await getFollowByUserId(supabase, user!.user.id);
+
+  if (followsProjectsError) {
+    throw new Error(followsProjectsError.message || "Unknown error");
+  }
+
+  const projectIdList: string[] = followsProjects.map((follow) => follow.project_id);
+
+  const { data: projectsData, error: projectsDataError } = await getProjectCardData(supabase, projectIdList);
+
+  if (projectsDataError) {
+    throw new Error(projectsDataError || "Unknown error");
+  }
+
+  return (
+    <div className="container max-w-screen-xl my-5">
+      <div>
+        <Card>
+          <CardHeader>
+            <CardTitle>Your favorite projects</CardTitle>
+            <CardDescription>Found {projectsData?.length ?? 0} projects!</CardDescription>
+          </CardHeader>
+          <Separator className="my-3" />
+          <CardContent>
+            <ProjectSection projectsData={projectsData} />
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/navigationBar/AuthenticatedComponents.tsx b/src/components/navigationBar/AuthenticatedComponents.tsx
index 41ed528..3012454 100644
--- a/src/components/navigationBar/AuthenticatedComponents.tsx
+++ b/src/components/navigationBar/AuthenticatedComponents.tsx
@@ -37,7 +37,9 @@ export const AuthenticatedComponents = ({ uid, avatarUrl }: AuthenticatedCompone
           </span>
         </div>
       </Link>
-      <Heart />
+      <Link href="/follow">
+        <Heart />
+      </Link>
       <Link href={"/portfolio/" + uid}>
         <Wallet className="cursor-pointer" />
       </Link>
diff --git a/src/lib/data/followQuery.ts b/src/lib/data/followQuery.ts
index 63f2e95..251a539 100644
--- a/src/lib/data/followQuery.ts
+++ b/src/lib/data/followQuery.ts
@@ -9,6 +9,10 @@ export function getFollow(client: SupabaseClient, user_id: string, project_id: n
     .maybeSingle();
 }
 
+export function getFollowByUserId(client: SupabaseClient, user_id: string) {
+  return client.from("follow").select("id, project_id, user_id, created_at").eq("user_id", user_id);
+}
+
 export async function insertFollow(client: SupabaseClient, user_id: string, project_id: number) {
   const { error } = await client.from("follow").insert({ user_id, project_id }).select();