diff --git a/web/src/components/buttons/ApiButton.tsx b/web/src/components/buttons/ApiButton.tsx
new file mode 100644
index 0000000000..5fbaa2db44
--- /dev/null
+++ b/web/src/components/buttons/ApiButton.tsx
@@ -0,0 +1,25 @@
+import { Button, ButtonProps } from 'components/Button';
+import { useTranslation } from 'react-i18next';
+
+interface ApiButtonProps
+  extends Omit<
+    ButtonProps,
+    'icon' | 'children' | 'href' | 'onClick' | 'backgroundClasses' | 'foregroundClasses'
+  > {
+  iconSize?: number;
+}
+
+export function ApiButton({ ...restProps }: ApiButtonProps) {
+  const { t } = useTranslation();
+
+  return (
+    <Button
+      href={
+        'https://electricitymaps.com/pricing?utm_source=app.electricitymaps.com&utm_medium=referral&utm_campaign=api-cta'
+      }
+      {...restProps}
+    >
+      {t('button.api')}
+    </Button>
+  );
+}
diff --git a/web/src/components/buttons/CommercialApiButton.tsx b/web/src/components/buttons/CommercialApiButton.tsx
index 9567b02fd1..cf29265472 100644
--- a/web/src/components/buttons/CommercialApiButton.tsx
+++ b/web/src/components/buttons/CommercialApiButton.tsx
@@ -8,7 +8,7 @@ interface CommercialApiButtonProps
     'icon' | 'children' | 'href' | 'type' | 'onClick' | 'foregroundClasses'
   > {
   iconSize?: number;
-  type?: 'primary' | 'link';
+  type?: 'primary' | 'link' | 'secondary';
 }
 
 export function CommercialApiButton({
diff --git a/web/src/components/buttons/DocumentationButton.tsx b/web/src/components/buttons/DocumentationButton.tsx
new file mode 100644
index 0000000000..60ef870ff2
--- /dev/null
+++ b/web/src/components/buttons/DocumentationButton.tsx
@@ -0,0 +1,20 @@
+import { Button, ButtonProps } from 'components/Button';
+import { useTranslation } from 'react-i18next';
+
+interface DocsButtonProps
+  extends Omit<
+    ButtonProps,
+    'icon' | 'children' | 'href' | 'onClick' | 'backgroundClasses' | 'foregroundClasses'
+  > {
+  iconSize?: number;
+}
+
+export function DocumentationButton({ ...restProps }: DocsButtonProps) {
+  const { t } = useTranslation();
+
+  return (
+    <Button href={'https://docs.electricitymaps.com/'} {...restProps}>
+      {t('button.docs')}
+    </Button>
+  );
+}
diff --git a/web/src/features/modals/InfoModal.tsx b/web/src/features/modals/InfoModal.tsx
index b413e8fa97..a86d4662b1 100644
--- a/web/src/features/modals/InfoModal.tsx
+++ b/web/src/features/modals/InfoModal.tsx
@@ -1,6 +1,7 @@
+import { ApiButton } from 'components/buttons/ApiButton';
+import { DocumentationButton } from 'components/buttons/DocumentationButton';
 import { FAQButton } from 'components/buttons/FAQButton';
 import { FeedbackButton } from 'components/buttons/FeedbackButton';
-import { GithubButton } from 'components/buttons/GithubButton';
 import { LegalNoticeButton } from 'components/buttons/LegalNoticeButton';
 import { LinkedinButton } from 'components/buttons/LinkedinButton';
 import { PrivacyPolicyButton } from 'components/buttons/PrivacyPolicyButton';
@@ -28,10 +29,11 @@ export function InfoModalContent() {
     <div className="flex flex-col items-center">
       <InfoText />
       <div className="w-[330px] space-y-2 py-2">
-        <FAQButton />
+        <ApiButton />
+        <DocumentationButton />
         <FeedbackButton />
         <LinkedinButton />
-        <GithubButton />
+        <FAQButton />
       </div>
       <div className="flex gap-x-4">
         <PrivacyPolicyButton />
diff --git a/web/src/features/modals/InfoText.tsx b/web/src/features/modals/InfoText.tsx
index 48932018a3..fccb64467d 100644
--- a/web/src/features/modals/InfoText.tsx
+++ b/web/src/features/modals/InfoText.tsx
@@ -1,17 +1,16 @@
+import { Link } from 'components/Link';
 import { useTranslation } from 'react-i18next';
 
 export default function InfoText() {
   const { t } = useTranslation();
   return (
     <div className="prose dark:prose-invert prose-p:my-1 prose-p:leading-snug prose-a:no-underline hover:prose-a:underline">
-      <p className="mb-4">{t('info.text')}</p>
-      <p
-        dangerouslySetInnerHTML={{
-          __html: t('info.open-source-text', {
-            link: 'https://github.com/electricitymaps/electricitymaps-contrib',
-          }),
-        }}
-      />
+      <p className="mb-4">
+        <Link href="https://electricitymaps.com/?utm_source=app.electricitymaps.com&utm_medium=referral&utm_campaign=about-section">
+          Electricity Maps
+        </Link>{' '}
+        {t('info.text')}
+      </p>
     </div>
   );
 }
diff --git a/web/src/features/panels/ranking-panel/RankingPanel.tsx b/web/src/features/panels/ranking-panel/RankingPanel.tsx
index 46ff3df9cf..7f6df15f9b 100644
--- a/web/src/features/panels/ranking-panel/RankingPanel.tsx
+++ b/web/src/features/panels/ranking-panel/RankingPanel.tsx
@@ -5,7 +5,7 @@ import { useGetCanonicalUrl } from 'hooks/useGetCanonicalUrl';
 import { useAtomValue } from 'jotai';
 import { ReactElement, useCallback, useState } from 'react';
 import { Helmet } from 'react-helmet-async';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import { metaTitleSuffix } from 'utils/constants';
 import {
   isConsumptionAtom,
@@ -16,7 +16,6 @@ import {
 import { getRankedState } from './getRankingPanelData';
 import RankingPanelAccordion from './RankingPanelAccordion';
 import SearchBar from './SearchBar';
-import SocialIconRow from './SocialIcons';
 import { VirtualizedZoneList } from './ZoneList';
 
 export default function RankingPanel(): ReactElement {
@@ -55,16 +54,16 @@ export default function RankingPanel(): ReactElement {
   );
 
   return (
-    <div className="flex h-[calc(100vh-236px)] w-full flex-col py-3 pl-4 pr-1 ">
+    <div className="flex h-[calc(100vh-220px)] w-full flex-col py-3 pl-4 pr-1 ">
       <Helmet prioritizeSeoTags>
         <title>{t('misc.maintitle') + metaTitleSuffix}</title>
         <link rel="canonical" href={canonicalUrl} />
       </Helmet>
 
-      <div className="flex flex-grow flex-col overflow-hidden ">
+      <div className="flex flex-grow flex-col overflow-hidden pr-2">
         <div className="pb-5">
           <h1>{t('ranking-panel.title')}</h1>
-          <h2 className="text-sm">{t('ranking-panel.subtitle')}</h2>
+          <p className="text-sm">{<Trans i18nKey="ranking-panel.subtitle" />}</p>
         </div>
 
         <SearchBar
@@ -83,7 +82,6 @@ export default function RankingPanel(): ReactElement {
       <div className="mt-auto py-2 pr-3">
         <RankingPanelAccordion />
         <HorizontalDivider />
-        <SocialIconRow />
       </div>
     </div>
   );
diff --git a/web/src/features/panels/ranking-panel/RankingPanelAccordion.tsx b/web/src/features/panels/ranking-panel/RankingPanelAccordion.tsx
index 4c66155af0..d0a12e0ad0 100644
--- a/web/src/features/panels/ranking-panel/RankingPanelAccordion.tsx
+++ b/web/src/features/panels/ranking-panel/RankingPanelAccordion.tsx
@@ -1,7 +1,4 @@
 import Accordion from 'components/Accordion';
-import { GithubButton } from 'components/buttons/GithubButton';
-import { LinkedinButton } from 'components/buttons/LinkedinButton';
-import { RedditButton } from 'components/buttons/RedditButton';
 import InfoText from 'features/modals/InfoText';
 import { useAtom } from 'jotai';
 import { useTranslation } from 'react-i18next';
@@ -15,17 +12,11 @@ export default function RankingPanelAccordion() {
   return (
     <Accordion
       title={t('info.title')}
-      className="py-1"
       isTopExpanding
       isCollapsed={rankingPanelAccordionCollapsed}
       setState={setRankingPanelAccordionCollapsed}
     >
       <InfoText />
-      <div className="mt-4 flex flex-wrap gap-2 ">
-        <GithubButton size="sm" shouldShrink />
-        <LinkedinButton size="sm" shouldShrink />
-        <RedditButton size="sm" shouldShrink />
-      </div>
     </Accordion>
   );
 }
diff --git a/web/src/features/panels/ranking-panel/SearchBar.tsx b/web/src/features/panels/ranking-panel/SearchBar.tsx
index 92625b4dc6..e4cadfc3f5 100644
--- a/web/src/features/panels/ranking-panel/SearchBar.tsx
+++ b/web/src/features/panels/ranking-panel/SearchBar.tsx
@@ -22,7 +22,7 @@ function SearchBar({
       <Search />
       <input
         data-testid="zone-search-bar"
-        className="font h-8 w-full bg-transparent text-base placeholder-gray-500 focus:border-b-2 focus:border-gray-300 focus:outline-none dark:focus:border-gray-600"
+        className="font h-8 w-full bg-transparent text-sm placeholder-gray-500 focus:border-b-2 focus:border-gray-300 focus:outline-none dark:focus:border-gray-600"
         placeholder={placeholder}
         onChange={onHandleInput}
         value={value}
diff --git a/web/src/features/panels/zone/AreaGraphContainer.tsx b/web/src/features/panels/zone/AreaGraphContainer.tsx
index d84b67192a..3ad0b53cbd 100644
--- a/web/src/features/panels/zone/AreaGraphContainer.tsx
+++ b/web/src/features/panels/zone/AreaGraphContainer.tsx
@@ -1,4 +1,3 @@
-import { HorizontalDivider } from 'components/Divider';
 import CarbonChart from 'features/charts/CarbonChart';
 import EmissionChart from 'features/charts/EmissionChart';
 import NetExchangeChart from 'features/charts/NetExchangeChart';
@@ -29,7 +28,6 @@ export default function AreaGraphContainer({
       />
       <NetExchangeChart datetimes={datetimes} timeRange={timeRange} />
       <PriceChart datetimes={datetimes} timeRange={timeRange} />
-      <HorizontalDivider />
     </div>
   );
 }
diff --git a/web/src/features/panels/zone/Attribution.tsx b/web/src/features/panels/zone/Attribution.tsx
index 9c08be9414..d98595daac 100644
--- a/web/src/features/panels/zone/Attribution.tsx
+++ b/web/src/features/panels/zone/Attribution.tsx
@@ -1,4 +1,3 @@
-import { GithubButton } from 'components/buttons/GithubButton';
 import { useTranslation } from 'react-i18next';
 
 import { getContributors } from './util';
@@ -15,7 +14,6 @@ export default function Attribution({ zoneId }: { zoneId: string }) {
           <ContributorList contributors={contributors} />
         </div>
       )}
-      <GithubButton />
     </div>
   );
 }
diff --git a/web/src/features/panels/zone/ZoneDetails.tsx b/web/src/features/panels/zone/ZoneDetails.tsx
index 688c10bf62..9d72e559f2 100644
--- a/web/src/features/panels/zone/ZoneDetails.tsx
+++ b/web/src/features/panels/zone/ZoneDetails.tsx
@@ -1,6 +1,7 @@
 import { Capacitor } from '@capacitor/core';
 import useGetZone from 'api/getZone';
 import { CommercialApiButton } from 'components/buttons/CommercialApiButton';
+import { HorizontalDivider } from 'components/Divider';
 import LoadingSpinner from 'components/LoadingSpinner';
 import BarBreakdownChart from 'features/charts/bar-breakdown/BarBreakdownChart';
 import { useAtomValue, useSetAtom } from 'jotai';
@@ -85,7 +86,7 @@ export default function ZoneDetails(): JSX.Element {
       <div
         id="panel-scroller"
         className={twMerge(
-          'mb-3 h-full scroll-pt-5 overflow-y-scroll px-3 pt-2.5 sm:h-full sm:pb-60',
+          'mb-3 h-full scroll-pt-5 overflow-y-scroll px-3 pt-2.5 sm:h-full sm:pb-64',
           isIosCapacitor ? 'pb-72' : 'pb-48'
         )}
       >
@@ -118,13 +119,14 @@ export default function ZoneDetails(): JSX.Element {
               displayByEmissions={displayByEmissions}
             />
           )}
+
           <MethodologyCard />
+          <HorizontalDivider />
+          <div className="flex items-center justify-between gap-2">
+            <div className="text-sm font-semibold">Looking for forecast data?</div>
+            <CommercialApiButton size="sm" />
+          </div>
           <Attribution zoneId={zoneId} />
-          {isMobile ? (
-            <CommercialApiButton backgroundClasses="mt-3" />
-          ) : (
-            <div className="p-2" />
-          )}
         </ZoneDetailsContent>
       </div>
     </>
diff --git a/web/src/locales/da.json b/web/src/locales/da.json
index da5d10b496..912de0d189 100644
--- a/web/src/locales/da.json
+++ b/web/src/locales/da.json
@@ -1,8 +1,5 @@
 {
   "info": {
-    "title": "Om appen",
-    "text": "Electricity Maps-appen giver realtidsindsigt, på web og mobil, for borgere, energieksperter, NGO'er og beslutningstagere, der fremmer en dybere forståelse af energiomstillingens udfordringer.",
-    "open-source-text": "Denne app er <a href='{{link}}' target='_blank'>Open Source</a> og drevet af fællesskabet.",
     "version": "App-version: {{version}}",
     "share-app": "Del appen:"
   },
diff --git a/web/src/locales/en.json b/web/src/locales/en.json
index 2152bc754c..1a3c1aa62e 100644
--- a/web/src/locales/en.json
+++ b/web/src/locales/en.json
@@ -1,8 +1,7 @@
 {
   "info": {
-    "title": "About the app",
-    "text": "The Electricity Maps app provides real-time insights on web and mobile for citizens, energy experts, NGOs and policymakers promoting a deeper understanding of energy transition challenges.",
-    "open-source-text": "This app is <a href='{{link}}' target='_blank'>Open Source</a> and powered by the community.",
+    "title": "About Electricity Maps",
+    "text": "is an API platform providing real-time and predictive electricity signals allowing any device to reduce their cost and emissions by informing them about the best time to consume electricity.",
     "version": "App version: {{version}}",
     "share-app": "Share the app:"
   },
@@ -10,9 +9,9 @@
     "title": "Settings"
   },
   "ranking-panel": {
-    "title": "Climate Impact by Area",
-    "subtitle": "Ranked by carbon intensity of electricity consumed (gCO₂eq/kWh)",
-    "search": "Search areas",
+    "title": "Electricity Grid Carbon Emissions",
+    "subtitle": "See where your electricity comes from<br/> and how much CO2 was emitted to produce it",
+    "search": "Search areas (ranked by carbon intensity)",
     "no-results": "No results found for this search 🌍"
   },
   "button": {
@@ -29,7 +28,9 @@
     "feedback": "Share feedback",
     "faq": "FAQ",
     "privacy-policy": "Privacy Policy",
-    "legal-notice": "Legal Notice"
+    "legal-notice": "Legal Notice",
+    "api": "Access the API",
+    "docs": "API documentation"
   },
   "mobile-main-menu": {
     "map": "Electricity Maps",
diff --git a/web/src/locales/es.json b/web/src/locales/es.json
index d0db16785e..800fd2d17f 100644
--- a/web/src/locales/es.json
+++ b/web/src/locales/es.json
@@ -1,9 +1,5 @@
 {
   "info": {
-    "title": "Sobre esta aplicación",
-    "text": "La app Electricity Maps provee información en tiempo real web y móvil para ciudadanos, expertos en energía, ONG y legisladores que promueven un mejor entendimiento de los desafíos de la transición energética.",
-    "open-source-text": "Esta app es de <a href='{{link}}' target='_blank'>código abierto</a> e impulsada por la comunidad.",
-    "version": "Versión de la aplicación: {{version}}",
     "share-app": "Compartir la aplicación:"
   },
   "settings-modal": {
diff --git a/web/src/locales/fr.json b/web/src/locales/fr.json
index fe4416183c..3f4743723f 100644
--- a/web/src/locales/fr.json
+++ b/web/src/locales/fr.json
@@ -1,8 +1,5 @@
 {
   "info": {
-    "title": "À propos de l'application",
-    "text": "L'application Electricity Maps fournit des informations en temps réel sur le web et sur les mobiles pour les citoyens, les experts en énergie, les ONG et les décideurs politiques, favorisant ainsi une meilleure compréhension des défis de la transition énergétique.",
-    "open-source-text": "Cette application est <a href='{{link}}' target='_blank'>Open Source</a> et alimentée par la communauté.",
     "version": "Version de l'application: {{version}}",
     "share-app": "Partagez l'application:"
   },
diff --git a/web/src/locales/it.json b/web/src/locales/it.json
index f89e5a3504..d988c5b756 100644
--- a/web/src/locales/it.json
+++ b/web/src/locales/it.json
@@ -1,8 +1,5 @@
 {
-  "info": {
-    "text": "L'app Electricity Maps fornisce statistiche in tempo reale su web e mobile per cittadini, esperti di energia, ONG e decisori politici promuovendo una comprensione più profonda delle sfide della transizione energetica.",
-    "open-source-text": "Questa app è <a href='{{link}}' target='_blank'>Open Source</a> ed alimentata dalla community."
-  },
+  "info": {},
   "button": {
     "feedback": "Condividi un feedback",
     "github": "Visualizza il nostro GitHub",
diff --git a/web/src/locales/nl.json b/web/src/locales/nl.json
index 4e7bb2079c..2ce78072b2 100644
--- a/web/src/locales/nl.json
+++ b/web/src/locales/nl.json
@@ -92,8 +92,6 @@
   "unknown": "onbekend",
   "info": {
     "title": "Over de app",
-    "text": "De Electricity Maps app biedt realtime inzichten op web en mobiel voor burgers, energie-experts, NGO's en beleidsmakers, ter bevordering van een dieper begrip van de uitdagingen van de energietransitie.",
-    "open-source-text": "Deze app is <a href='{{link}}' target='_blank'>Open Source</a> en wordt aangedreven door de gemeenschap.",
     "version": "App versie: {{version}}",
     "share-app": "Deel de app:"
   },
diff --git a/web/src/locales/no-NB.json b/web/src/locales/no-NB.json
index 5bd5735289..589821f288 100644
--- a/web/src/locales/no-NB.json
+++ b/web/src/locales/no-NB.json
@@ -83,10 +83,6 @@
   "geothermal": "Jordvarme",
   "hydro": "Vannkraft",
   "hydro storage": "Pumpekraftverk",
-  "info": {
-    "text": "Electricity Map innsikt i sanntid på nett og mobil til allmennheten, energieksperter, frivillige organisasjoner og myndigheter for å gi dypere forståelse av det grønne skiftet.",
-    "open-source-text": "Tjenesten er <a href='{{link}}' target='_blank'>åpen kildekode</a> og utviklet i samarbeid med frivillige."
-  },
   "button": {
     "privacy-policy": "Personvern",
     "legal-notice": "Juridisk",
diff --git a/web/src/locales/pl.json b/web/src/locales/pl.json
index 77544d6214..578c961f7a 100644
--- a/web/src/locales/pl.json
+++ b/web/src/locales/pl.json
@@ -1,8 +1,5 @@
 {
   "info": {
-    "title": "O aplikacji",
-    "text": "Aplikacja Electrcity Maps oferuje dostęp do danych w rzeczywistym czasie dla obywateli, ekspertów ds. energetyki i organizacji pozarządowych w celu zwiększenia świadomości na temat wyzwań transformacji energetycznej.",
-    "open-source-text": "Ta aplikacja jest <a href='{{link}}' target='_blank'>Open Source'owa</a> i wspierana przez społeczność.",
     "version": "Wersja aplikacji: {{version}}",
     "share-app": "Podziel się aplikacją:"
   },
diff --git a/web/src/locales/pt-BR.json b/web/src/locales/pt-BR.json
index 3529705bdd..eeff1a5fd2 100644
--- a/web/src/locales/pt-BR.json
+++ b/web/src/locales/pt-BR.json
@@ -1728,10 +1728,7 @@
   },
   "windDataError": "Dados eólicos estão indisponíveis",
   "solarDataError": "Dados solares estão indisponíveis",
-  "info": {
-    "text": "O Mapa da Eletricidade fornece informações em tempo-real na web e no celular para cidadãos, especialistas em energia, ONGs e legisladores promovendo um entendimento mais profundo sobre os desafios de transição de energia.",
-    "open-source-text": "Esse aplicativo é <a href='{{link}}' target='_blank'>de código aberto</a> e apoiado pela comunidade."
-  },
+
   "button": {
     "feedback": "Compartilhar Feedback",
     "github": "Ver nosso GitHub",
diff --git a/web/src/locales/pt-PT.json b/web/src/locales/pt-PT.json
index c8ffd7f575..099ba44466 100644
--- a/web/src/locales/pt-PT.json
+++ b/web/src/locales/pt-PT.json
@@ -1,8 +1,4 @@
 {
-  "info": {
-    "text": "O Mapa da Eletricidade fornece informações em tempo-real na web e no telemóvel para cidadãos, especialistas em energia, ONGs e legisladores promovendo um entendimento mais profundo sobre os desafios da transição energética.",
-    "open-source-text": "Esta app é <a href='{{link}}' target='_blank'>de código aberto</a> e desenvolvida pela comunidade."
-  },
   "button": {
     "feedback": "Partilhar Feedback",
     "github": "Ver o nosso GitHub",
diff --git a/web/src/locales/sv.json b/web/src/locales/sv.json
index 18e6c03f7b..f9d2d96a5c 100644
--- a/web/src/locales/sv.json
+++ b/web/src/locales/sv.json
@@ -1,8 +1,5 @@
 {
   "info": {
-    "text": "Appen Electricity Maps ger insikter i realtid på webben och mobil för medborgare, energiexperter, icke-statliga organisationer och beslutsfattare och främjar en djupare förståelse för utmaningar i energiomställningen.",
-    "open-source-text": "Den här appen har <a href='{{link}}' target='_blank'>Öppen Källkod</a> och drivs av en gemenskap.",
-    "title": "Om appen",
     "version": "App version: {{version}}",
     "share-app": "Dela appen:"
   },
diff --git a/web/src/locales/zh-CN.json b/web/src/locales/zh-CN.json
index c151bc27d4..97db973feb 100644
--- a/web/src/locales/zh-CN.json
+++ b/web/src/locales/zh-CN.json
@@ -1,8 +1,4 @@
 {
-  "info": {
-    "text": "Electricity Maps应用程序在网站和手机程序上为居民，能源专家，非政府组织和决策者们提供即时的信息，从而促使人们更好的理解能源转型的挑战。",
-    "open-source-text": "这个应用程序是一个<a href='{{link}}' target='_blank'>开源</a> 并由社区提供支持。"
-  },
   "button": {
     "feedback": "提供反馈",
     "github": "浏览我们的GitHub",
diff --git a/web/src/locales/zh-TW.json b/web/src/locales/zh-TW.json
index 8f07d7887c..ad1efe157a 100644
--- a/web/src/locales/zh-TW.json
+++ b/web/src/locales/zh-TW.json
@@ -1,8 +1,4 @@
 {
-  "info": {
-    "text": "這份電力地圖為推動能源轉型的公民、能源專家、NGO 和政策制定者提供即時的用電資料。",
-    "open-source-text": "這個網站是個由社群支持的<a href='{{link}}' target='_blank'>開源</a>軟體。"
-  },
   "button": {
     "feedback": "提供回饋",
     "github": "GitHub",