diff --git a/apps/marketing/src/app/(marketing)/oss-friends/page.tsx b/apps/marketing/src/app/(marketing)/oss-friends/page.tsx
new file mode 100644
index 000000000..4bd038ec2
--- /dev/null
+++ b/apps/marketing/src/app/(marketing)/oss-friends/page.tsx
@@ -0,0 +1,204 @@
+'use client';
+
+import Image from 'next/image';
+import Link from 'next/link';
+
+import { Variants, motion } from 'framer-motion';
+
+import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardContent, CardTitle } from '@documenso/ui/primitives/card';
+
+import backgroundPattern from '~/assets/background-pattern.png';
+
+const OSSFriends = [
+  {
+    name: 'BoxyHQ',
+    description:
+      'BoxyHQ’s suite of APIs for security and privacy helps engineering teams build and ship compliant cloud applications faster.',
+    href: 'https://boxyhq.com',
+  },
+  {
+    name: 'Cal.com',
+    description:
+      'Cal.com is a scheduling tool that helps you schedule meetings without the back-and-forth emails.',
+    href: 'https://cal.com',
+  },
+  {
+    name: 'Crowd.dev',
+    description:
+      'Centralize community, product, and customer data to understand which companies are engaging with your open source project.',
+    href: 'https://www.crowd.dev',
+  },
+  {
+    name: 'Documenso',
+    description:
+      'The Open-Source DocuSign Alternative. We aim to earn your trust by enabling you to self-host the platform and examine its inner workings.',
+    href: 'https://documenso.com',
+  },
+  {
+    name: 'Erxes',
+    description:
+      'The Open-Source HubSpot Alternative. A single XOS enables to create unique and life-changing experiences ​​that work for all types of business.',
+    href: 'https://erxes.io',
+  },
+  {
+    name: 'Formbricks',
+    description:
+      'Survey granular user segments at any point in the user journey. Gather up to 6x more insights with targeted micro-surveys. All open-source.',
+    href: 'https://formbricks.com',
+  },
+  {
+    name: 'Forward Email',
+    description:
+      'Free email forwarding for custom domains. For 6 years and counting, we are the go-to email service for thousands of creators, developers, and businesses.',
+    href: 'https://forwardemail.net',
+  },
+  {
+    name: 'GitWonk',
+    description:
+      'GitWonk is an open-source technical documentation tool, designed and built focusing on the developer experience.',
+    href: 'https://gitwonk.com',
+  },
+  {
+    name: 'Hanko',
+    description:
+      'Open-source authentication and user management for the passkey era. Integrated in minutes, for web and mobile apps.',
+    href: 'https://www.hanko.io',
+  },
+  {
+    name: 'HTMX',
+    description:
+      'HTMX is a dependency-free JavaScript library that allows you to access AJAX, CSS Transitions, WebSockets, and Server Sent Events directly in HTML.',
+    href: 'https://htmx.org',
+  },
+  {
+    name: 'Infisical',
+    description:
+      'Open source, end-to-end encrypted platform that lets you securely manage secrets and configs across your team, devices, and infrastructure.',
+    href: 'https://infisical.com',
+  },
+  {
+    name: 'Novu',
+    description:
+      'The open-source notification infrastructure for developers. Simple components and APIs for managing all communication channels in one place.',
+    href: 'https://novu.co',
+  },
+  {
+    name: 'OpenBB',
+    description:
+      'Democratizing investment research through an open source financial ecosystem. The OpenBB Terminal allows everyone to perform investment research, from everywhere.',
+    href: 'https://openbb.co',
+  },
+  {
+    name: 'Sniffnet',
+    description:
+      'Sniffnet is a network monitoring tool to help you easily keep track of your Internet traffic.',
+    href: 'https://www.sniffnet.net',
+  },
+  {
+    name: 'Typebot',
+    description:
+      'Typebot gives you powerful blocks to create unique chat experiences. Embed them anywhere on your apps and start collecting results like magic.',
+    href: 'https://typebot.io',
+  },
+  {
+    name: 'Webiny',
+    description:
+      'Open-source enterprise-grade serverless CMS. Own your data. Scale effortlessly. Customize everything.',
+    href: 'https://www.webiny.com',
+  },
+  {
+    name: 'Webstudio',
+    description: 'Webstudio is an open source alternative to Webflow',
+    href: 'https://webstudio.is',
+  },
+];
+
+const ContainerVariants: Variants = {
+  initial: {
+    opacity: 0,
+  },
+  animate: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.075,
+    },
+  },
+};
+
+const CardVariants: Variants = {
+  initial: {
+    opacity: 0,
+    y: 50,
+  },
+  animate: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: 0.5,
+    },
+  },
+};
+
+const randomDegrees = () => {
+  const degrees = [45, 120, -140, -45];
+
+  return degrees[Math.floor(Math.random() * degrees.length)];
+};
+
+export default function OSSFriendsPage() {
+  return (
+    <div className="relative mt-12">
+      <div className="text-center">
+        <h1 className="text-3xl font-bold lg:text-5xl">
+          Our <span title="Open Source Software">OSS</span> Friends
+        </h1>
+
+        <p className="mx-auto mt-4 max-w-[55ch] text-lg leading-normal text-[#31373D]">
+          We love open source and so should you, below you can find a list of our friends who are
+          just as passionate about open source as we are.
+        </p>
+      </div>
+
+      <motion.div
+        className="mt-12 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3"
+        variants={ContainerVariants}
+        initial="initial"
+        animate="animate"
+      >
+        {OSSFriends.map((friend, index) => (
+          <motion.div key={index} className="h-full w-full" variants={CardVariants}>
+            <Card
+              className="h-full"
+              degrees={randomDegrees()}
+              gradient={index % 2 === 0}
+              spotlight={index % 2 !== 0}
+            >
+              <CardContent className="flex h-full flex-col p-6">
+                <CardTitle>
+                  <Link href={friend.href}>{friend.name}</Link>
+                </CardTitle>
+
+                <p className="mt-4 flex-1 text-sm text-slate-700">{friend.description}</p>
+
+                <div className="mt-8">
+                  <Link target="_blank" href={friend.href}>
+                    <Button>Learn more</Button>
+                  </Link>
+                </div>
+              </CardContent>
+            </Card>
+          </motion.div>
+        ))}
+      </motion.div>
+
+      <div className="absolute inset-0 -z-10 flex items-start justify-center">
+        <Image
+          src={backgroundPattern}
+          alt="background pattern"
+          className="-mr-[15vw] -mt-[15vh] h-full max-h-[150vh] scale-125 object-cover md:-mr-[50vw] md:scale-150 lg:scale-[175%]"
+        />
+      </div>
+    </div>
+  );
+}