diff --git a/projects/16-open-qf/src/site/components/card/index.jsx b/projects/16-open-qf/src/site/components/card/index.jsx
index bd374db74..7f6d8bfaa 100644
--- a/projects/16-open-qf/src/site/components/card/index.jsx
+++ b/projects/16-open-qf/src/site/components/card/index.jsx
@@ -8,7 +8,8 @@ export default function Card(props) {
         "border border-fill-bg-primary",
         "bg-fill-bg-primary",
         "shadow-shadow-card-default hover:shadow-shadow-card-hover",
-        "[&_.osn-card]:shadow-none [&_.osn-card]:bg-transparent",
+        "[&_.osn-card]:shadow-none [&_.osn-card]:bg-transparent [&_.osn-card]:h-full [&_.osn-card]:w-full",
+        props.className,
       )}
     >
       <CardBase bordered={false} {...props}></CardBase>
diff --git a/projects/16-open-qf/src/site/components/card/round.jsx b/projects/16-open-qf/src/site/components/card/round.jsx
index d4ca27e78..4244da4e9 100644
--- a/projects/16-open-qf/src/site/components/card/round.jsx
+++ b/projects/16-open-qf/src/site/components/card/round.jsx
@@ -5,6 +5,31 @@ import Card from ".";
 import { Button } from "../button";
 import Link from "next/link";
 
