diff --git a/.env.example b/.env.example
index a9d155aa26..7303185128 100644
--- a/.env.example
+++ b/.env.example
@@ -77,3 +77,5 @@ REACT_APP_GRANT_EXPLORER=https://explorer.gitcoin.co
 # Coingecko
 REACT_APP_COINGECKO_API_KEY=
 # ---------------------------
+
+REACT_APP_STAKING_APP=https://staking-hub-mu.vercel.app
diff --git a/packages/grant-explorer/public/index.html b/packages/grant-explorer/public/index.html
index 1347db6a63..8b8968e7c1 100644
--- a/packages/grant-explorer/public/index.html
+++ b/packages/grant-explorer/public/index.html
@@ -40,11 +40,14 @@
     -->
 
     <script>
-      window.intercomSettings = {
-        api_base: "https://api-iam.intercom.io",
-        app_id: "%REACT_APP_INTERCOM_APP_ID%",
-      };
-      (function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',w.intercomSettings);}else{var d=document;var i=function(){i.c(arguments);};i.q=[];i.c=function(args){i.q.push(args);};w.Intercom=i;var l=function(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/' + window.intercomSettings.app_id;var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);};if(document.readyState==='complete'){l();}else if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();
+      // Only initialize Intercom if not in development mode
+      if ("%NODE_ENV%" !== "development") {
+        window.intercomSettings = {
+          api_base: "https://api-iam.intercom.io",
+          app_id: "%REACT_APP_INTERCOM_APP_ID%",
+        };
+        (function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',w.intercomSettings);}else{var d=document;var i=function(){i.c(arguments);};i.q=[];i.c=function(args){i.q.push(args);};w.Intercom=i;var l=function(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/' + window.intercomSettings.app_id;var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);};if(document.readyState==='complete'){l();}else if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();
+      }
     </script>
   </body>
 </html>
diff --git a/packages/grant-explorer/src/datadog.tsx b/packages/grant-explorer/src/datadog.tsx
index 638b66d254..a40df55936 100644
--- a/packages/grant-explorer/src/datadog.tsx
+++ b/packages/grant-explorer/src/datadog.tsx
@@ -1,12 +1,15 @@
 import { datadogRum } from "@datadog/browser-rum";
 import { datadogLogs } from "@datadog/browser-logs";
 
