diff --git a/frontend/src/app/for-lawyers/components/Flowchart.tsx b/frontend/src/app/for-lawyers/components/Flowchart.tsx
index fe460ee..b9526d2 100644
--- a/frontend/src/app/for-lawyers/components/Flowchart.tsx
+++ b/frontend/src/app/for-lawyers/components/Flowchart.tsx
@@ -13,7 +13,7 @@ const FlowchartItem: React.FC<IFlowchartItem> = ({
   background,
 }) => {
   return (
-    <div className="flex w-[284px] flex-col gap-6">
+    <div className="flex max-w-[270px] flex-col gap-6">
       <div
         className={clsx(
           "h-[148px] rounded-2xl bg-[linear-gradient(90deg,_#D38BFF_0%,_#9747FF_100%)]",
@@ -60,7 +60,11 @@ interface IFlowchart {
 
 const Flowchart: React.FC<IFlowchart> = ({ items, background }) => {
   return (
-    <div className="flex w-full flex-wrap justify-center gap-4 md:justify-center">
+    <div
+      className={
+        "mx-auto grid w-fit grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4"
+      }
+    >
       {items.map((item) => (
         <FlowchartItem key={item.name} {...item} background={background} />
       ))}
diff --git a/frontend/src/app/for-lawyers/components/Hero.tsx b/frontend/src/app/for-lawyers/components/Hero.tsx
index fc49816..de4efff 100644
--- a/frontend/src/app/for-lawyers/components/Hero.tsx
+++ b/frontend/src/app/for-lawyers/components/Hero.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 
-import clsx from "clsx";
 import Image from "next/image";
 
 import Button from "@/components/Button";
@@ -18,7 +17,7 @@ const Hero: React.FC = async () => {
   return (
     <div className="relative px-6 pb-28 pt-44 md:pt-52 lg:px-32 lg:pb-60">
       <div className="space-y-8">
-        <h1 className="pt-1 text-2xl font-medium lg:pt-3 lg:text-3xl">
+        <h1 className="pt-1 text-2xl font-medium lg:pt-3 lg:text-4xl">
           {header}
         </h1>
         <p className="max-w-[685px] text-lg">{subtitle}</p>
@@ -34,10 +33,7 @@ const Hero: React.FC = async () => {
         <ExternalLink
           text={arrowLink.text}
           url={arrowLink.link.url}
-          className={clsx(
-            "flex-wrap items-start lg:pb-9",
-            "[&>span]:text-start [&>span]:text-primary-text",
-          )}
+          className="text-start lg:pb-9 [&>span]:text-primary-text"
         />
       </div>
       <Image
diff --git a/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/ArbitrationMethodTable/index.tsx b/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/ArbitrationMethodTable/index.tsx
index 96f64ac..27ee32d 100644
--- a/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/ArbitrationMethodTable/index.tsx
+++ b/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/ArbitrationMethodTable/index.tsx
@@ -12,7 +12,11 @@ const ArbitrationMethodTable: React.FC<IArbitrationMethodTable> = ({
   table,
 }) => {
   return (
-    <div className="relative h-fit min-h-[1125px] w-full lg:min-h-[500px]">
+    <div
+      className={
+        "relative h-fit min-h-[1125px] w-full lg:min-h-[500px] lg:px-32"
+      }
+    >
       <div
         className={clsx(
           "box-border rounded-3xl border-2 border-stroke bg-background-2",
diff --git a/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/KlerosEscrowSection.tsx b/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/KlerosEscrowSection.tsx
index 9c2e3cf..eb3e405 100644
--- a/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/KlerosEscrowSection.tsx
+++ b/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/KlerosEscrowSection.tsx
@@ -23,24 +23,36 @@ const KlerosEscrowSection: React.FC = async () => {
   ).forLawyersPageKlerosEscrowSection;
   return (
     <div>
-      <h1 className="mb-6 text-lg font-medium text-primary-text lg:text-2xl">
+      <h1
+        className={
+          "mb-6 text-lg font-medium text-primary-text lg:px-32 lg:text-2xl"
+        }
+      >
         {header}
       </h1>
-      <p className="mb-16 text-secondary-text lg:text-lg">{subtitle}</p>
+      <p className="mb-16 text-secondary-text lg:px-32 lg:text-lg">
+        {subtitle}
+      </p>
 
-      <p className="mb-12 text-primary-purple lg:text-lg">{flowchartLabel}</p>
+      <p className="mb-12 text-primary-purple lg:px-32 lg:text-lg">
+        {flowchartLabel}
+      </p>
       <Flowchart items={flowchart} background="secondary" />
 
-      <h2 className="mb-6 mt-12 text-lg font-medium text-primary-text lg:text-xl">
+      <h2
+        className={
+          "mb-6 mt-12 text-lg font-medium text-primary-text lg:px-32 lg:text-xl"
+        }
+      >
         {secondHeader}
       </h2>
-      <p className="mb-8 text-secondary-text lg:text-lg">{secondSubtitle}</p>
+      <p className="mb-8 text-secondary-text lg:px-32 lg:text-lg">
+        {secondSubtitle}
+      </p>
 
-      <ExternalLink
-        text={arrowLink.text}
-        url={arrowLink.link.url}
-        className="flex-wrap justify-center lg:justify-start"
-      />
+      <div className="mx-auto w-fit lg:mx-0 lg:px-32">
+        <ExternalLink text={arrowLink.text} url={arrowLink.link.url} />
+      </div>
     </div>
   );
 };
diff --git a/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/ResearchSection.tsx b/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/ResearchSection.tsx
index 48412f9..70aeafd 100644
--- a/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/ResearchSection.tsx
+++ b/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/ResearchSection.tsx
@@ -36,7 +36,7 @@ const ResearchSection: React.FC<IResearchSection> = ({
   );
 
   return (
-    <div>
+    <div className="lg:px-32">
       <h2 className="mb-6 text-lg font-medium text-primary-text lg:text-xl">
         {secondHeader}
       </h2>
diff --git a/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/index.tsx b/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/index.tsx
index c344ba3..e846dc5 100644
--- a/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/index.tsx
+++ b/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/index.tsx
@@ -32,10 +32,10 @@ const KlerosDisputeResolutionSection: React.FC = async () => {
       className={clsx(
         "bg-background-2",
         "flex flex-col gap-16",
-        "px-6 py-12 lg:px-32 lg:py-24",
+        "px-6 py-12 lg:py-24",
       )}
     >
-      <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-6 lg:px-32">
         <h3 className="mb-6 text-primary-purple lg:text-lg">
           {headerSubtitle}
         </h3>
@@ -48,7 +48,7 @@ const KlerosDisputeResolutionSection: React.FC = async () => {
       <ArbitrationMethodTable table={arbitrationMethodTable} />
       <ResearchSection {...{ secondHeader, secondSubtitle, publications }} />
 
-      <div className="my-4">
+      <div className="my-4 lg:px-32">
         <h2 className="mb-6 text-lg font-medium text-primary-text lg:text-xl">
           {thirdHeader}
         </h2>
diff --git a/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/DisputeResolutionProcess.tsx b/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/DisputeResolutionProcess.tsx
index a934146..63941bb 100644
--- a/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/DisputeResolutionProcess.tsx
+++ b/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/DisputeResolutionProcess.tsx
@@ -14,7 +14,7 @@ const DisputeResolutionProcess: React.FC<IDisputeResolutionProcess> = ({
   processDiagram,
 }) => {
   return (
-    <div className="flex flex-col gap-8">
+    <div className="flex flex-col gap-8 lg:px-32">
       <HighlightedText
         {...disputeResolutionProcessHeader}
         fullTextStyle="!text-primary-text !text-lg !font-medium lg:!text-xl"
diff --git a/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/LemonCashSection.tsx b/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/LemonCashSection.tsx
index d9f9f2f..14311d5 100644
--- a/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/LemonCashSection.tsx
+++ b/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/LemonCashSection.tsx
@@ -20,7 +20,7 @@ const LemonCashSection: React.FC = async () => {
     .lemonCashSection;
 
   return (
-    <div>
+    <div className="lg:px-32">
       <h2 className="mb-6 text-lg font-medium text-primary-text lg:text-2xl">
         {header}
       </h2>
diff --git a/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/MethodsTable/DesktopTable.tsx b/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/MethodsTable/DesktopTable.tsx
index 2240ff0..050e892 100644
--- a/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/MethodsTable/DesktopTable.tsx
+++ b/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/MethodsTable/DesktopTable.tsx
@@ -41,7 +41,9 @@ const DesktopTable: React.FC<IMethodsTable> = ({ table }) => {
               rowIndex !== tableRows.length - 1 && "border-b border-b-stroke",
             )}
           >
-            <span className="break-words text-lg font-medium text-primary-purple">
+            <span
+              className={"break-words text-lg font-medium text-primary-purple"}
+            >
               {rowHeading}
             </span>
           </div>
diff --git a/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/index.tsx b/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/index.tsx
index 92efcb2..d63f1f3 100644
--- a/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/index.tsx
+++ b/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/index.tsx
@@ -34,10 +34,10 @@ const KlerosEnterpriseSection: React.FC = async () => {
       className={clsx(
         "bg-background-2",
         "flex flex-col gap-12 lg:gap-16",
-        "px-6 py-12 lg:px-32 lg:py-24",
+        "px-6 py-12 lg:py-24",
       )}
     >
-      <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-6 lg:px-32">
         <h3 className="text-primary-purple lg:text-lg">{headerSubtitle}</h3>
         <h1 className="text-xl font-medium text-primary-text lg:text-3xl">
           {header}
@@ -45,7 +45,7 @@ const KlerosEnterpriseSection: React.FC = async () => {
         <HighlightedText {...subtitle} />
       </div>
 
-      <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
+      <div className="grid grid-cols-1 gap-6 lg:grid-cols-3 lg:px-32">
         {cards.map((card) => (
           <Card key={card.title} {...card} />
         ))}
@@ -59,11 +59,9 @@ const KlerosEnterpriseSection: React.FC = async () => {
       />
 
       <LemonCashSection />
-      <ExternalLink
-        url={arrowLink.link.url}
-        text={arrowLink.text}
-        className="flex-wrap justify-center"
-      />
+      <div className="mx-auto lg:px-32">
+        <ExternalLink url={arrowLink.link.url} text={arrowLink.text} />
+      </div>
       <MethodsTable {...{ table }} />
     </div>
   );
diff --git a/frontend/src/app/for-lawyers/components/KlerosFellowSection/index.tsx b/frontend/src/app/for-lawyers/components/KlerosFellowSection/index.tsx
index b1f33f5..4a68b18 100644
--- a/frontend/src/app/for-lawyers/components/KlerosFellowSection/index.tsx
+++ b/frontend/src/app/for-lawyers/components/KlerosFellowSection/index.tsx
@@ -56,7 +56,7 @@ const KlerosFellowSection: React.FC = async () => {
       <ExternalLink
         text={arrowLink.text}
         url={arrowLink.link.url}
-        className="w-full flex-wrap justify-center"
+        className="mx-auto"
       />
     </div>
   );
diff --git a/frontend/src/app/for-lawyers/components/KlerosMediationSection/index.tsx b/frontend/src/app/for-lawyers/components/KlerosMediationSection/index.tsx
index bd58225..adecd92 100644
--- a/frontend/src/app/for-lawyers/components/KlerosMediationSection/index.tsx
+++ b/frontend/src/app/for-lawyers/components/KlerosMediationSection/index.tsx
@@ -21,10 +21,10 @@ const KlerosMediationSection: React.FC = async () => {
       className={clsx(
         "bg-background-1",
         "flex flex-col gap-16",
-        "px-6 py-12 lg:px-32 lg:py-24",
+        "px-6 py-12 lg:py-24",
       )}
     >
-      <div className="flex flex-col gap-8">
+      <div className="flex flex-col gap-8 lg:px-32">
         <h1 className="text-xl font-medium text-primary-text lg:text-3xl">
           {header}
         </h1>
@@ -33,7 +33,7 @@ const KlerosMediationSection: React.FC = async () => {
 
       <Flowchart items={flowchart} background="primary" />
 
-      <div className="flex flex-col gap-8">
+      <div className="flex flex-col gap-8 lg:px-32">
         <h2 className="text-lg text-primary-text lg:text-xl">
           {benefitsHeader}
         </h2>
@@ -47,7 +47,7 @@ const KlerosMediationSection: React.FC = async () => {
       <ExternalLink
         text={arrowLink.text}
         url={arrowLink.link.url}
-        className="w-full flex-wrap justify-center"
+        className="mx-auto"
       />
     </div>
   );
diff --git a/frontend/src/app/home/components/CaseStudies.tsx b/frontend/src/app/home/components/CaseStudies.tsx
index 5e73bb0..90836f4 100644
--- a/frontend/src/app/home/components/CaseStudies.tsx
+++ b/frontend/src/app/home/components/CaseStudies.tsx
@@ -19,7 +19,7 @@ const CaseStudies: React.FC = async () => {
         <h3 className="text-xl font-medium lg:text-3xl">{title}</h3>
         <p className="text-base lg:text-lg">{subtitle}</p>
       </div>
-      <div className="mt-16 grid grid-cols-1 gap-4 md:grid-cols-3">
+      <div className="mt-16 grid grid-cols-1 gap-4 lg:grid-cols-3">
         {cards.map(({ title, subtitle, icon, link }) => (
           <CtaCard
             key={title}
diff --git a/frontend/src/app/home/components/GetInTouch.tsx b/frontend/src/app/home/components/GetInTouch.tsx
index bdab5f5..6d3e4d2 100644
--- a/frontend/src/app/home/components/GetInTouch.tsx
+++ b/frontend/src/app/home/components/GetInTouch.tsx
@@ -13,7 +13,11 @@ const GetInTouch: React.FC = async () => {
   ).then((res) => res.homeGetInTouchSection);
 
   return (
-    <div className="bg-background-1 px-6 py-12 md:grid md:grid-cols-2 lg:px-32 lg:py-24">
+    <div
+      className={
+        "bg-background-1 px-6 py-12 md:grid md:grid-cols-2 lg:px-32 lg:py-24"
+      }
+    >
       <div>
         <h3 className="mb-8 text-xl font-medium lg:mb-12 lg:text-3xl">
           {title}
@@ -22,7 +26,7 @@ const GetInTouch: React.FC = async () => {
         <ExternalLink className="mb-16" text={link.text} url={link.link.url} />
       </div>
       <Image
-        className="mx-auto mb-20 lg:ml-auto"
+        className="mx-auto mb-20 lg:mx-0 lg:ml-auto lg:justify-self-end"
         alt="Kleros Logo"
         src={icon.url}
         width="296"
diff --git a/frontend/src/app/home/components/Hero.tsx b/frontend/src/app/home/components/Hero.tsx
index 5fe97c1..f8ab394 100644
--- a/frontend/src/app/home/components/Hero.tsx
+++ b/frontend/src/app/home/components/Hero.tsx
@@ -26,7 +26,7 @@ const Hero: React.FC = async () => {
   return (
     <div className="relative px-6 pb-28 pt-44 md:pt-52 lg:px-32 lg:pb-20">
       <div className="space-y-8">
-        <h1 className="text-2xl font-medium lg:text-3xl">{title}</h1>
+        <h1 className="text-2xl font-medium lg:text-4xl">{title}</h1>
         <p className="text-lg">{subtitle}</p>
         <div className="lg:hidden">
           <CustomLink href={primaryButton.link.url}>
@@ -45,7 +45,7 @@ const Hero: React.FC = async () => {
         <ExternalLink
           url={arrowLink.link.url}
           text={arrowLink.text}
-          className="[&>span]:text-base [&>span]:text-primary-text"
+          className="text-start [&>span]:text-base [&>span]:text-primary-text"
         />
         <TokenStats {...{ tokenStats }} />
       </div>
diff --git a/frontend/src/app/home/components/LearnPosts.tsx b/frontend/src/app/home/components/LearnPosts.tsx
index 65285c5..9164466 100644
--- a/frontend/src/app/home/components/LearnPosts.tsx
+++ b/frontend/src/app/home/components/LearnPosts.tsx
@@ -20,10 +20,14 @@ const LearnPosts: React.FC = async () => {
       <div className="flex flex-col gap-8">
         <h3 className="text-xl font-medium lg:text-3xl">{title}</h3>
         <p className="text-base lg:text-lg">{subtitle}</p>
-        <div className="mx-auto mb-12 mt-16 flex flex-wrap gap-4">
+        <div
+          className={
+            "mx-auto mb-12 mt-16 flex flex-wrap gap-4 xl:grid xl:grid-cols-3"
+          }
+        >
           {cards.map(({ icon, title, subtitle, link }) => (
             <CtaCard
-              className="flex-grow xl:max-h-[364px] xl:max-w-[378px]"
+              className="flex-grow"
               key={title}
               {...{ icon, title, description: subtitle, arrowLink: link }}
             />
diff --git a/frontend/src/app/home/components/TrustedBy.tsx b/frontend/src/app/home/components/TrustedBy.tsx
index 0edd871..f4dd972 100644
--- a/frontend/src/app/home/components/TrustedBy.tsx
+++ b/frontend/src/app/home/components/TrustedBy.tsx
@@ -13,23 +13,25 @@ const TrustedBy: React.FC = async () => {
     await request<PartnersQueryType>(partnersQuery);
 
   return (
-    <div className="bg-background-2 px-6 py-12 lg:px-10">
+    <div className="bg-background-2 py-12">
       <h3 className="mx-auto mb-8 w-max text-lg text-secondary-text">
         Trusted By
       </h3>
-      <div
-        className={clsx(
-          "hover-pause-child-animation",
-          "relative grid auto-cols-max grid-flow-col overflow-hidden",
-        )}
-      >
-        <PartnersCarousel {...{ partners }} />
-        <BlurredBorders />
+      <div className="px-6 lg:px-10">
+        <div
+          className={clsx(
+            "hover-pause-child-animation relative grid auto-cols-max",
+            "grid-flow-col overflow-hidden",
+          )}
+        >
+          <PartnersCarousel {...{ partners }} />
+          <BlurredBorders />
+        </div>
       </div>
       <div
         className={clsx(
-          "mt-16 grid grid-cols-1 items-center justify-items-center gap-8",
-          "lg:grid-cols-3",
+          "mt-16 flex flex-col items-center justify-items-center gap-8 px-6",
+          "md:px-32 lg:flex-row lg:justify-between xl:gap-16",
         )}
       >
         {institutions.map(({ name, link, image }) => (
diff --git a/frontend/src/app/home/components/UseCases.tsx b/frontend/src/app/home/components/UseCases.tsx
index c4b8175..1839f06 100644
--- a/frontend/src/app/home/components/UseCases.tsx
+++ b/frontend/src/app/home/components/UseCases.tsx
@@ -12,13 +12,17 @@ const UseCases: React.FC = async () => {
   ).then((res) => res.homeUseCasesSection);
 
   return (
-    <div className="space-y-8 bg-background-2 px-6 pb-12 lg:space-y-12 lg:px-32 lg:pb-24">
+    <div
+      className={
+        "space-y-8 bg-background-2 px-6 pb-12 lg:space-y-12 lg:px-32 lg:pb-24"
+      }
+    >
       <h3 className="text-xl font-medium lg:text-3xl"> {title} </h3>
       <UseCasesCards />
       <ExternalLink
         text={arrowLink.text}
         url={arrowLink.link.url}
-        className="lg:justify-center"
+        className="mx-0 lg:mx-auto"
       />
     </div>
   );
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index 5f82d50..5798181 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -28,7 +28,7 @@ export default async function RootLayout({
       <OverlayScrollbarBody className="bg-background-1 antialiased">
         <main className={clsx(urbanist.className)}>
           <Navbar {...{ navbarData }} />
-          {children}
+          <div className="mx-auto max-w-7xl"> {children} </div>
           <Footer />
         </main>
       </OverlayScrollbarBody>
diff --git a/frontend/src/components/BrandAssets/LogosPackageSection.tsx b/frontend/src/components/BrandAssets/LogosPackageSection.tsx
index b738c72..3d19352 100644
--- a/frontend/src/components/BrandAssets/LogosPackageSection.tsx
+++ b/frontend/src/components/BrandAssets/LogosPackageSection.tsx
@@ -31,7 +31,6 @@ const LogosPackageSection: React.FC<ILogosPackageSection> = ({
       <ExternalLink
         url={logosPackageData.arrowLink.link.url}
         text={logosPackageData.arrowLink.text}
-        className="z-[1] flex-wrap"
       />
     </div>
   );
diff --git a/frontend/src/components/Cooperative/MemberSection/index.tsx b/frontend/src/components/Cooperative/MemberSection/index.tsx
index a81a3bc..67e8095 100644
--- a/frontend/src/components/Cooperative/MemberSection/index.tsx
+++ b/frontend/src/components/Cooperative/MemberSection/index.tsx
@@ -16,13 +16,16 @@ const MemberSection: React.FC<IMemberSection> = ({ memberData }) => {
         {memberData.subtitle}
       </p>
       <LearnMore {...memberData.learnMoreSection} />
-      <h1 className="mb-8 mt-16 text-xl font-medium text-primary-text lg:text-3xl">
+      <h1
+        className={
+          "mb-8 mt-16 text-xl font-medium text-primary-text lg:text-3xl"
+        }
+      >
         {memberData.secondaryHeader}
       </h1>
       <ExternalLink
         url={memberData.arrowLink.link.url}
         text={memberData.arrowLink.text}
-        className="!gap-2"
       />
     </div>
   );
diff --git a/frontend/src/components/Cooperative/hero.tsx b/frontend/src/components/Cooperative/hero.tsx
index 926f57e..0a90d6d 100644
--- a/frontend/src/components/Cooperative/hero.tsx
+++ b/frontend/src/components/Cooperative/hero.tsx
@@ -33,7 +33,9 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
         <ExternalLink
           url={arrowLink.link.url}
           text={arrowLink.text}
-          className="lg:pb-6 [&>span]:text-base [&>span]:text-primary-text"
+          className={
+            "text-start lg:pb-6 [&>span]:text-base [&>span]:text-primary-text"
+          }
         />
       </div>
       <Image
diff --git a/frontend/src/components/CtaCard.tsx b/frontend/src/components/CtaCard.tsx
index 60c3b53..8b64c01 100644
--- a/frontend/src/components/CtaCard.tsx
+++ b/frontend/src/components/CtaCard.tsx
@@ -54,7 +54,7 @@ const CtaCard: React.FC<ICtaCard> = ({
           <ExternalLink
             text={arrowLink.text}
             url={arrowLink.link.url}
-            className="mb-1 mt-6 flex-wrap justify-start"
+            className="mb-1 mt-6 text-start"
           />
         </div>
       ) : null}
diff --git a/frontend/src/components/Earn/Hero.tsx b/frontend/src/components/Earn/Hero.tsx
index bbe9cf1..7203d8b 100644
--- a/frontend/src/components/Earn/Hero.tsx
+++ b/frontend/src/components/Earn/Hero.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 
+import clsx from "clsx";
 import Image from "next/image";
 
 import { HeroQueryType } from "@/queries/earn/hero";
@@ -16,7 +17,12 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
         <h1 className="text-2xl font-medium lg:text-4xl">{title}</h1>
         <p className="text-lg">{subtitle}</p>
 
-        <div className="flex items-center gap-8 rounded-full bg-background-translucent p-4 pr-8 md:w-fit">
+        <div
+          className={clsx(
+            "flex w-fit items-center gap-8 rounded-full",
+            "bg-background-translucent p-4 pr-8",
+          )}
+        >
           <Image
             src={statDisplay.icon.url}
             alt="icon"
diff --git a/frontend/src/components/Earn/TabSection/CuratorTabContent/KlerosScoutSection.tsx b/frontend/src/components/Earn/TabSection/CuratorTabContent/KlerosScoutSection.tsx
index 724a1d5..f8c875e 100644
--- a/frontend/src/components/Earn/TabSection/CuratorTabContent/KlerosScoutSection.tsx
+++ b/frontend/src/components/Earn/TabSection/CuratorTabContent/KlerosScoutSection.tsx
@@ -21,7 +21,7 @@ const KlerosScoutSection: React.FC<IKlerosScoutSection> = ({
         "flex flex-col gap-8 px-6 py-8 md:px-8 md:py-12",
       )}
     >
-      <div className="flex flex-col gap-6 md:flex-row">
+      <div className="flex flex-row gap-6">
         <Image
           width={128}
           height={128}
@@ -30,26 +30,30 @@ const KlerosScoutSection: React.FC<IKlerosScoutSection> = ({
           alt="Product Icon"
         />
         <div className="flex flex-col gap-4">
-          <div className="text-primary-purple lg:text-lg">{header}</div>
-          <div className="text-lg text-primary-text md:text-2xl">
+          <span className="text-primary-purple lg:text-lg">{header}</span>
+          <span className="text-lg text-primary-text md:text-2xl">
             {productName}
-          </div>
+          </span>
         </div>
       </div>
       <div
-        style={{ backgroundImage: `url(${background.url})` }}
         className={clsx(
-          "relative h-[308px] rounded-2xl md:h-[380px]",
-          "bg-cover bg-[-314px] md:bg-[0px]",
-          "flex items-center justify-center pt-3 md:pt-0",
+          "relative flex h-[308px] items-center justify-center rounded-2xl",
+          "md:h-[380px]",
         )}
       >
         <CustomLink
           href={learnMoreButton.link.url}
-          className="z-[1] mt-16 md:mt-0"
+          className="relative z-10 mt-14 block h-fit w-fit rounded-full md:mt-0"
         >
           <Button className="text-background-1">{learnMoreButton.text}</Button>
         </CustomLink>
+        <Image
+          src={background.url}
+          alt="Background Image"
+          fill
+          className="rounded-2xl object-cover object-[65%]"
+        />
       </div>
       <div className="flex flex-col items-center gap-6 md:flex-row lg:gap-8">
         {arrowLinks.map((arrowLink) => (
diff --git a/frontend/src/components/Earn/TabSection/CuratorTabContent/index.tsx b/frontend/src/components/Earn/TabSection/CuratorTabContent/index.tsx
index 082c811..7d3b0da 100644
--- a/frontend/src/components/Earn/TabSection/CuratorTabContent/index.tsx
+++ b/frontend/src/components/Earn/TabSection/CuratorTabContent/index.tsx
@@ -14,7 +14,7 @@ const CuratorTabContent: React.FC<EarnPageBecomeACuratorTab> = ({
 }) => {
   return (
     <div className="space-y-12 pb-7 pt-[88px] lg:pb-12 lg:pt-24">
-      <div className="text-xl font-medium text-primary-text md:text-3xl">
+      <div className="text-xl font-medium text-primary-text lg:text-3xl">
         {title}
       </div>
       <div className="text-secondary-text lg:text-lg">{description}</div>
@@ -26,7 +26,7 @@ const CuratorTabContent: React.FC<EarnPageBecomeACuratorTab> = ({
       <ExternalLink
         url={arrowLink.link.url}
         text={arrowLink.text}
-        className="flex-wrap justify-center"
+        className="mx-auto"
       />
       <p className="pt-8 text-secondary-text lg:text-lg">{scoutExplanation}</p>
       <KlerosScoutSection {...klerosScoutSection} />
diff --git a/frontend/src/components/Earn/TabSection/JurorTabContent/CourtsSection.tsx b/frontend/src/components/Earn/TabSection/JurorTabContent/CourtsSection.tsx
index 2833ffd..29b95ff 100644
--- a/frontend/src/components/Earn/TabSection/JurorTabContent/CourtsSection.tsx
+++ b/frontend/src/components/Earn/TabSection/JurorTabContent/CourtsSection.tsx
@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import Image from "next/image";
 
 import PlusIcon from "@/assets/svgs/icons/plus-icon.svg";
@@ -18,23 +19,24 @@ const CourtsSection: React.FC<ICourtsSection> = ({
 }) => {
   return (
     <>
-      <h2 className="text-lg font-medium md:text-xl md:font-normal lg:pt-4">
+      <h2 className="text-lg font-medium lg:pt-4 lg:text-xl lg:font-normal">
         {mostActiveCourtsHeader}
       </h2>
       <div className="flex flex-row flex-wrap items-center gap-4">
         {mostActiveCourts.map((court) => (
-          <Tag
-            key={court.name}
-            text={court.name}
-            className="!text-base leading-none"
-          />
+          <Tag key={court.name} text={court.name} />
         ))}
         <CustomLink href={courtsButton.link.url}>
-          <button className="border-gradient-purple-blue h-12 w-12">
+          <button
+            className={clsx(
+              "border-gradient-purple-blue flex h-8 w-8 items-center",
+              "justify-center px-2 lg:h-12 lg:w-12",
+            )}
+          >
             <Image
               src={PlusIcon}
               width="24"
-              height="18"
+              height="19"
               alt="Plus icon"
               className="inline"
             />
diff --git a/frontend/src/components/Earn/TabSection/JurorTabContent/EnterCourtSection.tsx b/frontend/src/components/Earn/TabSection/JurorTabContent/EnterCourtSection.tsx
index ec28cc2..acc1d70 100644
--- a/frontend/src/components/Earn/TabSection/JurorTabContent/EnterCourtSection.tsx
+++ b/frontend/src/components/Earn/TabSection/JurorTabContent/EnterCourtSection.tsx
@@ -13,7 +13,11 @@ const EnterCourtSection: React.FC<IEnterCourtSection> = ({
   background,
 }) => {
   return (
-    <div className="relative mt-16 flex w-full flex-col items-center justify-center p-8">
+    <div
+      className={
+        "relative mt-16 flex w-full flex-col items-center justify-center p-8"
+      }
+    >
       <CustomLink href={button.link.url} className="z-[1] mb-8">
         <Button>
           <span className="text-background-2">{button.text}</span>
diff --git a/frontend/src/components/Earn/TabSection/JurorTabContent/index.tsx b/frontend/src/components/Earn/TabSection/JurorTabContent/index.tsx
index f02b084..8e3b455 100644
--- a/frontend/src/components/Earn/TabSection/JurorTabContent/index.tsx
+++ b/frontend/src/components/Earn/TabSection/JurorTabContent/index.tsx
@@ -15,7 +15,7 @@ const JurorTabContent: React.FC<EarnPageBecomeAJurorTab> = ({
 }) => {
   return (
     <div className="space-y-8 pb-7 pt-[88px] lg:space-y-12 lg:pb-12 lg:pt-24">
-      <div className="text-xl font-medium text-primary-text md:text-3xl">
+      <div className="text-xl font-medium text-primary-text lg:text-3xl">
         {title}
       </div>
       <div className="text-secondary-text lg:text-lg">{description}</div>
diff --git a/frontend/src/components/ExternalLink.tsx b/frontend/src/components/ExternalLink.tsx
index d75519b..bc65f7d 100644
--- a/frontend/src/components/ExternalLink.tsx
+++ b/frontend/src/components/ExternalLink.tsx
@@ -17,18 +17,20 @@ const ExternalLink: React.FC<IExternalLink> = ({ text, url, className }) => {
     <CustomLink
       href={url}
       className={clsx(
-        "flex items-center gap-4 hover:brightness-[1.2]",
+        "block w-fit text-center hover:brightness-[1.2]",
         className,
       )}
     >
-      <span className="text-center text-primary-blue md:text-lg">{text}</span>
-      <Image
-        src={LinkArrow}
-        width="24"
-        height="24"
-        alt="Arrow link image"
-        className="inline aspect-square w-4 md:w-6"
-      />
+      <span className="text-center text-primary-blue md:text-lg">
+        <span className="mr-2 md:mr-4"> {text} </span>
+        <Image
+          src={LinkArrow}
+          width="24"
+          height="24"
+          alt="Arrow link image"
+          className="inline-block aspect-square w-4 md:w-6"
+        />
+      </span>
     </CustomLink>
   );
 };
diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
index 1e3d6ef..14191bf 100644
--- a/frontend/src/components/Footer.tsx
+++ b/frontend/src/components/Footer.tsx
@@ -20,7 +20,7 @@ const Footer: React.FC = async () => {
     cta: result.footerSubscribeCta,
   }));
   return (
-    <div>
+    <div className="mx-auto max-w-7xl">
       <div className={"bg-background-dark py-16 md:px-16 xl:px-32"}>
         <div
           className={clsx(
@@ -54,22 +54,29 @@ const Footer: React.FC = async () => {
       </div>
       <div
         className={clsx(
-          ["flex flex-col items-center justify-center"],
-          ["bg-background-2 py-16"],
+          "relative grid grid-cols-1 items-center justify-items-center gap-8",
+          "bg-background-2 py-16 md:grid-cols-3 md:gap-0 md:px-16 xl:px-32",
         )}
       >
         <Image
+          className="md:justify-self-start"
           src={cta.logo.url}
           alt="kleros logo"
           width="185"
           height="48"
-          className="mb-8"
         />
-        <p className="mb-8">{cta.notice}</p>
-        <p className="mb-6">{cta.cta_text}</p>
-        <Button>
-          <span className="text-background-2">{cta.cta_button}</span>
-        </Button>
+        <p className="md:justify-self-center"> {cta.notice} </p>
+        <div
+          className={clsx(
+            "flex flex-col items-center justify-items-center gap-6 md:flex-row",
+            "md:justify-self-end",
+          )}
+        >
+          <p>{cta.cta_text}</p>
+          <Button>
+            <span className="text-background-2">{cta.cta_button}</span>
+          </Button>
+        </div>
       </div>
     </div>
   );
diff --git a/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/Header.tsx b/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/Header.tsx
index 0811d88..7cc0dc4 100644
--- a/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/Header.tsx
+++ b/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/Header.tsx
@@ -18,12 +18,14 @@ const Header: React.FC<IHeader> = ({ useCasesData }) => {
       </p>
       <ResponsiveImage
         mobileProps={{
+          className: "mx-auto",
           src: useCasesData.useCaseBanner.mobile.url,
           alt: "UseCaseBanner mobile",
-          width: 400,
-          height: 835,
+          width: 294,
+          height: 798,
         }}
         desktopProps={{
+          className: "mx-auto",
           src: useCasesData.useCaseBanner.desktop.url,
           alt: "UseCaseBanner mobile",
           width: 1182,
diff --git a/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/index.tsx b/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/index.tsx
index d6b4a0a..aba535d 100644
--- a/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/index.tsx
+++ b/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/index.tsx
@@ -18,7 +18,7 @@ const DAOSection: React.FC<IDAOSection> = ({ useCasesData }) => {
       <ExternalLink
         url={useCasesData.arrowLink.link.url}
         text={useCasesData.arrowLink.text}
-        className="mt-12 flex-wrap justify-center lg:mt-16 lg:justify-start"
+        className="mx-auto mt-12 md:mx-0 lg:mt-16"
       />
     </div>
   );
diff --git a/frontend/src/components/ForBuilders/UseCasesSection/index.tsx b/frontend/src/components/ForBuilders/UseCasesSection/index.tsx
index b6498f6..bb9ddec 100644
--- a/frontend/src/components/ForBuilders/UseCasesSection/index.tsx
+++ b/frontend/src/components/ForBuilders/UseCasesSection/index.tsx
@@ -11,7 +11,7 @@ interface IUseCasesSection {
 
 const UseCasesSection: React.FC<IUseCasesSection> = ({ useCasesData }) => {
   return (
-    <div className="relative bg-background-1 px-6 py-16 md:px-32 md:py-24">
+    <div className="relative bg-background-1 px-6 py-16 md:py-24 lg:px-32">
       <h1 className="mb-8 text-xl font-medium lg:mb-12 lg:text-3xl">
         {useCasesData.sectionHeader}
       </h1>
diff --git a/frontend/src/components/IntegrateSection/index.tsx b/frontend/src/components/IntegrateSection/index.tsx
index ec6b2cb..a02d849 100644
--- a/frontend/src/components/IntegrateSection/index.tsx
+++ b/frontend/src/components/IntegrateSection/index.tsx
@@ -34,7 +34,7 @@ const IntegrateSection: React.FC = async () => {
         className="!mt-12 lg:!mt-16"
       />
       <ExternalLink
-        className="mt-12 flex-wrap justify-center text-center lg:mt-16"
+        className="mx-auto mt-12 lg:mt-16"
         text={integrateData.arrowLink.text}
         url={integrateData.arrowLink.link.url}
       />
diff --git a/frontend/src/components/Navbar/AppsDropdownContent/Card.tsx b/frontend/src/components/Navbar/AppsDropdownContent/Card.tsx
index ac5f0e6..06a27bb 100644
--- a/frontend/src/components/Navbar/AppsDropdownContent/Card.tsx
+++ b/frontend/src/components/Navbar/AppsDropdownContent/Card.tsx
@@ -28,6 +28,7 @@ const Card: React.FC<ICard> = ({ solution, variant, onClick, className }) => {
       {...{ onClick }}
     >
       <Image
+        className="md:h-fit"
         src={solution?.logo_svg?.url}
         alt={solution?.solution_name}
         width={64}
diff --git a/frontend/src/components/Navbar/AppsDropdownContent/index.tsx b/frontend/src/components/Navbar/AppsDropdownContent/index.tsx
index d4e5315..3cb407e 100644
--- a/frontend/src/components/Navbar/AppsDropdownContent/index.tsx
+++ b/frontend/src/components/Navbar/AppsDropdownContent/index.tsx
@@ -19,8 +19,9 @@ const AppsDropdownContent: React.FC<AppsDropdownContentProps> = ({
   <div className={clsx(className, "mx-auto lg:max-w-[1172px]")}>
     <div
       className={clsx(
-        "grid w-full grid-cols-1 gap-3 bg-background-2 lg:grid-flow-col",
-        "lg:grid-cols-3 lg:grid-rows-4 lg:gap-4",
+        "grid w-full grid-cols-1 gap-3 bg-background-2",
+        "md:grid-cols-2 md:grid-rows-5",
+        "lg:grid-flow-col lg:grid-cols-3 lg:grid-rows-4 lg:gap-4",
       )}
     >
       {appsSection?.solutions.map((solution, i) => (
@@ -49,9 +50,9 @@ const getVariant = (index: number): "large" | "medium" | "small" => {
 
 const getRowSpan = (
   index: number,
-): "lg:row-span-4" | "lg:row-span-2" | undefined => {
-  if (index === 0) return "lg:row-span-4";
-  if (index < 3) return "lg:row-span-2";
+): "md:row-span-2 lg:row-span-4" | "md:row-span-2" | undefined => {
+  if (index === 0) return "md:row-span-2 lg:row-span-4";
+  if (index < 3) return "md:row-span-2";
 };
 
 export default AppsDropdownContent;
diff --git a/frontend/src/components/Navbar/index.tsx b/frontend/src/components/Navbar/index.tsx
index 05f6637..89be30e 100644
--- a/frontend/src/components/Navbar/index.tsx
+++ b/frontend/src/components/Navbar/index.tsx
@@ -34,80 +34,93 @@ const Navbar: React.FC<INavbar> = ({ navbarData }) => {
   return (
     <header
       className={clsx(
-        "fixed left-0 right-0 top-0 z-50 flex h-20 w-full",
-        "items-center justify-between bg-black/35 px-2 py-2",
-        "text-base text-white backdrop-blur-md",
-        "md:px-16 xl:px-32",
+        "fixed left-0 right-0 top-0 z-50 h-20 w-full bg-black/35",
+        "backdrop-blur-md",
       )}
     >
-      <CustomLink
-        href="/home"
-        className="flex items-center"
-        onClick={() => toggleMenuOpen(false)}
-      >
-        <Image
-          alt="Kleros"
-          src={klerosLogo?.logo_svg.url}
-          width={184}
-          height={48}
-        />
-      </CustomLink>
+      <div className="mx-auto h-full max-w-7xl px-2 md:px-16 xl:px-32">
+        <div
+          className={clsx(
+            "flex h-full items-center justify-between",
+            "text-base text-white",
+          )}
+        >
+          <CustomLink
+            href="/home"
+            className="flex items-center"
+            onClick={() => toggleMenuOpen(false)}
+          >
+            <Image
+              alt="Kleros"
+              src={klerosLogo?.logo_svg.url}
+              width={184}
+              height={48}
+            />
+          </CustomLink>
 
-      <button
-        className="ml-auto block text-white lg:hidden"
-        onClick={toggleMenuOpen}
-      >
-        <HamburgerButton className="h-5 w-6" isOpen={menuOpen} />
-      </button>
+          <button
+            className="ml-auto block text-white lg:hidden"
+            onClick={toggleMenuOpen}
+          >
+            <HamburgerButton className="h-5 w-6" isOpen={menuOpen} />
+          </button>
 
-      <div className="hidden lg:flex">
-        <DesktopNavigation
-          {...{ pathname, navLinks, resourceSections, appsSection, socials }}
-        />
-      </div>
+          <div className="hidden lg:flex">
+            <DesktopNavigation
+              {...{
+                pathname,
+                navLinks,
+                resourceSections,
+                appsSection,
+                socials,
+              }}
+            />
+          </div>
 
-      <div className="hidden items-center lg:flex">
-        <CustomLink href={navbarButton?.link.url}>
-          <Button className="text-background-2">
-            {navbarButton?.link.name}
-          </Button>
-        </CustomLink>
-      </div>
+          <div className="hidden items-center lg:flex">
+            <CustomLink href={navbarButton?.link.url}>
+              <Button className="text-background-2">
+                {navbarButton?.link.name}
+              </Button>
+            </CustomLink>
+          </div>
 
-      <AnimatePresence>
-        {menuOpen ? (
-          <motion.div
-            className={clsx(
-              "fixed inset-0 top-20 z-40 h-[calc(100dvh-5rem)] bg-black/50",
-            )}
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            onClick={() => toggleMenuOpen(false)}
-          >
-            <motion.div
-              className="absolute bottom-0 top-0"
-              initial={{ right: "-100%" }}
-              animate={{ right: 0 }}
-              exit={{ right: "-100%" }}
-            >
-              <MobileMenu
-                {...{
-                  pathname,
-                  navLinks,
-                  resourceSections,
-                  appsSection,
-                  socials,
-                  navbarButton,
-                }}
-                className="h-full overflow-y-auto md:h-auto"
-                closeFn={() => toggleMenuOpen(false)}
-                onClick={(e) => e.stopPropagation()}
-              />
-            </motion.div>
-          </motion.div>
-        ) : null}
-      </AnimatePresence>
+          <AnimatePresence>
+            {menuOpen ? (
+              <motion.div
+                className={clsx(
+                  "fixed inset-0 top-20 z-40 h-[calc(100dvh-5rem)] bg-black/50",
+                )}
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                onClick={() => toggleMenuOpen(false)}
+              >
+                <motion.div
+                  className="absolute bottom-0 top-0"
+                  initial={{ right: "-100%" }}
+                  animate={{ right: 0 }}
+                  exit={{ right: "-100%" }}
+                >
+                  <MobileMenu
+                    {...{
+                      pathname,
+                      navLinks,
+                      resourceSections,
+                      appsSection,
+                      socials,
+                      navbarButton,
+                    }}
+                    className="h-full overflow-y-auto md:h-auto"
+                    closeFn={() => toggleMenuOpen(false)}
+                    onClick={(e) => e.stopPropagation()}
+                  />
+                </motion.div>
+              </motion.div>
+            ) : null}
+          </AnimatePresence>
+        </div>
+      </div>
     </header>
   );
 };
diff --git a/frontend/src/components/PNKToken/TokenNeedSection/index.tsx b/frontend/src/components/PNKToken/TokenNeedSection/index.tsx
index 68b6c71..7c73647 100644
--- a/frontend/src/components/PNKToken/TokenNeedSection/index.tsx
+++ b/frontend/src/components/PNKToken/TokenNeedSection/index.tsx
@@ -20,13 +20,11 @@ const TokenNeedSection: React.FC<ITokenNeedSection> = ({ tokenNeedData }) => {
           <CtaCard key={card.title} {...card} />
         ))}
       </div>
-      <div className="w-full items-center">
-        <ExternalLink
-          text={tokenNeedData.arrowLink.text}
-          url={tokenNeedData.arrowLink.link.url}
-          className="mt-12 flex-wrap justify-center md:justify-start"
-        />
-      </div>
+      <ExternalLink
+        text={tokenNeedData.arrowLink.text}
+        url={tokenNeedData.arrowLink.link.url}
+        className="mx-auto mt-12"
+      />
     </div>
   );
 };
diff --git a/frontend/src/components/PNKToken/TokenomicsSection/index.tsx b/frontend/src/components/PNKToken/TokenomicsSection/index.tsx
index d209461..6afe06e 100644
--- a/frontend/src/components/PNKToken/TokenomicsSection/index.tsx
+++ b/frontend/src/components/PNKToken/TokenomicsSection/index.tsx
@@ -22,7 +22,7 @@ const TokenomicsSection: React.FC<ITokenomicsSection> = ({
       <ExternalLink
         text={tokenomicsData.arrowLink.text}
         url={tokenomicsData.arrowLink.link.url}
-        className="flex-wrap justify-center pt-3 md:justify-start md:pt-16"
+        className="mx-auto pt-3 md:mx-0 md:pt-16"
       />
     </div>
   );
diff --git a/frontend/src/components/ResearchDevelopment/Hero.tsx b/frontend/src/components/ResearchDevelopment/Hero.tsx
index 3625dbe..dda1c4f 100644
--- a/frontend/src/components/ResearchDevelopment/Hero.tsx
+++ b/frontend/src/components/ResearchDevelopment/Hero.tsx
@@ -37,7 +37,9 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
               key={link.text}
               text={link.text}
               url={link.link.url}
-              className="[&>span]:text-base [&>span]:text-primary-text"
+              className={
+                "text-start [&>span]:text-base [&>span]:text-primary-text"
+              }
             />
           ))}
         </div>
diff --git a/frontend/src/components/ResearchDevelopment/TabSection/FellowshipTabContent/Fellows/FellowCard.tsx b/frontend/src/components/ResearchDevelopment/TabSection/FellowshipTabContent/Fellows/FellowCard.tsx
index 32dc8b7..051bcfa 100644
--- a/frontend/src/components/ResearchDevelopment/TabSection/FellowshipTabContent/Fellows/FellowCard.tsx
+++ b/frontend/src/components/ResearchDevelopment/TabSection/FellowshipTabContent/Fellows/FellowCard.tsx
@@ -13,7 +13,11 @@ const FellowCard: React.FC<Fellow> = ({
   arrowLinkText,
 }) => {
   return (
-    <div className="flex flex-col items-start rounded-2xl border border-stroke p-8">
+    <div
+      className={
+        "flex flex-col items-start rounded-2xl border border-stroke p-8"
+      }
+    >
       <Image
         width={150}
         height={150}
@@ -33,11 +37,7 @@ const FellowCard: React.FC<Fellow> = ({
       </p>
       <div className="mt-auto w-full">
         <Divider />
-        <ExternalLink
-          text={arrowLinkText}
-          url={reportUrl}
-          className="mt-6 flex-wrap justify-start"
-        />
+        <ExternalLink text={arrowLinkText} url={reportUrl} className="mt-6" />
       </div>
     </div>
   );
diff --git a/frontend/src/components/ResearchDevelopment/TabSection/FellowshipTabContent/WaitlistSection.tsx b/frontend/src/components/ResearchDevelopment/TabSection/FellowshipTabContent/WaitlistSection.tsx
index 460a3ac..86dbe64 100644
--- a/frontend/src/components/ResearchDevelopment/TabSection/FellowshipTabContent/WaitlistSection.tsx
+++ b/frontend/src/components/ResearchDevelopment/TabSection/FellowshipTabContent/WaitlistSection.tsx
@@ -15,16 +15,15 @@ const WaitlistSection: React.FC<RAndDPageWaitlistSection> = ({
   return (
     <div
       className={clsx(
-        "bg-background-1",
-        "px-6 pb-[90px] pt-12 lg:flex-row lg:px-32 lg:py-24",
-        "flex flex-col items-start justify-start gap-16",
+        "flex flex-col gap-16 bg-background-1 px-6 py-12 md:flex-row md:gap-4",
+        "lg:px-32 lg:py-24",
       )}
     >
-      <div className="space-y-16">
-        <h1 className="max-w-[683px] text-xl font-medium lg:text-3xl">
+      <div>
+        <h3 className="mb-8 text-xl font-medium lg:mb-12 lg:text-3xl">
           {header}
-        </h1>
-        <div className="flex flex-wrap gap-8">
+        </h3>
+        <div className="flex items-start gap-4 md:flex-row md:gap-8">
           <Link
             href={applyButton.link.url}
             target="_blank"
@@ -35,9 +34,13 @@ const WaitlistSection: React.FC<RAndDPageWaitlistSection> = ({
           <ExternalLink url={arrowLink.link.url} text={arrowLink.text} />
         </div>
       </div>
-      <div className="relative h-[267px] w-[295px] flex-shrink-0">
-        <Image src={icon.url} alt="Icon" fill className="!w-fit" />
-      </div>
+      <Image
+        className="mx-auto mb-20 lg:mx-0 lg:ml-auto lg:justify-self-end"
+        alt="Kleros Logo"
+        src={icon.url}
+        width="296"
+        height="267"
+      />
     </div>
   );
 };
diff --git a/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/PublicationsSection/PublicationCard.tsx b/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/PublicationsSection/PublicationCard.tsx
index 39eec27..534d766 100644
--- a/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/PublicationsSection/PublicationCard.tsx
+++ b/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/PublicationsSection/PublicationCard.tsx
@@ -39,7 +39,7 @@ const PublicationCard: React.FC<IPublicationCard> = ({
         <ExternalLink
           text={publication.paperLink.text}
           url={publication.paperLink.link.url}
-          className="mt-6 flex-wrap justify-start lg:mb-2"
+          className="mt-6 lg:mb-2"
         />
       </div>
     </div>