+export function RoundCardMetadata({ data }) {
+  return (
+    <div
+      className={cn(
+        "flex items-baseline justify-between",
+        "max-sm:block max-sm:space-y-4",
+      )}
+    >
+      <div>
+        <Link href={`/project/${data.id}`} className="hover:underline">
+          <h3 className="text20semibold text-text-primary">{data.title}</h3>
+        </Link>
+        <p className="mt-1 text14medium text-text-link">
+          {dayjs(data.startDate).format("YYYY/MM/DD")} -
+          {dayjs(data.endDate).format("YYYY/MM/DD")}
+        </p>
+      </div>
+
+      <div>
+        <Tag>{data.type}</Tag>
+      </div>
+    </div>
+  );
+}
+
 export default function RoundCard({ data = {} }) {
   return (
     <div>
@@ -17,33 +42,9 @@ export default function RoundCard({ data = {} }) {
         head={
           <>
             <div>
-              <div
-                className={cn(
-                  "flex items-baseline justify-between",
-                  "max-sm:block max-sm:space-y-4",
-                )}
-              >
-                <div>
-                  <Link
-                    href={`/explore/${data.id}`}
-                    className="hover:underline"
-                  >
-                    <h3 className="text20semibold text-text-primary">
-                      {data.title}
-                    </h3>
-                  </Link>
-                  <p className="mt-1 text14medium text-text-link">
-                    {dayjs(data.startDate).format("YYYY/MM/DD")} -
-                    {dayjs(data.endDate).format("YYYY/MM/DD")}
-                  </p>
-                </div>
-
-                <div>
-                  <Tag>{data.type}</Tag>
-                </div>
-              </div>
+              <RoundCardMetadata data={data} />
 
-              <p className="mt-4 text-text-secondary text14medium">
+              <p className="mt-4 text-text-secondary text14medium line-clamp-3">
                 {data.description}
               </p>
             </div>
diff --git a/projects/16-open-qf/src/site/components/project/info.jsx b/projects/16-open-qf/src/site/components/project/info.jsx
new file mode 100644
index 000000000..19f69fc04
--- /dev/null
+++ b/projects/16-open-qf/src/site/components/project/info.jsx
@@ -0,0 +1,59 @@
+import Card from "@/components/card";
+import { Button } from "@/components/button";
+import { RoundCardMetadata } from "@/components/card/round";
+
+export default function ExploreProjectInfo({ data }) {
+  return (
+    <div className="flex gap-5 max-sm:flex-col">
+      <Card
+        className="flex-1"
+        head={
+          <div>
+            <RoundCardMetadata data={data} />
+
+            <p className="mt-4 text-text-secondary text14medium">
+              {data.description}
+            </p>
+          </div>
+        }
+      >
+        <div className="flex justify-between gap-4">
+          <div className="space-y-1">
+            <div className="text14medium text-text-tertiary">
+              Program Funders
+            </div>
+            <div className="text16semibold text-text-primary">
+              {data.programFunders}
+            </div>
+          </div>
+          <div className="flex items-end justify-end">
+            <Button>Apply</Button>
+          </div>
+        </div>
+      </Card>
+
+      <div className="w-[392px] max-w-full">
+        <Card className="text-center h-full">
+          <div className="w-full h-full flex gap-2 flex-col items-center">
+            <div className="">
+              <div className="text14medium text-text-tertiary">
+                Matching Pool
+              </div>
+              <div className="text24bold text-text-primary">
+                {data.matchingPool} DOT
+              </div>
+            </div>
+            <div>
+              <div className="text14medium text-text-tertiary">
+                Total Contributors
+              </div>
+              <div className="text24bold text-text-primary">
+                {data.contributors}
+              </div>
+            </div>
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+}
diff --git a/projects/16-open-qf/src/site/fixtures/roundList.js b/projects/16-open-qf/src/site/fixtures/roundList.js
index 179185467..768b0177a 100644
--- a/projects/16-open-qf/src/site/fixtures/roundList.js
+++ b/projects/16-open-qf/src/site/fixtures/roundList.js
@@ -13,14 +13,14 @@ export const ROUND_LIST_DATA = [
   },
   {
     id: 2,
-    title: "Web3 Community and Education",
-    startDate: "2023/12/15",
-    endDate: "2023/12/31",
-    type: "Quadratic Funding",
+    title: "Project 2",
+    startDate: "2023/12/12",
+    endDate: "2023/12/28",
+    type: "Type",
     description:
-      "Grants focused on non-software projects pushing Web3 space forward, including growing new communities, providing educational resources, creating content, protecting users, and working on inclusion/diversity/advocacy. Applications submitted by November 8th are guaranteed to be reviewed before the start of the round.",
-    matchingPool: 100000, // TODO: chain settings
-    contributors: 100,
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque. Diam maecenas sed enim ut sem viverra aliquet eget sit. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Ridiculus mus mauris vitae ultricies. Cursus euismod quis viverra nibh cras pulvinar. Suspendisse ultrices gravida dictum fusce ut placerat. Nunc congue nisi vitae suscipit tellus mauris a diam maecenas. Venenatis a condimentum vitae sapien pellentesque. Congue mauris rhoncus aenean vel elit scelerisque mauris. Varius morbi enim nunc faucibus a. In est ante in nibh mauris cursus mattis molestie. Luctus venenatis lectus magna fringilla urna porttitor rhoncus. Aliquam sem et tortor consequat id porta nibh venenatis. Eget magna fermentum iaculis eu non diam phasellus. Vulputate eu scelerisque felis imperdiet. Ornare quam viverra orci sagittis. Nisi porta lorem mollis aliquam ut porttitor.",
+    matchingPool: 1130000, // TODO: chain settings
+    contributors: 135,
     programFunders: "Polkadot",
   },
   {
diff --git a/projects/16-open-qf/src/site/pages/explore/[id].jsx b/projects/16-open-qf/src/site/pages/project/[id].jsx
similarity index 74%
rename from projects/16-open-qf/src/site/pages/explore/[id].jsx
rename to projects/16-open-qf/src/site/pages/project/[id].jsx
index 2826d14c2..0fa537965 100644
--- a/projects/16-open-qf/src/site/pages/explore/[id].jsx
+++ b/projects/16-open-qf/src/site/pages/project/[id].jsx
@@ -2,8 +2,9 @@ import ListLayout from "@/components/layouts/listLayout";
 import { ROUND_LIST_DATA } from "@/fixtures/roundList";
 import { find } from "lodash-es";
 import { useRouter } from "next/router";
+import ExploreProjectInfo from "@/components/project/info";
 
-export default function ExplorePage() {
+export default function ProjectPage() {
   const router = useRouter();
   const id = Number(router.query.id);
 
@@ -11,9 +12,7 @@ export default function ExplorePage() {
 
   return (
     <ListLayout title="Explore Projects" description="How OpenQF Works">
-      <div>
-        id: {id} {data.title}
-      </div>
+      <ExploreProjectInfo data={data} />
     </ListLayout>
   );
 }