+const isDevelopment = process.env.NODE_ENV === "development";
 /**
  * Initialize datadog at a global level
  *  - Datadog Real User Monitoring (RUM) : https://www.npmjs.com/package/@datadog/browser-rum
  *  - Datadog Browser Logs : https://www.npmjs.com/package/@datadog/browser-logs
  */
 export const initDatadog = () => {
+  if (isDevelopment) return;
+
   // Init datadog-rum
   datadogRum.init({
     applicationId: process.env.REACT_APP_DATADOG_APPLICATION_ID || "",
diff --git a/packages/grant-explorer/src/features/round/ViewProjectDetails.tsx b/packages/grant-explorer/src/features/round/ViewProjectDetails.tsx
deleted file mode 100644
index c2ad65221c..0000000000
--- a/packages/grant-explorer/src/features/round/ViewProjectDetails.tsx
+++ /dev/null
@@ -1,683 +0,0 @@
-import { datadogLogs } from "@datadog/browser-logs";
-import {
-  ArrowTrendingUpIcon,
-  LinkIcon,
-  ShieldCheckIcon,
-} from "@heroicons/react/24/solid";
-import {
-  formatDateWithOrdinal,
-  renderToHTML,
-  useParams,
-  useValidateCredential,
-} from "common";
-import { getAlloVersion } from "common/src/config";
-import { formatDistanceToNowStrict } from "date-fns";
-import React, {
-  ComponentProps,
-  ComponentPropsWithRef,
-  createElement,
-  FunctionComponent,
-  PropsWithChildren,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
-import { useAccount, useEnsName } from "wagmi";
-import DefaultLogoImage from "../../assets/default_logo.png";
-import { ReactComponent as GithubIcon } from "../../assets/github-logo.svg";
-import { ReactComponent as TwitterIcon } from "../../assets/twitter-logo.svg";
-import { ReactComponent as EthereumIcon } from "common/src/assets/ethereum-icon.svg";
-import { ReactComponent as GlobeIcon } from "../../assets/icons/globe-icon.svg";
-import { useRoundById } from "../../context/RoundContext";
-import { CartProject, GrantApplicationFormAnswer, Project } from "../api/types";
-import { ProjectBanner } from "../common/ProjectBanner";
-import RoundEndedBanner from "../common/RoundEndedBanner";
-import Breadcrumb, { BreadcrumbItem } from "../common/Breadcrumb";
-import { isDirectRound, isInfiniteDate } from "../api/utils";
-import { useCartStorage } from "../../store";
-import { Box, Skeleton, SkeletonText, Tab, Tabs } from "@chakra-ui/react";
-import { GrantList } from "./KarmaGrant/GrantList";
-import { ImpactList } from "./KarmaGrant/ImpactList";
-import { useGap } from "../api/gap";
-import { StatList } from "./OSO/ImpactStats";
-import { useOSO } from "../api/oso";
-import { CheckIcon, ShoppingCartIcon } from "@heroicons/react/24/outline";
-import {
-  Application,
-  BaseQuestion,
-  Round,
-  RoundApplicationQuestion,
-  useDataLayer,
-} from "data-layer";
-import { DefaultLayout } from "../common/DefaultLayout";
-import {
-  mapApplicationToProject,
-  mapApplicationToRound,
-  useApplication,
-} from "../projects/hooks/useApplication";
-import { PassportWidget } from "../common/PassportWidget";
-import CopyToClipboard from "common/src/components/CopyToClipboard";
-
-const CalendarIcon = (props: React.SVGProps<SVGSVGElement>) => {
-  return (
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M4 0C3.44772 0 3 0.447715 3 1V2H2C0.895431 2 0 2.89543 0 4V14C0 15.1046 0.895431 16 2 16H14C15.1046 16 16 15.1046 16 14V4C16 2.89543 15.1046 2 14 2H13V1C13 0.447715 12.5523 0 12 0C11.4477 0 11 0.447715 11 1V2H5V1C5 0.447715 4.55228 0 4 0ZM4 5C3.44772 5 3 5.44772 3 6C3 6.55228 3.44772 7 4 7H12C12.5523 7 13 6.55228 13 6C13 5.44772 12.5523 5 12 5H4Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-};
-
-const useProjectDetailsParams = useParams<{
-  chainId: string;
-  roundId: string;
-  applicationId: string;
-}>;
-
-export default function ViewProjectDetails() {
-  const [selectedTab, setSelectedTab] = useState(0);
-
-  datadogLogs.logger.info(
-    "====> Route: /round/:chainId/:roundId/:applicationId"
-  );
-  datadogLogs.logger.info(`====> URL: ${window.location.href}`);
-  const {
-    chainId,
-    roundId,
-    applicationId: paramApplicationId,
-  } = useProjectDetailsParams();
-  const dataLayer = useDataLayer();
-  const { address: walletAddress } = useAccount();
-
-  let applicationId: string;
-
-  /// handle URLs where the application ID is ${roundId}-${applicationId}
-  if (paramApplicationId.includes("-")) {
-    applicationId = paramApplicationId.split("-")[1];
-  } else {
-    applicationId = paramApplicationId;
-  }
-
-  const {
-    data: application,
-    error,
-    isLoading,
-  } = useApplication(
-    {
-      chainId: Number(chainId as string),
-      roundId,
-      applicationId: applicationId,
-    },
-    dataLayer
-  );
-  const { round: roundDetails } = useRoundById(Number(chainId), roundId);
-
-  const projectToRender = application && mapApplicationToProject(application);
-  const round = application && mapApplicationToRound(application);
-
-  round && (round.chainId = Number(chainId));
-  const isSybilDefenseEnabled =
-    round?.roundMetadata?.quadraticFundingConfig?.sybilDefense === true ||
-    round?.roundMetadata?.quadraticFundingConfig?.sybilDefense !== "none";
-
-  const { grants, impacts } = useGap(
-    projectToRender?.projectRegistryId as string
-  );
-  const { stats } = useOSO(
-    projectToRender?.projectMetadata.projectGithub as string
-  );
-
-  const currentTime = new Date();
-  const isAfterRoundEndDate =
-    round &&
-    (isInfiniteDate(round.roundEndTime)
-      ? false
-      : round && round.roundEndTime <= currentTime);
-
-  const isBeforeRoundStartDate =
-    round &&
-    (isInfiniteDate(round.roundStartTime)
-      ? false
-      : round && currentTime < round.roundStartTime);
-
-  const alloVersion = getAlloVersion();
-
-  useEffect(() => {
-    if (
-      isAfterRoundEndDate !== undefined &&
-      roundId?.startsWith("0x") &&
-      alloVersion === "allo-v2" &&
-      !isAfterRoundEndDate
-    ) {
-      window.location.href = `https://explorer-v1.gitcoin.co${window.location.pathname}${window.location.hash}`;
-    }
-  }, [roundId, alloVersion, isAfterRoundEndDate]);
-
-  const disableAddToCartButton =
-    (alloVersion === "allo-v2" && roundId.startsWith("0x")) ||
-    isAfterRoundEndDate ||
-    isBeforeRoundStartDate;
-  const { projects, add, remove } = useCartStorage();
-
-  const isAlreadyInCart = projects.some(
-    (project) =>
-      project.grantApplicationId === applicationId &&
-      project.chainId === Number(chainId) &&
-      project.roundId === roundId
-  );
-  const cartProject = projectToRender as CartProject;
-
-  if (cartProject !== undefined) {
-    cartProject.roundId = roundId;
-    cartProject.chainId = Number(chainId);
-    cartProject.grantApplicationId = applicationId;
-  }
-
-  const breadCrumbs = [
-    {
-      name: "Explorer Home",
-      path: "/",
-    },
-    {
-      name: round?.roundMetadata?.name,
-      path: `/round/${chainId}/${roundId}`,
-    },
-    {
-      name: "Project Details",
-      path: `/round/${chainId}/${roundId}/${applicationId}`,
-    },
-  ] as BreadcrumbItem[];
-
-  const {
-    projectMetadata: { title, description = "", bannerImg },
-  } = projectToRender ?? { projectMetadata: {} };
-  const projectDetailsTabs = useMemo(
-    () => [
-      {
-        name: "Project details",
-        content: (
-          <>
-            <h3 className="text-3xl mt-8 mb-4 font-modern-era-medium text-blue-800">
-              About
-            </h3>
-            {projectToRender ? (
-              <>
-                <Detail text={description} testID="project-metadata" />
-                <ApplicationFormAnswers
-                  answers={projectToRender.grantApplicationFormAnswers}
-                  round={roundDetails}
-                />
-              </>
-            ) : (
-              <SkeletonText />
-            )}
-          </>
-        ),
-      },
-      {
-        name: "Impact Measurement",
-        content: (
-          <React.Fragment>
-            <StatList stats={stats} />
-            <GrantList
-              grants={grants}
-              displayKarmaAttribution={
-                grants.length > 0 && impacts.length === 0
-              }
-            />
-            <ImpactList
-              impacts={impacts}
-              displayKarmaAttribution={impacts.length > 0}
-            />
-          </React.Fragment>
-        ),
-      },
-    ],
-    [stats, grants, projectToRender, description, impacts, roundDetails]
-  );
-
-  const handleTabChange = (tabIndex: number) => {
-    setSelectedTab(tabIndex);
-  };
-
-  return (
-    <>
-      <DefaultLayout>
-        {isAfterRoundEndDate && (
-          <div className="relative top-6">
-            <RoundEndedBanner />
-          </div>
-        )}
-        <div className="flex flex-row justify-between my-8">
-          <div className="flex items-center pt-2" data-testid="bread-crumbs">
-            <Breadcrumb items={breadCrumbs} />
-          </div>
-          {walletAddress && round && isSybilDefenseEnabled && (
-            <div data-testid="passport-widget">
-              <PassportWidget round={round} alignment="right" />
-            </div>
-          )}
-        </div>
-        <div className="mb-4">
-          <ProjectBanner
-            bannerImgCid={bannerImg ?? null}
-            classNameOverride="h-32 w-full object-cover lg:h-80 rounded md:rounded-3xl"
-            resizeHeight={320}
-          />
-          <div className="pl-4 sm:pl-6 lg:pl-8">
-            <div className="sm:flex sm:items-end sm:space-x-5">
-              <div className="flex">
-                <ProjectLogo {...projectToRender?.projectMetadata} />
-              </div>
-            </div>
-          </div>
-        </div>
-        <div className="md:flex gap-4 flex-row-reverse">
-          {round && !isDirectRound(round) && (
-            <Sidebar
-              isAlreadyInCart={isAlreadyInCart}
-              isBeforeRoundEndDate={!disableAddToCartButton}
-              removeFromCart={() => {
-                remove(cartProject);
-              }}
-              addToCart={() => {
-                add(cartProject);
-              }}
-            />
-          )}
-          <div className="flex-1">
-            {error === undefined &&
-            !isLoading &&
-            projectToRender !== undefined ? (
-              <>
-                <Skeleton isLoaded={Boolean(title)}>
-                  <h1 className="text-4xl font-modern-era-medium tracking-tight text-grey-500">
-                    {title}
-                  </h1>
-                </Skeleton>
-                <ProjectLinks project={projectToRender} />
-                <ProjectDetailsTabs
-                  selected={selectedTab}
-                  onChange={handleTabChange}
-                  tabs={projectDetailsTabs.map((tab) => tab.name)}
-                />
-                <div className="[&_a]:underline">
-                  {projectDetailsTabs[selectedTab].content}
-                </div>
-              </>
-            ) : (
-              <p>Couldn't load project data. It may not exist.</p>
-            )}
-          </div>
-        </div>
-      </DefaultLayout>
-    </>
-  );
-}
-
-function ProjectDetailsTabs(props: {
-  tabs: string[];
-  onChange?: (tabIndex: number) => void;
-  selected: number;
-}) {
-  return (
-    <Box className="" bottom={0.5}>
-      {props.tabs.length > 0 && (
-        <Tabs
-          display="flex"
-          onChange={props.onChange}
-          defaultIndex={props.selected}
-        >
-          {props.tabs.map((tab, index) => (
-            <Tab key={index}>{tab}</Tab>
-          ))}
-        </Tabs>
-      )}
-    </Box>
-  );
-}
-
-function ProjectLinks({ project }: { project?: Project }) {
-  const {
-    recipient,
-    projectMetadata: {
-      createdAt,
-      website,
-      projectTwitter,
-      projectGithub,
-      userGithub,
-      credentials,
-    },
-  } = project ?? { projectMetadata: {} };
-
-  // @ts-expect-error Temp until viem (could also cast recipient as Address or update the type)
-  const ens = useEnsName({ address: recipient, enabled: Boolean(recipient) });
-
-  const { isValid: validTwitterCredential } = useValidateCredential(
-    credentials?.twitter,
-    projectTwitter
-  );
-
-  const { isValid: validGithubCredential } = useValidateCredential(
-    credentials?.github,
-    projectGithub
-  );
-
-  const createdOn =
-    createdAt &&
-    `Created on: ${formatDateWithOrdinal(new Date(createdAt ?? 0))}`;
-
-  return (
-    <div
-      className={`grid md:grid-cols-2 gap-4  border-y-[2px] py-4 my-4 ${
-        // isLoading?
-        createdAt ? "" : "bg-grey-100 animate-pulse"
-      }`}
-    >
-      <ProjectLink icon={EthereumIcon}>
-        <CopyToClipboard text={ens.data || recipient} />
-      </ProjectLink>
-      <ProjectLink icon={CalendarIcon}>{createdOn}</ProjectLink>
-      <ProjectLink url={website} icon={GlobeIcon}>
-        {website}
-      </ProjectLink>
-      {projectTwitter !== undefined && (
-        <ProjectLink
-          url={`https://twitter.com/${projectTwitter}`}
-          icon={TwitterIcon}
-          isVerified={validTwitterCredential}
-        >
-          {projectTwitter}
-        </ProjectLink>
-      )}
-      {projectGithub !== undefined && (
-        <ProjectLink
-          url={`https://github.com/${projectGithub}`}
-          icon={GithubIcon}
-          isVerified={validGithubCredential}
-        >
-          {projectGithub}
-        </ProjectLink>
-      )}
-      {userGithub !== undefined && (
-        <ProjectLink url={`https://github.com/${userGithub}`} icon={GithubIcon}>
-          {userGithub}
-        </ProjectLink>
-      )}
-    </div>
-  );
-}
-
-function ProjectLink({
-  icon,
-  children,
-  url,
-  isVerified,
-}: PropsWithChildren<{
-  icon: FunctionComponent<ComponentPropsWithRef<"svg">>;
-  url?: string;
-  isVerified?: boolean;
-}>) {
-  const Component = url ? "a" : "div";
-  return children ? (
-    <div className="flex items-center gap-2">
-      <div>{createElement(icon, { className: "w-4 h-4 text-grey-400" })}</div>
-      <div className="flex gap-2">
-        <Component
-          href={url}
-          target="_blank"
-          className={url && "text-blue-300 hover:underline"}
-        >
-          {children}
-        </Component>
-        {isVerified && <VerifiedBadge />}
-      </div>
-    </div>
-  ) : null;
-}
-
-function VerifiedBadge() {
-  return (
-    <span className="bg-teal-100 flex gap-2 rounded-full px-2 text-xs items-center font-modern-era-medium text-teal-500">
-      <ShieldCheckIcon className="w-4 h-4" />
-      Verified
-    </span>
-  );
-}
-
-function Detail(props: { text: string; testID: string }) {
-  return (
-    <p
-      dangerouslySetInnerHTML={{
-        __html: renderToHTML(props.text.replace(/\n/g, "\n\n")),
-      }}
-      className="text-blue-800 text-md prose prose-h1:text-lg prose-h2:text-base prose-h3:text-base prose-a:text-blue-600 max-w-full"
-      data-testid={props.testID}
-    />
-  );
-}
-
-function ApplicationFormAnswers(props: {
-  answers: GrantApplicationFormAnswer[];
-  round: Round | undefined;
-}) {
-  const roundQuestions = props.round?.applicationQuestions as (BaseQuestion &
-    RoundApplicationQuestion)[];
-  let answers: GrantApplicationFormAnswer[] = [];
-  if (roundQuestions) {
-    answers = roundQuestions
-      .filter((q) => !q.hidden && !q.encrypted)
-      .map((q) => ({
-        ...props.answers.find(
-          (a) =>
-            a.questionId === q.id && a.question === q.title && a.type === q.type
-        ),
-        question: q.title,
-      }))
-      .filter((a): a is GrantApplicationFormAnswer => !!a.answer);
-  }
-
-  if (answers.length === 0) {
-    answers = props.answers.filter((a) => !!a.answer && !a.hidden);
-  }
-
-  if (answers.length === 0) {
-    return null;
-  }
-
-  return (
-    <div>
-      <h1 className="text-2xl mt-8 font-thin text-blue-800">
-        Additional Information
-      </h1>
-      <div>
-        {answers.map((answer) => {
-          const answerText = Array.isArray(answer.answer)
-            ? answer.answer.join(", ")
-            : answer.answer;
-          return (
-            <div key={answer.questionId}>
-              <p className="text-md mt-8 mb-3 font-semibold text-blue-800">
-                {answer.question}
-              </p>
-              {answer.type === "paragraph" ? (
-                <p
-                  dangerouslySetInnerHTML={{
-                    __html: renderToHTML(answerText.replace(/\n/g, "\n\n")),
-                  }}
-                  className="text-md prose prose-h1:text-lg prose-h2:text-base prose-h3:text-base prose-a:text-blue-600"
-                ></p>
-              ) : (
-                <p
-                  className="text-base text-blue-800"
-                  dangerouslySetInnerHTML={{
-                    __html: renderToHTML(answerText.replace(/\n/g, "\n\n")),
-                  }}
-                ></p>
-              )}
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-const ipfsGateway = process.env.REACT_APP_IPFS_BASE_URL;
-
-function ProjectLogo({ logoImg }: { logoImg?: string }) {
-  const src = logoImg ? `${ipfsGateway}/ipfs/${logoImg}` : DefaultLogoImage;
-
-  return (
-    <img
-      className={"-mt-16 h-32 w-32 rounded-full ring-4 ring-white bg-white"}
-      src={src}
-      alt="Project Logo"
-    />
-  );
-}
-
-function Sidebar(props: {
-  isAlreadyInCart: boolean;
-  isBeforeRoundEndDate?: boolean;
-  removeFromCart: () => void;
-  addToCart: () => void;
-}) {
-  const { chainId, roundId, applicationId } = useProjectDetailsParams();
-  const dataLayer = useDataLayer();
-
-  const { data: application } = useApplication(
-    {
-      chainId: Number(chainId as string),
-      roundId,
-      applicationId: applicationId,
-    },
-    dataLayer
-  );
-
-  return (
-    <div>
-      <div className="min-w-[320px] h-fit mb-6 rounded-3xl bg-gray-50">
-        <ProjectStats application={application} />
-        {props.isBeforeRoundEndDate && (
-          <CartButtonToggle
-            isAlreadyInCart={props.isAlreadyInCart}
-            addToCart={props.addToCart}
-            removeFromCart={props.removeFromCart}
-          />
-        )}
-      </div>
-      {!props.isBeforeRoundEndDate && (
-        <a
-          href={`/#/projects/${application?.project.id}`}
-          target="_blank"
-          className="mt-4 flex font-bold justify-center border rounded-lg px-4 py-2"
-        >
-          <ArrowTrendingUpIcon className="w-4 h-4 inline-block mt-1 mr-2" />
-          View history
-          <LinkIcon className="w-4 h-4 ml-2 mt-1" />
-        </a>
-      )}
-    </div>
-  );
-}
-
-export function ProjectStats(props: { application: Application | undefined }) {
-  const { chainId, roundId } = useProjectDetailsParams();
-  const { round } = useRoundById(Number(chainId), roundId);
-  const application = props.application;
-
-  const timeRemaining =
-    round?.roundEndTime && !isInfiniteDate(round?.roundEndTime)
-      ? formatDistanceToNowStrict(round.roundEndTime)
-      : null;
-  const isBeforeRoundEndDate =
-    round &&
-    (isInfiniteDate(round.roundEndTime) || round.roundEndTime > new Date());
-
-  return (
-    <div className="rounded-3xl flex-auto p-3 md:p-4 gap-4 flex flex-col text-blue-800">
-      <Stat
-        isLoading={!application}
-        value={`$${application?.totalAmountDonatedInUsd.toFixed(2)}`}
-      >
-        funding received in current round
-      </Stat>
-      <Stat isLoading={!application} value={application?.uniqueDonorsCount}>
-        contributors
-      </Stat>
-
-      <Stat
-        isLoading={isBeforeRoundEndDate === undefined}
-        value={timeRemaining}
-        className={
-          // Explicitly check for true - could be undefined if round hasn't been loaded yet
-          isBeforeRoundEndDate === true || isBeforeRoundEndDate === undefined
-            ? ""
-            : "flex-col-reverse"
-        }
-      >
-        {
-          // If loading - render empty
-          isBeforeRoundEndDate === undefined
-            ? ""
-            : isBeforeRoundEndDate
-              ? "to go"
-              : "Round ended"
-        }
-      </Stat>
-    </div>
-  );
-}
-
-export function Stat({
-  value,
-  children,
-  isLoading,
-  className,
-}: {
-  value?: string | number | null;
-  isLoading?: boolean;
-} & ComponentProps<"div">) {
-  return (
-    <div className={`flex flex-col ${className}`}>
-      <Skeleton isLoaded={!isLoading} height={"36px"}>
-        <h4 className="text-3xl">{value}</h4>
-      </Skeleton>
-      <span className="text-sm md:text-base">{children}</span>
-    </div>
-  );
-}
-
-function CartButtonToggle(props: {
-  isAlreadyInCart: boolean;
-  addToCart: () => void;
-  removeFromCart: () => void;
-}) {
-  return (
-    <button
-      className="font-mono bg-blue-100 hover:bg-blue-300  hover:text-grey-50 transition-all w-full items-center justify-center rounded-b-3xl rounded-t-none p-4 inline-flex gap-2"
-      data-testid={props.isAlreadyInCart ? "remove-from-cart" : "add-to-cart"}
-      onClick={() =>
-        props.isAlreadyInCart ? props.removeFromCart() : props.addToCart()
-      }
-    >
-      {props.isAlreadyInCart ? (
-        <CheckIcon className="w-5 h-5" />
-      ) : (
-        <ShoppingCartIcon className="w-5 h-5" />
-      )}
-      {props.isAlreadyInCart ? "Added to cart" : "Add to cart"}
-    </button>
-  );
-}
diff --git a/packages/grant-explorer/src/features/round/ViewProjectDetails/ViewProjectDetails.tsx b/packages/grant-explorer/src/features/round/ViewProjectDetails/ViewProjectDetails.tsx
new file mode 100644
index 0000000000..31527c64b5
--- /dev/null
+++ b/packages/grant-explorer/src/features/round/ViewProjectDetails/ViewProjectDetails.tsx
@@ -0,0 +1,277 @@
+import { datadogLogs } from "@datadog/browser-logs";
+import { getAlloVersion } from "common/src/config";
+import React, { useEffect, useMemo, useState } from "react";
+import { useAccount } from "wagmi";
+import { useRoundById } from "../../../context/RoundContext";
+import { CartProject } from "../../api/types";
+import { ProjectBanner } from "../../common/ProjectBanner";
+import RoundEndedBanner from "../../common/RoundEndedBanner";
+import Breadcrumb, { BreadcrumbItem } from "../../common/Breadcrumb";
+import { isDirectRound, isInfiniteDate } from "../../api/utils";
+import { useCartStorage } from "../../../store";
+import { Skeleton, SkeletonText } from "@chakra-ui/react";
+import { GrantList } from "../KarmaGrant/GrantList";
+import { ImpactList } from "../KarmaGrant/ImpactList";
+import { useGap } from "../../api/gap";
+import { StatList } from "../OSO/ImpactStats";
+import { useOSO } from "../../api/oso";
+import { useDataLayer } from "data-layer";
+import { DefaultLayout } from "../../common/DefaultLayout";
+import {
+  mapApplicationToProject,
+  mapApplicationToRound,
+  useApplication,
+} from "../../projects/hooks/useApplication";
+import { PassportWidget } from "../../common/PassportWidget";
+import { useProjectDetailsParams } from "./hooks/useProjectDetailsParams";
+import {
+  ApplicationFormAnswers,
+  Detail,
+  ProjectDetailsTabs,
+  ProjectLinks,
+  Sidebar,
+  ProjectLogo,
+  StakingBannerAndModal,
+} from "./components";
+
+export default function ViewProjectDetails() {
+  const [selectedTab, setSelectedTab] = useState(0);
+
+  datadogLogs.logger.info(
+    "====> Route: /round/:chainId/:roundId/:applicationId"
+  );
+  datadogLogs.logger.info(`====> URL: ${window.location.href}`);
+  const {
+    chainId,
+    roundId,
+    applicationId: paramApplicationId,
+  } = useProjectDetailsParams();
+  const dataLayer = useDataLayer();
+  const { address: walletAddress } = useAccount();
+
+  let applicationId: string;
+
+  /// handle URLs where the application ID is ${roundId}-${applicationId}
+  if (paramApplicationId.includes("-")) {
+    applicationId = paramApplicationId.split("-")[1];
+  } else {
+    applicationId = paramApplicationId;
+  }
+
+  const {
+    data: application,
+    error,
+    isLoading,
+  } = useApplication(
+    {
+      chainId: Number(chainId as string),
+      roundId,
+      applicationId: applicationId,
+    },
+    dataLayer
+  );
+  const { round: roundDetails } = useRoundById(Number(chainId), roundId);
+
+  const projectToRender = application && mapApplicationToProject(application);
+  const round = application && mapApplicationToRound(application);
+
+  round && (round.chainId = Number(chainId));
+  const isSybilDefenseEnabled =
+    round?.roundMetadata?.quadraticFundingConfig?.sybilDefense === true ||
+    round?.roundMetadata?.quadraticFundingConfig?.sybilDefense !== "none";
+
+  const { grants, impacts } = useGap(
+    projectToRender?.projectRegistryId as string
+  );
+  const { stats } = useOSO(
+    projectToRender?.projectMetadata.projectGithub as string
+  );
+
+  const currentTime = new Date();
+  const isAfterRoundEndDate =
+    round &&
+    (isInfiniteDate(round.roundEndTime)
+      ? false
+      : round && round.roundEndTime <= currentTime);
+
+  const isBeforeRoundStartDate =
+    round &&
+    (isInfiniteDate(round.roundStartTime)
+      ? false
+      : round && currentTime < round.roundStartTime);
+
+  const alloVersion = getAlloVersion();
+
+  useEffect(() => {
+    if (
+      isAfterRoundEndDate !== undefined &&
+      roundId?.startsWith("0x") &&
+      alloVersion === "allo-v2" &&
+      !isAfterRoundEndDate
+    ) {
+      window.location.href = `https://explorer-v1.gitcoin.co${window.location.pathname}${window.location.hash}`;
+    }
+  }, [roundId, alloVersion, isAfterRoundEndDate]);
+
+  const disableAddToCartButton =
+    (alloVersion === "allo-v2" && roundId.startsWith("0x")) ||
+    isAfterRoundEndDate ||
+    isBeforeRoundStartDate;
+  const { projects, add, remove } = useCartStorage();
+
+  const isAlreadyInCart = projects.some(
+    (project) =>
+      project.grantApplicationId === applicationId &&
+      project.chainId === Number(chainId) &&
+      project.roundId === roundId
+  );
+  const cartProject = projectToRender as CartProject;
+
+  if (cartProject !== undefined) {
+    cartProject.roundId = roundId;
+    cartProject.chainId = Number(chainId);
+    cartProject.grantApplicationId = applicationId;
+  }
+
+  const breadCrumbs = [
+    {
+      name: "Explorer Home",
+      path: "/",
+    },
+    {
+      name: round?.roundMetadata?.name,
+      path: `/round/${chainId}/${roundId}`,
+    },
+    {
+      name: "Project Details",
+      path: `/round/${chainId}/${roundId}/${applicationId}`,
+    },
+  ] as BreadcrumbItem[];
+
+  const {
+    projectMetadata: { title, description = "", bannerImg },
+  } = projectToRender ?? { projectMetadata: {} };
+  const projectDetailsTabs = useMemo(
+    () => [
+      {
+        name: "Project details",
+        content: (
+          <>
+            <h3 className="text-3xl mt-8 mb-4 font-modern-era-medium text-blue-800">
+              About
+            </h3>
+            {projectToRender ? (
+              <>
+                <Detail text={description} testID="project-metadata" />
+                <ApplicationFormAnswers
+                  answers={projectToRender.grantApplicationFormAnswers}
+                  round={roundDetails}
+                />
+              </>
+            ) : (
+              <SkeletonText />
+            )}
+          </>
+        ),
+      },
+      {
+        name: "Impact Measurement",
+        content: (
+          <React.Fragment>
+            <StatList stats={stats} />
+            <GrantList
+              grants={grants}
+              displayKarmaAttribution={
+                grants.length > 0 && impacts.length === 0
+              }
+            />
+            <ImpactList
+              impacts={impacts}
+              displayKarmaAttribution={impacts.length > 0}
+            />
+          </React.Fragment>
+        ),
+      },
+    ],
+    [stats, grants, projectToRender, description, impacts, roundDetails]
+  );
+
+  const handleTabChange = (tabIndex: number) => {
+    setSelectedTab(tabIndex);
+  };
+
+  return (
+    <>
+      <DefaultLayout>
+        {isAfterRoundEndDate && (
+          <div className="relative top-6">
+            <RoundEndedBanner />
+          </div>
+        )}
+        <div className="flex flex-row justify-between my-8">
+          <div className="flex items-center pt-2" data-testid="bread-crumbs">
+            <Breadcrumb items={breadCrumbs} />
+          </div>
+          {walletAddress && round && isSybilDefenseEnabled && (
+            <div data-testid="passport-widget">
+              <PassportWidget round={round} alignment="right" />
+            </div>
+          )}
+        </div>
+        <div className="mb-4">
+          <ProjectBanner
+            bannerImgCid={bannerImg ?? null}
+            classNameOverride="h-32 w-full object-cover lg:h-80 rounded md:rounded-3xl"
+            resizeHeight={320}
+          />
+          <div className="pl-4 sm:pl-6 lg:pl-8">
+            <div className="sm:flex sm:items-end sm:space-x-5">
+              <div className="flex">
+                <ProjectLogo {...projectToRender?.projectMetadata} />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="md:flex gap-4 flex-row-reverse">
+          {round && !isDirectRound(round) && (
+            <Sidebar
+              isAlreadyInCart={isAlreadyInCart}
+              isBeforeRoundEndDate={!disableAddToCartButton}
+              removeFromCart={() => {
+                remove(cartProject);
+              }}
+              addToCart={() => {
+                add(cartProject);
+              }}
+            />
+          )}
+          <div className="flex-1">
+            {error === undefined &&
+            !isLoading &&
+            projectToRender !== undefined ? (
+              <>
+                <Skeleton isLoaded={Boolean(title)}>
+                  <h1 className="text-4xl font-modern-era-medium tracking-tight text-grey-500">
+                    {title}
+                  </h1>
+                </Skeleton>
+                <ProjectLinks project={projectToRender} />
+                <StakingBannerAndModal />
+                <ProjectDetailsTabs
+                  selected={selectedTab}
+                  onChange={handleTabChange}
+                  tabs={projectDetailsTabs.map((tab) => tab.name)}
+                />
+                <div className="[&_a]:underline">
+                  {projectDetailsTabs[selectedTab].content}
+                </div>
+              </>
+            ) : (
+              <p>Couldn't load project data. It may not exist.</p>
+            )}
+          </div>
+        </div>
+      </DefaultLayout>
+    </>
+  );
+}
diff --git a/packages/grant-explorer/src/features/round/ViewProjectDetails/components/ApplicationFormAnswers.tsx b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/ApplicationFormAnswers.tsx
new file mode 100644
index 0000000000..81cc44bf4b
--- /dev/null
+++ b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/ApplicationFormAnswers.tsx
@@ -0,0 +1,69 @@
+import { BaseQuestion, Round, RoundApplicationQuestion } from "data-layer";
+import { GrantApplicationFormAnswer } from "../../../api/types";
+import { renderToHTML } from "common";
+
+export function ApplicationFormAnswers(props: {
+  answers: GrantApplicationFormAnswer[];
+  round: Round | undefined;
+}) {
+  const roundQuestions = props.round?.applicationQuestions as (BaseQuestion &
+    RoundApplicationQuestion)[];
+  let answers: GrantApplicationFormAnswer[] = [];
+  if (roundQuestions) {
+    answers = roundQuestions
+      .filter((q) => !q.hidden && !q.encrypted)
+      .map((q) => ({
+        ...props.answers.find(
+          (a) =>
+            a.questionId === q.id && a.question === q.title && a.type === q.type
+        ),
+        question: q.title,
+      }))
+      .filter((a): a is GrantApplicationFormAnswer => !!a.answer);
+  }
+
+  if (answers.length === 0) {
+    answers = props.answers.filter((a) => !!a.answer && !a.hidden);
+  }
+
+  if (answers.length === 0) {
+    return null;
+  }
+
+  return (
+    <div>
+      <h1 className="text-2xl mt-8 font-thin text-blue-800">
+        Additional Information
+      </h1>
+      <div>
+        {answers.map((answer) => {
+          const answerText = Array.isArray(answer.answer)
+            ? answer.answer.join(", ")
+            : answer.answer;
+          return (
+            <div key={answer.questionId}>
+              <p className="text-md mt-8 mb-3 font-semibold text-blue-800">
+                {answer.question}
+              </p>
+              {answer.type === "paragraph" ? (
+                <p
+                  dangerouslySetInnerHTML={{
+                    __html: renderToHTML(answerText.replace(/\n/g, "\n\n")),
+                  }}
+                  className="text-md prose prose-h1:text-lg prose-h2:text-base prose-h3:text-base prose-a:text-blue-600"
+                ></p>
+              ) : (
+                <p
+                  className="text-base text-blue-800"
+                  dangerouslySetInnerHTML={{
+                    __html: renderToHTML(answerText.replace(/\n/g, "\n\n")),
+                  }}
+                ></p>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/packages/grant-explorer/src/features/round/ViewProjectDetails/components/CalendarIcon.tsx b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/CalendarIcon.tsx
new file mode 100644
index 0000000000..8d56b1dbaa
--- /dev/null
+++ b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/CalendarIcon.tsx
@@ -0,0 +1,19 @@
+export const CalendarIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4 0C3.44772 0 3 0.447715 3 1V2H2C0.895431 2 0 2.89543 0 4V14C0 15.1046 0.895431 16 2 16H14C15.1046 16 16 15.1046 16 14V4C16 2.89543 15.1046 2 14 2H13V1C13 0.447715 12.5523 0 12 0C11.4477 0 11 0.447715 11 1V2H5V1C5 0.447715 4.55228 0 4 0ZM4 5C3.44772 5 3 5.44772 3 6C3 6.55228 3.44772 7 4 7H12C12.5523 7 13 6.55228 13 6C13 5.44772 12.5523 5 12 5H4Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
diff --git a/packages/grant-explorer/src/features/round/ViewProjectDetails/components/CartButtonToggle.tsx b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/CartButtonToggle.tsx
new file mode 100644
index 0000000000..72347316dc
--- /dev/null
+++ b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/CartButtonToggle.tsx
@@ -0,0 +1,24 @@
+import { CheckIcon, ShoppingCartIcon } from "@heroicons/react/24/outline";
+
+export function CartButtonToggle(props: {
+  isAlreadyInCart: boolean;
+  addToCart: () => void;
+  removeFromCart: () => void;
+}) {
+  return (
+    <button
+      className="font-mono bg-blue-100 hover:bg-blue-300  hover:text-grey-50 transition-all w-full items-center justify-center rounded-b-3xl rounded-t-none p-4 inline-flex gap-2"
+      data-testid={props.isAlreadyInCart ? "remove-from-cart" : "add-to-cart"}
+      onClick={() =>
+        props.isAlreadyInCart ? props.removeFromCart() : props.addToCart()
+      }
+    >
+      {props.isAlreadyInCart ? (
+        <CheckIcon className="w-5 h-5" />
+      ) : (
+        <ShoppingCartIcon className="w-5 h-5" />
+      )}
+      {props.isAlreadyInCart ? "Added to cart" : "Add to cart"}
+    </button>
+  );
+}
diff --git a/packages/grant-explorer/src/features/round/ViewProjectDetails/components/Detail.tsx b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/Detail.tsx
new file mode 100644
index 0000000000..3998147a3e
--- /dev/null
+++ b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/Detail.tsx
@@ -0,0 +1,13 @@
+import { renderToHTML } from "common";
+
+export function Detail(props: { text: string; testID: string }) {
+  return (
+    <p
+      dangerouslySetInnerHTML={{
+        __html: renderToHTML(props.text.replace(/\n/g, "\n\n")),
+      }}
+      className="text-blue-800 text-md prose prose-h1:text-lg prose-h2:text-base prose-h3:text-base prose-a:text-blue-600 max-w-full"
+      data-testid={props.testID}
+    />
+  );
+}
diff --git a/packages/grant-explorer/src/features/round/ViewProjectDetails/components/ProjectDetailsTab.tsx b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/ProjectDetailsTab.tsx
new file mode 100644
index 0000000000..a61591d972
--- /dev/null
+++ b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/ProjectDetailsTab.tsx
@@ -0,0 +1,23 @@
+import { Box, Tab, Tabs } from "@chakra-ui/react";
+
+export function ProjectDetailsTabs(props: {
+  tabs: string[];
+  onChange?: (tabIndex: number) => void;
+  selected: number;
+}) {
+  return (
+    <Box className="" bottom={0.5}>
+      {props.tabs.length > 0 && (
+        <Tabs
+          display="flex"
+          onChange={props.onChange}
+          defaultIndex={props.selected}
+        >
+          {props.tabs.map((tab, index) => (
+            <Tab key={index}>{tab}</Tab>
+          ))}
+        </Tabs>
+      )}
+    </Box>
+  );
+}
diff --git a/packages/grant-explorer/src/features/round/ViewProjectDetails/components/ProjectLink.tsx b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/ProjectLink.tsx
new file mode 100644
index 0000000000..3fb4a9dbf1
--- /dev/null
+++ b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/ProjectLink.tsx
@@ -0,0 +1,35 @@
+import {
+  ComponentPropsWithRef,
+  createElement,
+  FunctionComponent,
+  PropsWithChildren,
+} from "react";
+import { VerifiedBadge } from "./VerifiedBadge";
+
+export function ProjectLink({
+  icon,
+  children,
+  url,
+  isVerified,
+}: PropsWithChildren<{
+  icon: FunctionComponent<ComponentPropsWithRef<"svg">>;
+  url?: string;
+  isVerified?: boolean;
+}>) {
+  const Component = url ? "a" : "div";
+  return children ? (
+    <div className="flex items-center gap-2">
+      <div>{createElement(icon, { className: "w-4 h-4 text-grey-400" })}</div>
+      <div className="flex gap-2">
+        <Component
+          href={url}
+          target="_blank"
+          className={url && "text-blue-300 hover:underline"}
+        >
+          {children}
+        </Component>
+        {isVerified && <VerifiedBadge />}
+      </div>
+    </div>
+  ) : null;
+}
diff --git a/packages/grant-explorer/src/features/round/ViewProjectDetails/components/ProjectLinks.tsx b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/ProjectLinks.tsx
new file mode 100644
index 0000000000..a5f7557182
--- /dev/null
+++ b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/ProjectLinks.tsx
@@ -0,0 +1,81 @@
+import { ReactComponent as GithubIcon } from "../../../../assets/github-logo.svg";
+import { ReactComponent as TwitterIcon } from "../../../../assets/twitter-logo.svg";
+import { ReactComponent as EthereumIcon } from "common/src/assets/ethereum-icon.svg";
+import { ReactComponent as GlobeIcon } from "../../../../assets/icons/globe-icon.svg";
+import { Project } from "../../../api/types";
+import { formatDateWithOrdinal, useValidateCredential } from "common";
+import { useEnsName } from "wagmi";
+import { ProjectLink } from "./ProjectLink";
+import CopyToClipboard from "common/src/components/CopyToClipboard";
+import { CalendarIcon } from "./CalendarIcon";
+
+export function ProjectLinks({ project }: { project?: Project }) {
+  const {
+    recipient,
+    projectMetadata: {
+      createdAt,
+      website,
+      projectTwitter,
+      projectGithub,
+      userGithub,
+      credentials,
+    },
+  } = project ?? { projectMetadata: {} };
+
+  // @ts-expect-error Temp until viem (could also cast recipient as Address or update the type)
+  const ens = useEnsName({ address: recipient, enabled: Boolean(recipient) });
+
+  const { isValid: validTwitterCredential } = useValidateCredential(
+    credentials?.twitter,
+    projectTwitter
+  );
+
+  const { isValid: validGithubCredential } = useValidateCredential(
+    credentials?.github,
+    projectGithub
+  );
+
+  const createdOn =
+    createdAt &&
+    `Created on: ${formatDateWithOrdinal(new Date(createdAt ?? 0))}`;
+
+  return (
+    <div
+      className={`grid md:grid-cols-2 gap-4  border-y-[2px] py-4 my-4 ${
+        // isLoading?
+        createdAt ? "" : "bg-grey-100 animate-pulse"
+      }`}
+    >
+      <ProjectLink icon={EthereumIcon}>
+        <CopyToClipboard text={ens.data || recipient} />
+      </ProjectLink>
+      <ProjectLink icon={CalendarIcon}>{createdOn}</ProjectLink>
+      <ProjectLink url={website} icon={GlobeIcon}>
+        {website}
+      </ProjectLink>
+      {projectTwitter !== undefined && (
+        <ProjectLink
+          url={`https://twitter.com/${projectTwitter}`}
+          icon={TwitterIcon}
+          isVerified={validTwitterCredential}
+        >
+          {projectTwitter}
+        </ProjectLink>
+      )}
+      {projectGithub !== undefined && (
+        <ProjectLink
+          url={`https://github.com/${projectGithub}`}
+          icon={GithubIcon}
+          isVerified={validGithubCredential}
+        >
+          {projectGithub}
+        </ProjectLink>
+      )}
+      {userGithub !== undefined && (
+        <ProjectLink url={`https://github.com/${userGithub}`} icon={GithubIcon}>
+          {userGithub}
+        </ProjectLink>
+      )}
+    </div>
+  );
+}
diff --git a/packages/grant-explorer/src/features/round/ViewProjectDetails/components/ProjectLogo.tsx b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/ProjectLogo.tsx
new file mode 100644
index 0000000000..28d377a20e
--- /dev/null
+++ b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/ProjectLogo.tsx
@@ -0,0 +1,15 @@
+import DefaultLogoImage from "../../../../assets/default_logo.png";
+
+const ipfsGateway = process.env.REACT_APP_IPFS_BASE_URL;
+
+export function ProjectLogo({ logoImg }: { logoImg?: string }) {
+  const src = logoImg ? `${ipfsGateway}/ipfs/${logoImg}` : DefaultLogoImage;
+
+  return (
+    <img
+      className={"-mt-16 h-32 w-32 rounded-full ring-4 ring-white bg-white"}
+      src={src}
+      alt="Project Logo"
+    />
+  );
+}
diff --git a/packages/grant-explorer/src/features/round/ViewProjectDetails/components/ProjectStats.tsx b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/ProjectStats.tsx
new file mode 100644
index 0000000000..44e7aa120a
--- /dev/null
+++ b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/ProjectStats.tsx
@@ -0,0 +1,54 @@
+import { Stat } from "./Stat";
+import { formatDistanceToNowStrict } from "date-fns";
+import { Application } from "data-layer";
+import { useProjectDetailsParams } from "../hooks/useProjectDetailsParams";
+import { useRoundById } from "../../../../context/RoundContext";
+import { isInfiniteDate } from "../../../api/utils";
+
+export function ProjectStats(props: { application: Application | undefined }) {
+  const { chainId, roundId } = useProjectDetailsParams();
+  const { round } = useRoundById(Number(chainId), roundId);
+  const application = props.application;
+
+  const timeRemaining =
+    round?.roundEndTime && !isInfiniteDate(round?.roundEndTime)
+      ? formatDistanceToNowStrict(round.roundEndTime)
+      : null;
+  const isBeforeRoundEndDate =
+    round &&
+    (isInfiniteDate(round.roundEndTime) || round.roundEndTime > new Date());
+
+  return (
+    <div className="rounded-3xl flex-auto p-3 md:p-4 gap-4 flex flex-col text-blue-800">
+      <Stat
+        isLoading={!application}
+        value={`$${application?.totalAmountDonatedInUsd.toFixed(2)}`}
+      >
+        funding received in current round
+      </Stat>
+      <Stat isLoading={!application} value={application?.uniqueDonorsCount}>
+        contributors
+      </Stat>
+
+      <Stat
+        isLoading={isBeforeRoundEndDate === undefined}
+        value={timeRemaining}
+        className={
+          // Explicitly check for true - could be undefined if round hasn't been loaded yet
+          isBeforeRoundEndDate === true || isBeforeRoundEndDate === undefined
+            ? ""
+            : "flex-col-reverse"
+        }
+      >
+        {
+          // If loading - render empty
+          isBeforeRoundEndDate === undefined
+            ? ""
+            : isBeforeRoundEndDate
+              ? "to go"
+              : "Round ended"
+        }
+      </Stat>
+    </div>
+  );
+}
diff --git a/packages/grant-explorer/src/features/round/ViewProjectDetails/components/Sidebar.tsx b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/Sidebar.tsx
new file mode 100644
index 0000000000..278f3be812
--- /dev/null
+++ b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/Sidebar.tsx
@@ -0,0 +1,51 @@
+import { ArrowTrendingUpIcon, LinkIcon } from "@heroicons/react/24/solid";
+import { useProjectDetailsParams } from "../hooks/useProjectDetailsParams";
+import { useDataLayer } from "data-layer";
+import { useApplication } from "../../../projects/hooks/useApplication";
+import { CartButtonToggle } from "./CartButtonToggle";
+import { ProjectStats } from "./ProjectStats";
+
+export function Sidebar(props: {
+  isAlreadyInCart: boolean;
+  isBeforeRoundEndDate?: boolean;
+  removeFromCart: () => void;
+  addToCart: () => void;
+}) {
+  const { chainId, roundId, applicationId } = useProjectDetailsParams();
+  const dataLayer = useDataLayer();
+
+  const { data: application } = useApplication(
+    {
+      chainId: Number(chainId as string),
+      roundId,
+      applicationId: applicationId,
+    },
+    dataLayer
+  );
+
+  return (
+    <div>
+      <div className="min-w-[320px] h-fit mb-6 rounded-3xl bg-gray-50">
+        <ProjectStats application={application} />
+        {props.isBeforeRoundEndDate && (
+          <CartButtonToggle
+            isAlreadyInCart={props.isAlreadyInCart}
+            addToCart={props.addToCart}
+            removeFromCart={props.removeFromCart}
+          />
+        )}
+      </div>
+      {!props.isBeforeRoundEndDate && (
+        <a
+          href={`/#/projects/${application?.project.id}`}
+          target="_blank"
+          className="mt-4 flex font-bold justify-center border rounded-lg px-4 py-2"
+        >
+          <ArrowTrendingUpIcon className="w-4 h-4 inline-block mt-1 mr-2" />
+          View history
+          <LinkIcon className="w-4 h-4 ml-2 mt-1" />
+        </a>
+      )}
+    </div>
+  );
+}
diff --git a/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/StakingBanner.tsx b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/StakingBanner.tsx
new file mode 100644
index 0000000000..2ac4b2019a
--- /dev/null
+++ b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/StakingBanner.tsx
@@ -0,0 +1,30 @@
+import { Button } from "common/src/styles";
+
+const STAKING_BANNER_TITLE =
+  "🔥 Boost grants, earn rewards, and shape the round!";
+const STAKING_BANNER_TEXT =
+  "Stake GTC during GG23 to upvote your favorite grants and increase their visibility in the round. The more you stake, the higher they rank—and the more rewards you can claim from the 3% rewards pool!";
+const STAKING_BUTTON_TEXT = "Stake on this project";
+const STAKING_BUTTON_TEXT_MOBILE = "Stake";
+
+export const StakingBanner = ({ onClick }: { onClick?: () => void }) => {
+  return (
+    <div className="bg-[#F2FBF8] rounded-3xl p-6 flex items-center justify-between w-full gap-4">
+      <div className="flex flex-col gap-4 font-sans text-black max-w-[609px]">
+        <h3 className="text-2xl font-medium">{STAKING_BANNER_TITLE}</h3>
+        <p className="text-base/[1.75rem] font-normal">{STAKING_BANNER_TEXT}</p>
+      </div>
+      <Button
+        className="text-white bg-[#22635A] max-h-[40px] font-mono"
+        onClick={onClick}
+      >
+        <span className="block lg:hidden whitespace-nowrap">
+          {STAKING_BUTTON_TEXT_MOBILE}
+        </span>
+        <span className="hidden lg:block whitespace-nowrap">
+          {STAKING_BUTTON_TEXT}
+        </span>
+      </Button>
+    </div>
+  );
+};
diff --git a/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/StakingBannerAndModal.tsx b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/StakingBannerAndModal.tsx
new file mode 100644
index 0000000000..1667fa567d
--- /dev/null
+++ b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/StakingBannerAndModal.tsx
@@ -0,0 +1,58 @@
+import { StakingModal } from "./StakingModal";
+import { useCallback, useState } from "react";
+import { StakingBanner } from "./StakingBanner";
+import { useProjectDetailsParams } from "../../hooks/useProjectDetailsParams";
+import { useIsStakable } from "./hooks/useIsStakable";
+
+export const StakingBannerAndModal = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const {
+    chainId,
+    roundId,
+    applicationId: paramApplicationId,
+  } = useProjectDetailsParams();
+
+  const applicationId = paramApplicationId.includes("-")
+    ? paramApplicationId.split("-")[1]
+    : paramApplicationId;
+
+  const stakingAppUrl = "https://staking-hub-mu.vercel.app"; // TODO: from env
+  const stakeProjectUrl = `${stakingAppUrl}/#/staking-round/${chainId}/${roundId}?id=${applicationId}`;
+
+  const handleCloseModal = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+
+  const handleOpenModal = useCallback(() => {
+    setIsOpen(true);
+  }, []);
+
+  const handleStake = useCallback(() => {
+    window.open(stakeProjectUrl, "_blank");
+    handleCloseModal();
+  }, [handleCloseModal, stakeProjectUrl]);
+
+  const chainIdNumber = chainId ? parseInt(chainId, 10) : 0;
+
+  const isStakable = useIsStakable({
+    chainId: chainIdNumber,
+    roundId,
+    applicationId,
+  });
+
+  if (!isStakable) {
+    return null;
+  }
+
+  return (
+    <div className="mt-2 mb-6">
+      <StakingBanner onClick={handleOpenModal} />
+      <StakingModal
+        isOpen={isOpen}
+        onClose={handleCloseModal}
+        onStake={handleStake}
+      />
+    </div>
+  );
+};
diff --git a/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/StakingModal.tsx b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/StakingModal.tsx
new file mode 100644
index 0000000000..6fd078efe6
--- /dev/null
+++ b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/StakingModal.tsx
@@ -0,0 +1,90 @@
+import { Button } from "common/src/styles";
+import { BaseModal } from "../../../../common/BaseModal";
+import { ArrowRightIcon } from "@heroicons/react/20/solid";
+
+const TITLE = "You're about to stake GTC on this project";
+const DESCRIPTION =
+  "To complete your stake, you’ll be redirected to a new tab. Once you confirm your transaction, your support will be reflected on the round page.";
+
+const CHECK_POINTS = [
+  "Boost this project’s visibility",
+  "Earn a share of the 3% rewards pool",
+];
+
+const Title = () => (
+  <div className="flex flex-col gap-2">
+    <div className="text-3xl leading-[2.125rem] align-middle font-medium">
+      {TITLE}
+    </div>
+    <div className="text-base leading-[1.625rem] align-middle font-normal">
+      {DESCRIPTION}
+    </div>
+  </div>
+);
+
+const CheckPoints = () => (
+  <div className="flex flex-col gap-4">
+    {CHECK_POINTS.map((point, index) => (
+      <div
+        key={index + point}
+        className="text-base leading-[1.625rem] align-middle font-normal"
+      >{`✅ ${point}`}</div>
+    ))}
+  </div>
+);
+
+const Content = () => (
+  <div className="flex flex-col gap-6 font-sans text-black">
+    <Title />
+    <CheckPoints />
+  </div>
+);
+
+const ActionButtons = ({
+  onCancel,
+  onStake,
+}: {
+  onCancel: () => void;
+  onStake: () => void;
+}) => (
+  <div className="flex justify-center gap-6 font-mono font-medium text-sm leading-6">
+    <Button
+      type="button"
+      $variant="outline"
+      className={`inline-flex text-black py-2 px-4`}
+      onClick={onCancel}
+      data-testid={"modal-cancel"}
+    >
+      Cancel
+    </Button>
+    <Button
+      type="button"
+      className={`inline-flex bg-[#22635A] text-white py-2 px-4`}
+      onClick={onStake}
+      data-testid={"modal-stake"}
+    >
+      <div className="flex items-center gap-2">
+        Stake GTC <ArrowRightIcon className="w-4 h-4 no-shrink" />
+      </div>
+    </Button>
+  </div>
+);
+
+export const StakingModal = ({
+  isOpen,
+  onClose,
+  onStake,
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+  onStake: () => void;
+}) => {
+  return (
+    <BaseModal isOpen={isOpen} onClose={onClose} size="2xl">
+      <div className="flex flex-col gap-8">
+        <Content />
+        <ActionButtons onCancel={onClose} onStake={onStake} />
+      </div>
+    </BaseModal>
+  );
+};
diff --git a/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/hooks/useIsDonationPeriod.tsx b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/hooks/useIsDonationPeriod.tsx
new file mode 100644
index 0000000000..055b6a3723
--- /dev/null
+++ b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/hooks/useIsDonationPeriod.tsx
@@ -0,0 +1,47 @@
+import { useApplication } from "../../../../../projects/hooks/useApplication";
+import { useDataLayer } from "data-layer";
+import { isInfiniteDate } from "../../../../../api/utils";
+import { useMemo } from "react";
+
+export const useIsDonationPeriod = ({
+  chainId,
+  roundId,
+  applicationId,
+}: {
+  chainId: number;
+  roundId: string;
+  applicationId: string;
+}) => {
+  const dataLayer = useDataLayer();
+
+  const { data: application } = useApplication(
+    {
+      chainId,
+      roundId,
+      applicationId,
+    },
+    dataLayer
+  );
+
+  const isDonationPeriod = useMemo<boolean | undefined>(() => {
+    if (!application) return undefined;
+    const { donationsStartTime, donationsEndTime } = application?.round ?? {};
+    if (
+      !donationsStartTime ||
+      !donationsEndTime ||
+      isInfiniteDate(new Date(donationsStartTime)) ||
+      isInfiniteDate(new Date(donationsEndTime))
+    )
+      return false;
+
+    const currentTime = new Date();
+    const donationsStartTimeDate = new Date("2025-03-02T12:00:00+00:00");
+    const donationsEndTimeDate = new Date(donationsEndTime);
+    return (
+      currentTime >= donationsStartTimeDate &&
+      currentTime <= donationsEndTimeDate
+    );
+  }, [application]);
+
+  return isDonationPeriod;
+};
diff --git a/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/hooks/useIsStakable.tsx b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/hooks/useIsStakable.tsx
new file mode 100644
index 0000000000..cd50afeb3a
--- /dev/null
+++ b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/hooks/useIsStakable.tsx
@@ -0,0 +1,44 @@
+import { useMemo } from "react";
+import { useIsDonationPeriod } from "./useIsDonationPeriod";
+
+// TODO: either from metadata or from env value
+// ONLY GITCOIN ROUNDS OF GG23
+const STAKABLE_ROUNDS: Array<{ chainId: number; roundId: string }> = [
+  { chainId: 42161, roundId: "863" },
+  { chainId: 42161, roundId: "865" },
+  { chainId: 42161, roundId: "867" },
+  // { chainId: 42220, roundId: "27" },
+  // { chainId: 42220, roundId: "28" },
+  // { chainId: 42220, roundId: "29" },
+  // { chainId: 42220, roundId: "30" },
+  // { chainId: 42220, roundId: "31" },
+  // { chainId: 42220, roundId: "32" },
+  // { chainId: 42220, roundId: "33" },
+  // { chainId: 42220, roundId: "34" },
+  // { chainId: 42220, roundId: "35" },
+];
+
+export const useIsStakable = ({
+  chainId,
+  roundId,
+  applicationId,
+}: {
+  chainId: number;
+  roundId: string;
+  applicationId: string;
+}) => {
+  const isDonationPeriod = useIsDonationPeriod({
+    chainId,
+    roundId,
+    applicationId,
+  });
+
+  const isStakable = useMemo(() => {
+    if (!isDonationPeriod) return false;
+    return STAKABLE_ROUNDS.some(
+      (round) => round.chainId === chainId && round.roundId === roundId
+    );
+  }, [isDonationPeriod, chainId, roundId]);
+
+  return isStakable;
+};
diff --git a/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/index.ts b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/index.ts
new file mode 100644
index 0000000000..86c546ce42
--- /dev/null
+++ b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/StakingBannerAndModal/index.ts
@@ -0,0 +1 @@
+export * from "./StakingBannerAndModal";
diff --git a/packages/grant-explorer/src/features/round/ViewProjectDetails/components/Stat.tsx b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/Stat.tsx
new file mode 100644
index 0000000000..b09ab79944
--- /dev/null
+++ b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/Stat.tsx
@@ -0,0 +1,21 @@
+import { ComponentProps } from "react";
+import { Skeleton } from "@chakra-ui/react";
+
+export function Stat({
+  value,
+  children,
+  isLoading,
+  className,
+}: {
+  value?: string | number | null;
+  isLoading?: boolean;
+} & ComponentProps<"div">) {
+  return (
+    <div className={`flex flex-col ${className}`}>
+      <Skeleton isLoaded={!isLoading} height={"36px"}>
+        <h4 className="text-3xl">{value}</h4>
+      </Skeleton>
+      <span className="text-sm md:text-base">{children}</span>
+    </div>
+  );
+}
diff --git a/packages/grant-explorer/src/features/round/ViewProjectDetails/components/VerifiedBadge.tsx b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/VerifiedBadge.tsx
new file mode 100644
index 0000000000..0a4ebdb3a1
--- /dev/null
+++ b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/VerifiedBadge.tsx
@@ -0,0 +1,10 @@
+import { ShieldCheckIcon } from "@heroicons/react/24/solid";
+
+export function VerifiedBadge() {
+  return (
+    <span className="bg-teal-100 flex gap-2 rounded-full px-2 text-xs items-center font-modern-era-medium text-teal-500">
+      <ShieldCheckIcon className="w-4 h-4" />
+      Verified
+    </span>
+  );
+}
diff --git a/packages/grant-explorer/src/features/round/ViewProjectDetails/components/index.ts b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/index.ts
new file mode 100644
index 0000000000..a7c07d89c4
--- /dev/null
+++ b/packages/grant-explorer/src/features/round/ViewProjectDetails/components/index.ts
@@ -0,0 +1,9 @@
+export { ApplicationFormAnswers } from "./ApplicationFormAnswers";
+export { Detail } from "./Detail";
+export { ProjectDetailsTabs } from "./ProjectDetailsTab";
+export { ProjectLinks } from "./ProjectLinks";
+export { ProjectLogo } from "./ProjectLogo";
+export { Sidebar } from "./Sidebar";
+export { ProjectStats } from "./ProjectStats";
+export { Stat } from "./Stat";
+export { StakingBannerAndModal } from "./StakingBannerAndModal";
diff --git a/packages/grant-explorer/src/features/round/ViewProjectDetails/hooks/useProjectDetailsParams.tsx b/packages/grant-explorer/src/features/round/ViewProjectDetails/hooks/useProjectDetailsParams.tsx
new file mode 100644
index 0000000000..f60bdff82a
--- /dev/null
+++ b/packages/grant-explorer/src/features/round/ViewProjectDetails/hooks/useProjectDetailsParams.tsx
@@ -0,0 +1,7 @@
+import { useParams } from "common";
+
+export const useProjectDetailsParams = useParams<{
+  chainId: string;
+  roundId: string;
+  applicationId: string;
+}>;
diff --git a/packages/grant-explorer/src/features/round/ViewProjectDetails/index.ts b/packages/grant-explorer/src/features/round/ViewProjectDetails/index.ts
new file mode 100644
index 0000000000..0ba44fda4c
--- /dev/null
+++ b/packages/grant-explorer/src/features/round/ViewProjectDetails/index.ts
@@ -0,0 +1,3 @@
+import ViewProjectDetails from "./ViewProjectDetails";
+export { ProjectStats, Stat } from "./components";
+export default ViewProjectDetails;