diff --git a/frontend/src/app/for-lawyers/components/Flowchart.tsx b/frontend/src/app/for-lawyers/components/Flowchart.tsx
index 889a95d..fe460ee 100644
--- a/frontend/src/app/for-lawyers/components/Flowchart.tsx
+++ b/frontend/src/app/for-lawyers/components/Flowchart.tsx
@@ -32,7 +32,7 @@ const FlowchartItem: React.FC<IFlowchartItem> = ({
             "relative h-7 w-[100%-14px] bg-primary-blue",
             "flex items-center justify-center",
             //start-arrow
-            "before:absolute before:left-0 before:top-0 before:border-b-[14px] before:border-l-[14px] before:border-t-[14px]",
+            "before:absolute before:-left-[1px] before:top-0 before:border-b-[14px] before:border-l-[14px] before:border-t-[14px]",
             "before:border-b-transparent before:border-t-transparent",
             background === "primary"
               ? "before:border-l-background-1"
@@ -60,7 +60,7 @@ interface IFlowchart {
 
 const Flowchart: React.FC<IFlowchart> = ({ items, background }) => {
   return (
-    <div className="flex w-full flex-wrap justify-center gap-4 md:justify-start">
+    <div className="flex w-full flex-wrap justify-center gap-4 md:justify-center">
       {items.map((item) => (
         <FlowchartItem key={item.name} {...item} background={background} />
       ))}
diff --git a/frontend/src/app/home/components/LearnPosts.tsx b/frontend/src/app/home/components/LearnPosts.tsx
index 0a8b761..0846f9d 100644
--- a/frontend/src/app/home/components/LearnPosts.tsx
+++ b/frontend/src/app/home/components/LearnPosts.tsx
@@ -23,7 +23,7 @@ const LearnPosts: React.FC = async () => {
         <div className="mx-auto flex flex-wrap gap-4">
           {cards.map(({ icon, title, subtitle, link }) => (
             <CtaCard
-              className="flex-grow xl:max-h-[378px] xl:max-w-[364px]"
+              className="flex-grow xl:max-h-[364px] xl:max-w-[378px]"
               key={title}
               {...{ icon, title, description: subtitle, arrowLink: link }}
             />
diff --git a/frontend/src/components/Cooperative/ReportSection/DropdownContainer.tsx b/frontend/src/components/Cooperative/ReportSection/DropdownContainer.tsx
index 869d66a..767259f 100644
--- a/frontend/src/components/Cooperative/ReportSection/DropdownContainer.tsx
+++ b/frontend/src/components/Cooperative/ReportSection/DropdownContainer.tsx
@@ -10,14 +10,14 @@ import { Reports } from "./ReportCard";
 interface IDropdownContainer
   extends Pick<Report, "yearDropdownLabel" | "monthDropdownLabel"> {
   reports: Reports;
-  setReportUrl: (url?: string) => void;
+  setSelectedReport: (report?: Reports[number]) => void;
 }
 
 type IProcessedReports = Record<number, Array<string>>;
 
 const DropdownContainer: React.FC<IDropdownContainer> = ({
   reports,
-  setReportUrl,
+  setSelectedReport,
   yearDropdownLabel,
   monthDropdownLabel,
 }) => {
@@ -75,8 +75,8 @@ const DropdownContainer: React.FC<IDropdownContainer> = ({
       (report) =>
         (isMonthInfo ? report.month === month : true) && report.year === year,
     );
-    setReportUrl(selectedReport?.url);
-  }, [isMonthInfo, month, year, reports, setReportUrl]);
+    setSelectedReport(selectedReport);
+  }, [isMonthInfo, month, year, reports, setSelectedReport]);
 
   return (
     <div
diff --git a/frontend/src/components/Cooperative/ReportSection/ReportCard.tsx b/frontend/src/components/Cooperative/ReportSection/ReportCard.tsx
index ac1a724..3d9f154 100644
--- a/frontend/src/components/Cooperative/ReportSection/ReportCard.tsx
+++ b/frontend/src/components/Cooperative/ReportSection/ReportCard.tsx
@@ -6,13 +6,12 @@ import clsx from "clsx";
 import Image from "next/image";
 
 import Button from "@/components/Button";
-import CustomLink from "@/components/CustomLink";
 import { Report } from "@/queries/cooperative/report-section";
 
 import DropdownContainer from "./DropdownContainer";
 
 export type Reports = {
-  url: string;
+  file: { url: string };
   month?: string;
   year: number;
 }[];
@@ -29,7 +28,35 @@ const ReportCard: React.FC<IReportCard> = ({
   monthDropdownLabel,
   downloadButtonText,
 }) => {
-  const [reportUrl, setReportUrl] = useState<string>();
+  const [selectedReport, setSelectedReport] = useState<Reports[number]>();
+
+  const handleDownload = () => {
+    if (!selectedReport || !selectedReport.file.url) return;
+    fetch(selectedReport.file.url)
+      .then((response) => response.blob())
+      .then((blob) => {
+        const url = window.URL.createObjectURL(new Blob([blob]));
+        const link = document.createElement("a");
+        link.href = url;
+
+        const contentType = blob.type;
+
+        const extension = contentType.split("/")[1] || "octet-stream";
+        const fileExtension = extension === "json" ? "json" : extension;
+
+        link.download = `${selectedReport.month ? selectedReport.month + "-" : ""}${selectedReport.year}.${fileExtension}`;
+
+        document.body.appendChild(link);
+
+        link.click();
+
+        document.body.removeChild(link);
+        window.URL.revokeObjectURL(url);
+      })
+      .catch((error) => {
+        console.error("Error fetching the file:", error);
+      });
+  };
 
   return (
     <div
@@ -47,21 +74,20 @@ const ReportCard: React.FC<IReportCard> = ({
         <DropdownContainer
           {...{
             reports,
-            setReportUrl,
+            setSelectedReport,
             yearDropdownLabel,
             monthDropdownLabel,
           }}
         />
 
-        <CustomLink href={reportUrl ?? ""}>
-          <Button
-            variant="primary"
-            className="text-background-1"
-            disabled={typeof reportUrl === "undefined"}
-          >
-            {downloadButtonText}
-          </Button>
-        </CustomLink>
+        <Button
+          variant="primary"
+          className="text-background-1"
+          disabled={typeof selectedReport === "undefined"}
+          onClick={handleDownload}
+        >
+          {downloadButtonText}
+        </Button>
       </div>
 
       <div
diff --git a/frontend/src/components/CtaCard.tsx b/frontend/src/components/CtaCard.tsx
index 5b21b3e..60c3b53 100644
--- a/frontend/src/components/CtaCard.tsx
+++ b/frontend/src/components/CtaCard.tsx
@@ -45,9 +45,11 @@ const CtaCard: React.FC<ICtaCard> = ({
       <h2 className="mb-6 text-lg font-medium text-primary-text lg:text-xl">
         {title}
       </h2>
-      <p className="text-base text-secondary-text lg:text-lg">{description}</p>
+      <p className="mb-6 text-base text-secondary-text lg:text-lg">
+        {description}
+      </p>
       {typeof arrowLink !== "undefined" ? (
-        <div className="mt-6 w-full">
+        <div className="mt-auto w-full">
           <Divider />
           <ExternalLink
             text={arrowLink.text}
diff --git a/frontend/src/components/ExternalLink.tsx b/frontend/src/components/ExternalLink.tsx
index 4514e49..d75519b 100644
--- a/frontend/src/components/ExternalLink.tsx
+++ b/frontend/src/components/ExternalLink.tsx
@@ -16,7 +16,10 @@ const ExternalLink: React.FC<IExternalLink> = ({ text, url, className }) => {
   return (
     <CustomLink
       href={url}
-      className={clsx("block hover:brightness-[1.2]", className)}
+      className={clsx(
+        "flex items-center gap-4 hover:brightness-[1.2]",
+        className,
+      )}
     >
       <span className="text-center text-primary-blue md:text-lg">{text}</span>
       <Image
diff --git a/frontend/src/components/ForBuilders/Hero.tsx b/frontend/src/components/ForBuilders/Hero.tsx
index 9a5c15e..91ed5d7 100644
--- a/frontend/src/components/ForBuilders/Hero.tsx
+++ b/frontend/src/components/ForBuilders/Hero.tsx
@@ -14,10 +14,12 @@ interface IHero {
 
 const Hero: React.FC<IHero> = ({ heroData }) => {
   return (
-    <div className="relative px-6 pb-12 pt-32">
+    <div className="relative px-6 pb-28 pt-44 md:pt-52 lg:px-32 lg:pb-60">
       <div className="space-y-6">
-        <h1 className="w-min text-3xl">{heroData.title}</h1>
-        <p className="text-lg">{heroData.subtitle}</p>
+        <h1 className="pt-1 text-2xl font-medium lg:pt-3 lg:text-4xl">
+          {heroData.title}
+        </h1>
+        <p className="max-w-[685px] text-lg">{heroData.subtitle}</p>
         <div>
           <CustomLink href={heroData.button.link.url}>
             <Button variant="secondary">
@@ -34,7 +36,7 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
                 width="24"
                 height="24"
                 alt="Arrow link image"
-                className="inline"
+                className="inline h-4 w-4 lg:h-6 lg:w-6"
               />
             </CustomLink>
           ))}
@@ -43,10 +45,9 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
       <Image
         src={heroData.background.url}
         alt="Hero Image Background"
-        width="1440"
-        height="835"
+        fill
         priority
-        className="absolute left-0 top-0 z-[-1] h-full object-cover object-left"
+        className="absolute left-0 top-0 z-[-1] h-full object-cover"
       />
     </div>
   );
diff --git a/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/Header.tsx b/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/Header.tsx
index c13d322..16f4f58 100644
--- a/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/Header.tsx
+++ b/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/Header.tsx
@@ -10,11 +10,11 @@ interface IHeader {
 
 const Header: React.FC<IHeader> = ({ useCasesData }) => {
   return (
-    <div className="mb-16">
-      <h2 className="mb-6 text-xl text-primary-purple">
+    <div className="mb-12 lg:mb-16">
+      <h2 className="mb-6 text-lg text-primary-purple lg:text-2xl">
         {useCasesData.useCaseTitle}
       </h2>
-      <p className="mb-12 text-lg text-secondary-text">
+      <p className="mb-12 text-secondary-text lg:mb-16 lg:text-xl">
         {useCasesData.useCaseDescription}
       </p>
       <Image
diff --git a/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/Header.tsx b/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/Header.tsx
index 87f809b..981b6ee 100644
--- a/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/Header.tsx
+++ b/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/Header.tsx
@@ -9,10 +9,10 @@ interface IHeader {
 const Header: React.FC<IHeader> = ({ useCasesData }) => {
   return (
     <div>
-      <h2 className="mb-6 text-xl text-primary-text">
+      <h2 className="mb-6 text-lg text-primary-text lg:text-xl">
         {useCasesData.keyChallenges.title}
       </h2>
-      <p className="mb-12 text-lg text-secondary-text">
+      <p className="mb-12 text-secondary-text lg:text-lg">
         {useCasesData.keyChallenges.description}
       </p>
     </div>
diff --git a/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/HowKlerosSolvesIt.tsx b/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/HowKlerosSolvesIt.tsx
index 32f70c8..7ed4584 100644
--- a/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/HowKlerosSolvesIt.tsx
+++ b/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/HowKlerosSolvesIt.tsx
@@ -1,15 +1,8 @@
 import React from "react";
 
-import clsx from "clsx";
-import Image from "next/image";
-
-import CustomLink from "@/components/CustomLink";
-import Card from "@/components/Navbar/AppsDropdownContent/Card";
 import { UseCasesQueryType } from "@/queries/for-builders/use-cases";
 
-const hoverEffect = clsx(
-  "hover:scale-[1.03] transform transition duration-100",
-);
+import SafeSnap from "./SafeSnap";
 
 interface IHowKlerosSolvesIt {
   useCasesData: UseCasesQueryType["forBuildersPageUseCasesSection"];
@@ -18,45 +11,10 @@ interface IHowKlerosSolvesIt {
 const HowKlerosSolvesIt: React.FC<IHowKlerosSolvesIt> = ({ useCasesData }) => {
   return (
     <div>
-      <h2 className="mb-6 text-xl text-primary-purple">
+      <h2 className="mb-8 text-lg text-primary-purple lg:text-xl">
         {useCasesData.solutionSections.header}
       </h2>
-      <div className="rounded-2xl border border-stroke bg-background-2 p-6">
-        <h2 className="mb-4 text-xl">{useCasesData.solutionSections.title}</h2>
-        <div className="mb-8 text-lg text-secondary-text">
-          {useCasesData.solutionSections.description}
-        </div>
-        <div className="mb-4 text-secondary-text">
-          {useCasesData.solutionSections.solutionHeader}
-        </div>
-        <div className="mb-6">
-          <Card
-            key={useCasesData.solutionSections?.solution?.solution_name}
-            solution={useCasesData.solutionSections.solution}
-            variant="small"
-          />
-        </div>
-        <div className="mb-4 text-secondary-text">
-          {useCasesData.solutionSections.partnersHeader}
-        </div>
-        <div className="flex flex-row gap-x-6 rounded-2xl border border-stroke p-4">
-          {useCasesData.solutionSections.partners.map((partner) => (
-            <CustomLink
-              key={partner?.name}
-              href={partner?.url}
-              className={clsx(hoverEffect, "cursor-pointer")}
-            >
-              <Image
-                key={partner?.name}
-                src={partner?.icon_svg?.url}
-                alt={partner?.name}
-                width={64}
-                height={64}
-              />
-            </CustomLink>
-          ))}
-        </div>
-      </div>
+      <SafeSnap {...{ useCasesData }} />
     </div>
   );
 };
diff --git a/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/SafeSnap.tsx b/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/SafeSnap.tsx
new file mode 100644
index 0000000..b728081
--- /dev/null
+++ b/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/SafeSnap.tsx
@@ -0,0 +1,67 @@
+import clsx from "clsx";
+import Image from "next/image";
+
+import CustomLink from "@/components/CustomLink";
+import Card from "@/components/Navbar/AppsDropdownContent/Card";
+import { UseCasesQueryType } from "@/queries/for-builders/use-cases";
+
+interface ISafeSnap {
+  useCasesData: UseCasesQueryType["forBuildersPageUseCasesSection"];
+}
+
+const SafeSnap: React.FC<ISafeSnap> = ({ useCasesData }) => {
+  return (
+    <div className="rounded-2xl border border-stroke bg-background-2 p-6 pb-8 lg:p-8 lg:pb-16">
+      <h2 className="mb-4 text-lg font-medium lg:text-xl">
+        {useCasesData.solutionSections.title}
+      </h2>
+      <div className="mb-8 text-secondary-text lg:text-lg">
+        {useCasesData.solutionSections.description}
+      </div>
+
+      <div className="flex flex-col gap-6 lg:flex-row">
+        <div className="flex flex-col gap-4">
+          <div className="text-secondary-text">
+            {useCasesData.solutionSections.solutionHeader}
+          </div>
+          <div>
+            <Card
+              key={useCasesData.solutionSections?.solution?.solution_name}
+              solution={useCasesData.solutionSections.solution}
+              variant="small"
+              className="border-gradient-purple-blue !rounded-2xl border-none before:!p-[1px]"
+            />
+          </div>
+        </div>
+
+        <div className="flex flex-grow flex-col gap-4">
+          <div className="text-secondary-text">
+            {useCasesData.solutionSections.partnersHeader}
+          </div>
+          <div className="border-gradient-purple-blue flex flex-row gap-x-6 !rounded-2xl p-4 before:!p-[1px]">
+            {useCasesData.solutionSections.partners.map((partner) => (
+              <CustomLink
+                key={partner?.name}
+                href={partner?.url}
+                className={clsx(
+                  "transform transition duration-100 hover:scale-[1.01]",
+                  "cursor-pointer",
+                )}
+              >
+                <Image
+                  key={partner?.name}
+                  src={partner?.icon_svg?.url}
+                  alt={partner?.name}
+                  width={64}
+                  height={64}
+                />
+              </CustomLink>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SafeSnap;
diff --git a/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/LearnMore.tsx b/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/LearnMore.tsx
deleted file mode 100644
index ab04e36..0000000
--- a/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/LearnMore.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from "react";
-
-import Image from "next/image";
-
-import LinkArrow from "@/assets/svgs/icons/link-arrow.svg";
-import CustomLink from "@/components/CustomLink";
-import { UseCasesQueryType } from "@/queries/for-builders/use-cases";
-
-interface ILearnMore {
-  useCasesData: UseCasesQueryType["forBuildersPageUseCasesSection"];
-}
-
-const LearnMore: React.FC<ILearnMore> = ({ useCasesData }) => {
-  return (
-    <CustomLink
-      href={useCasesData.arrowLink.link.url}
-      className="mt-16 block text-center"
-    >
-      <span className="mr-4 text-lg text-primary-blue">
-        {useCasesData.arrowLink.text}
-      </span>
-      <Image
-        src={LinkArrow}
-        width="24"
-        height="24"
-        alt="Arrow link image"
-        className="inline"
-      />
-    </CustomLink>
-  );
-};
-export default LearnMore;
diff --git a/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/index.tsx b/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/index.tsx
index 04819c4..d6b4a0a 100644
--- a/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/index.tsx
+++ b/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/index.tsx
@@ -1,10 +1,10 @@
 import React from "react";
 
+import ExternalLink from "@/components/ExternalLink";
 import { UseCasesQueryType } from "@/queries/for-builders/use-cases";
 
 import Header from "./Header";
 import KeyChallenges from "./KeyChallenges";
-import LearnMore from "./LearnMore";
 
 interface IDAOSection {
   useCasesData: UseCasesQueryType["forBuildersPageUseCasesSection"];
@@ -15,7 +15,11 @@ const DAOSection: React.FC<IDAOSection> = ({ useCasesData }) => {
     <div>
       <Header {...{ useCasesData }} />
       <KeyChallenges {...{ useCasesData }} />
-      <LearnMore {...{ useCasesData }} />
+      <ExternalLink
+        url={useCasesData.arrowLink.link.url}
+        text={useCasesData.arrowLink.text}
+        className="mt-12 flex-wrap justify-center lg:mt-16 lg:justify-start"
+      />
     </div>
   );
 };
diff --git a/frontend/src/components/ForBuilders/UseCasesSection/index.tsx b/frontend/src/components/ForBuilders/UseCasesSection/index.tsx
index db01e84..b6498f6 100644
--- a/frontend/src/components/ForBuilders/UseCasesSection/index.tsx
+++ b/frontend/src/components/ForBuilders/UseCasesSection/index.tsx
@@ -11,8 +11,8 @@ interface IUseCasesSection {
 
 const UseCasesSection: React.FC<IUseCasesSection> = ({ useCasesData }) => {
   return (
-    <div className="relative bg-background-1 px-6 pb-16 pt-16">
-      <h1 className="mb-12 text-3xl font-medium">
+    <div className="relative bg-background-1 px-6 py-16 md:px-32 md:py-24">
+      <h1 className="mb-8 text-xl font-medium lg:mb-12 lg:text-3xl">
         {useCasesData.sectionHeader}
       </h1>
       <UseCasesCards selectedIndex={0} />
diff --git a/frontend/src/components/IntegrateSection/LearnMore.tsx b/frontend/src/components/IntegrateSection/LearnMore.tsx
deleted file mode 100644
index 096dc73..0000000
--- a/frontend/src/components/IntegrateSection/LearnMore.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from "react";
-
-import Image from "next/image";
-
-import LinkArrow from "@/assets/svgs/icons/link-arrow.svg";
-import { IntegrateQueryType } from "@/queries/integrate";
-
-import CustomLink from "../CustomLink";
-
-interface ILearnMore {
-  integrateData: IntegrateQueryType["forBuildersPageIntegrateSection"];
-}
-
-const LearnMore: React.FC<ILearnMore> = ({ integrateData }) => {
-  return (
-    <CustomLink
-      href={integrateData.arrowLink.link.url}
-      className="mt-16 block text-center"
-    >
-      <span className="mr-4 text-lg text-primary-blue">
-        {integrateData.arrowLink.text}
-      </span>
-      <Image
-        src={LinkArrow}
-        width="24"
-        height="24"
-        alt="Arrow link image"
-        className="inline"
-      />
-    </CustomLink>
-  );
-};
-export default LearnMore;
diff --git a/frontend/src/components/IntegrateSection/index.tsx b/frontend/src/components/IntegrateSection/index.tsx
index 1347151..210e07c 100644
--- a/frontend/src/components/IntegrateSection/index.tsx
+++ b/frontend/src/components/IntegrateSection/index.tsx
@@ -1,35 +1,37 @@
 import React from "react";
 
-import CtaBox from "@/components/CtaBox";
 import ExternalLink from "@/components/ExternalLink";
 import AppsDropdownContent from "@/components/Navbar/AppsDropdownContent";
 import { integrateQuery, IntegrateQueryType } from "@/queries/integrate";
 import { request } from "@/utils/graphQLClient";
 
+import LearnMore from "../LearnMore";
+
 const IntegrateSection: React.FC = async () => {
   const integrateData = await request<IntegrateQueryType>(integrateQuery).then(
     (res) => res.forBuildersPageIntegrateSection,
   );
 
   return (
-    <div className="bg-background-2 px-6 pb-16 pt-12">
+    <div className="bg-background-2 px-6 py-12 lg:px-32 lg:py-24">
       <h2 className="mb-8 text-base text-primary-purple lg:text-lg">
         {integrateData.header}
       </h2>
-      <h1 className="mb-8 text-xl text-primary-text lg:text-2xl">
+      <h1 className="mb-8 text-xl text-primary-text lg:text-3xl">
         {integrateData.title}
       </h1>
-      <p className="text-base text-secondary-text lg:text-lg">
+      <p className="text-base text-secondary-text lg:mb-4 lg:text-lg">
         {integrateData.description}
       </p>
       <AppsDropdownContent appsSection={integrateData.appsSection} />
-      <CtaBox
+      <LearnMore
         background={integrateData.getInTouchSection.background}
-        header={integrateData.header}
+        title={integrateData.header}
         button={integrateData.arrowLink}
+        className="!mt-16 lg:!mt-4"
       />
       <ExternalLink
-        className="mt-12 text-center"
+        className="mt-12 flex-wrap justify-center text-center lg:mt-16"
         text={integrateData.arrowLink.text}
         url={integrateData.arrowLink.link.url}
       />
diff --git a/frontend/src/components/LearnMore.tsx b/frontend/src/components/LearnMore.tsx
index 416147b..5aeb750 100644
--- a/frontend/src/components/LearnMore.tsx
+++ b/frontend/src/components/LearnMore.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 
+import clsx from "clsx";
 import Image from "next/image";
 
 import Button from "@/components/Button";
@@ -13,14 +14,21 @@ interface ILearnMore {
   background: {
     url: string;
   };
+  className?: string;
 }
 
-const LearnMore: React.FC<ILearnMore> = ({ title, button, background }) => {
+const LearnMore: React.FC<ILearnMore> = ({
+  title,
+  button,
+  background,
+  className,
+}) => {
   return (
     <div
-      className={
-        "relative mt-16 flex w-full flex-col items-center justify-center p-8"
-      }
+      className={clsx(
+        "relative mt-16 flex w-full flex-col items-center justify-center p-8",
+        className,
+      )}
     >
       <h2 className="z-[1] mb-8 text-center text-lg text-primary-text lg:text-xl">
         {title}
diff --git a/frontend/src/components/Navbar/AppsDropdownContent/Card.tsx b/frontend/src/components/Navbar/AppsDropdownContent/Card.tsx
index 79d5f80..3db3739 100644
--- a/frontend/src/components/Navbar/AppsDropdownContent/Card.tsx
+++ b/frontend/src/components/Navbar/AppsDropdownContent/Card.tsx
@@ -17,18 +17,26 @@ const descriptionTextStyle = clsx(
 interface CardProps {
   solution: Solution;
   variant: "large" | "medium" | "small";
+  className?: string;
 }
 
-const Card: React.FC<CardProps> = ({ solution, variant }) => {
+const Card: React.FC<CardProps> = ({ solution, variant, className }) => {
   return (
     <CustomLink
       key={solution?.solution_name}
       href={solution?.url}
-      className={clsx(cardBaseStyle, hoverEffect, "flex-row", "w-full", {
-        "xl:flex-col xl:pb-8": variant === "large",
-        "xl:flex-row": variant === "medium" || variant === "small",
-        "xl:w-[380px]": true,
-      })}
+      className={clsx(
+        cardBaseStyle,
+        hoverEffect,
+        "flex-row",
+        "w-full",
+        {
+          "xl:flex-col xl:pb-8": variant === "large",
+          "xl:flex-row": variant === "medium" || variant === "small",
+          "xl:w-[380px]": true,
+        },
+        className,
+      )}
     >
       <Image
         src={solution?.logo_svg?.url}
diff --git a/frontend/src/components/Navbar/AppsDropdownContent/index.tsx b/frontend/src/components/Navbar/AppsDropdownContent/index.tsx
index d65f1cf..4a4a196 100644
--- a/frontend/src/components/Navbar/AppsDropdownContent/index.tsx
+++ b/frontend/src/components/Navbar/AppsDropdownContent/index.tsx
@@ -1,8 +1,6 @@
 import clsx from "clsx";
-import Image from "next/image";
 
-import LinkArrow from "@/assets/svgs/icons/link-arrow.svg";
-import CustomLink from "@/components/CustomLink";
+import ExternalLink from "@/components/ExternalLink";
 import { AppsSection } from "@/queries/navbar";
 
 import Card from "./Card";
@@ -51,19 +49,11 @@ const AppsDropdownContent: React.FC<AppsDropdownContentProps> = ({
             variant="small"
           />
         ))}
-        <CustomLink
-          href={appsSection?.arrowLink.link.url}
-          className="self-start text-primary-blue xl:self-end"
-        >
-          <span className="mr-4">{appsSection?.arrowLink.text}</span>
-          <Image
-            src={LinkArrow}
-            width={24}
-            height={24}
-            alt="Arrow link"
-            className="inline"
-          />
-        </CustomLink>
+        <ExternalLink
+          url={appsSection?.arrowLink.link.url}
+          text={appsSection?.arrowLink.text}
+          className="self-start xl:self-end"
+        />
       </div>
     </div>
   );
diff --git a/frontend/src/components/ResearchDevelopment/TabSection/FellowshipTabContent/Testimonials/TestimonialCard.tsx b/frontend/src/components/ResearchDevelopment/TabSection/FellowshipTabContent/Testimonials/TestimonialCard.tsx
index 5f6c467..df3ade3 100644
--- a/frontend/src/components/ResearchDevelopment/TabSection/FellowshipTabContent/Testimonials/TestimonialCard.tsx
+++ b/frontend/src/components/ResearchDevelopment/TabSection/FellowshipTabContent/Testimonials/TestimonialCard.tsx
@@ -1,19 +1,16 @@
-import Image from "next/image";
-
-import CustomLink from "@/components/CustomLink";
 import { Testimonial } from "@/queries/research-development/tabs-data";
 
-const TestimonialCard: React.FC<Testimonial> = ({ url, thumbnail }) => (
-  <CustomLink href={url}>
-    <div className="relative h-[203px] w-full overflow-hidden rounded-2xl">
-      <Image
-        src={thumbnail.url}
-        alt="Thumbnail"
-        fill
-        className="object-cover"
-      />
-    </div>
-  </CustomLink>
+const TestimonialCard: React.FC<Testimonial> = ({ url }) => (
+  <div className="relative h-[203px] w-full overflow-hidden rounded-2xl">
+    <iframe
+      style={{ width: "100%", height: "100%" }}
+      src={url}
+      title="YouTube video player"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+      referrerPolicy="strict-origin-when-cross-origin"
+      allowFullScreen
+    ></iframe>
+  </div>
 );
 
 export default TestimonialCard;
diff --git a/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/KlerosBook.tsx b/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/KlerosBook.tsx
index ee5d19a..745fba9 100644
--- a/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/KlerosBook.tsx
+++ b/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/KlerosBook.tsx
@@ -2,7 +2,6 @@ import clsx from "clsx";
 import Image from "next/image";
 
 import Button from "@/components/Button";
-import CustomLink from "@/components/CustomLink";
 import { KlerosBook as IKlerosBook } from "@/queries/research-development/tabs-data";
 
 const KlerosBook: React.FC<IKlerosBook> = ({
@@ -11,6 +10,33 @@ const KlerosBook: React.FC<IKlerosBook> = ({
   bookTitle,
   downloadFormats,
 }) => {
+  const handleDownload = (url: string) => {
+    fetch(url)
+      .then((response) => response.blob())
+      .then((blob) => {
+        const url = window.URL.createObjectURL(new Blob([blob]));
+        const link = document.createElement("a");
+        link.href = url;
+
+        const contentType = blob.type;
+
+        const extension = contentType.split("/")[1] || "octet-stream";
+        const fileExtension = extension === "json" ? "json" : extension;
+
+        link.download = `KlerosBook.${fileExtension}`;
+
+        document.body.appendChild(link);
+
+        link.click();
+
+        document.body.removeChild(link);
+        window.URL.revokeObjectURL(url);
+      })
+      .catch((error) => {
+        console.error("Error fetching the file:", error);
+      });
+  };
+
   return (
     <div
       className={clsx(
@@ -35,9 +61,13 @@ const KlerosBook: React.FC<IKlerosBook> = ({
         </div>
         <div className="flex flex-wrap gap-4">
           {downloadFormats.map((format) => (
-            <CustomLink key={format.text} href={format.link.url}>
-              <Button className="text-background-1">{format.text}</Button>
-            </CustomLink>
+            <Button
+              key={format.name}
+              className="text-background-1"
+              onClick={() => handleDownload(format.file.url)}
+            >
+              {format.name}
+            </Button>
           ))}
         </div>
       </div>
diff --git a/frontend/src/components/UseCasesCards.tsx b/frontend/src/components/UseCasesCards.tsx
index 5e47757..a1f2314 100644
--- a/frontend/src/components/UseCasesCards.tsx
+++ b/frontend/src/components/UseCasesCards.tsx
@@ -18,7 +18,7 @@ const UseCasesCards: React.FC<IUseCasesCards> = async ({ selectedIndex }) => {
   const useCases = useCasesData.forBuildersPageUseCasesSection.useCases;
 
   return (
-    <div className="mb-12 flex flex-row flex-wrap gap-4">
+    <div className="mb-12 flex flex-row flex-wrap gap-4 lg:mb-20">
       {useCases.map((useCase, index) => (
         <Tag
           key={index}
diff --git a/frontend/src/queries/cooperative/report-section.ts b/frontend/src/queries/cooperative/report-section.ts
index 1f6f6c3..212a4ae 100644
--- a/frontend/src/queries/cooperative/report-section.ts
+++ b/frontend/src/queries/cooperative/report-section.ts
@@ -32,18 +32,24 @@ export const cooperativePageReportQuery = gql`
     }
 
     annualReports {
-      url
+      file {
+        url
+      }
       year
     }
 
     riskReports {
-      url
+      file {
+        url
+      }
       month
       year
     }
 
     treasuryReports {
-      url
+      file {
+        url
+      }
       month
       year
     }
@@ -56,18 +62,18 @@ export type CooperativePageReportQueryType = {
   };
 
   annualReports: {
-    url: string;
+    file: { url: string };
     year: number;
   }[];
 
   riskReports: {
-    url: string;
+    file: { url: string };
     month: string;
     year: number;
   }[];
 
   treasuryReports: {
-    url: string;
+    file: { url: string };
     month: string;
     year: number;
   }[];
diff --git a/frontend/src/queries/research-development/tabs-data.ts b/frontend/src/queries/research-development/tabs-data.ts
index a682593..b40fd7b 100644
--- a/frontend/src/queries/research-development/tabs-data.ts
+++ b/frontend/src/queries/research-development/tabs-data.ts
@@ -20,8 +20,8 @@ export const tabSectionQuery = gql`
         subtitle
         bookTitle
         downloadFormats {
-          text
-          link {
+          name
+          file {
             url
           }
         }
@@ -140,7 +140,10 @@ export type Fellow = {
 export type KlerosBook = {
   subtitle: string;
   bookTitle: string;
-  downloadFormats: ArrowLink[];
+  downloadFormats: Array<{
+    name: string;
+    file: { url: string };
+  }>;
   bookCover: {
     url: string;
   };