diff --git a/frontend/src/assets/styles/_extra.scss b/frontend/src/assets/styles/_extra.scss
index 76216aaa83..21dd10646e 100644
--- a/frontend/src/assets/styles/_extra.scss
+++ b/frontend/src/assets/styles/_extra.scss
@@ -611,10 +611,26 @@ a[href="https://www.mapbox.com/map-feedback/"]
   color: rgba($blue-dark, 0.9);
 }
 
+.gap-0\.625 {
+  gap: 0.75rem;
+}
+
+.gap-0\.75 {
+  gap: 0.75rem;
+}
+
 .gap-1 {
   gap: 1rem;
 }
 
+.gap-1\.25 {
+  gap: 1.25rem;
+}
+
+.gap-1\.5 {
+  gap: 1.5rem;
+}
+
 // Imported from HOTOSM site to use for long texts
 .blue-dark-abbey {
   color: #4c4f56;
diff --git a/frontend/src/components/button.js b/frontend/src/components/button.js
index af665a7a92..41ba8bb686 100644
--- a/frontend/src/components/button.js
+++ b/frontend/src/components/button.js
@@ -10,7 +10,15 @@ export const AnimatedLoadingIcon = () => (
   </IconSpace>
 );
 
-export function Button({ onClick, children, icon, className, disabled, loading = false }: Object) {
+export function Button({
+  onClick,
+  children,
+  icon,
+  className,
+  disabled,
+  loading = false,
+  ...otherProps
+}: Object) {
   return (
     <button
       onClick={onClick}
@@ -19,6 +27,7 @@ export function Button({ onClick, children, icon, className, disabled, loading =
       className={`${className || ''} br1 f5 bn ${disabled || loading ? 'o-50' : 'pointer'}`}
       style={{ padding: '.75rem 1.5rem' }}
       disabled={disabled || loading}
+      {...otherProps}
     >
       {loading ? <AnimatedLoadingIcon /> : icon && <IconSpace>{icon}</IconSpace>}
       {children}
diff --git a/frontend/src/components/partners/customDropdown.js b/frontend/src/components/partners/customDropdown.js
new file mode 100644
index 0000000000..1d4580b88b
--- /dev/null
+++ b/frontend/src/components/partners/customDropdown.js
@@ -0,0 +1,45 @@
+import { useState } from 'react';
+
+import { Button } from '../button';
+import { ChevronDownIcon } from '../svgIcons/chevron-down';
+import { ChevronUpIcon } from '../svgIcons/chevron-up';
+
+export const CustomDropdown = ({ title, data, buttonClassname }) => {
+  const [isActive, setIsActive] = useState(false);
+
+  return (
+    <div className="relative">
+      {/* dropdown select */}
+      <Button
+        className={`white br1 f5 fw5 bn flex items-center ${buttonClassname}`}
+        onClick={() => setIsActive(!isActive)}
+        onBlur={() => setIsActive(false)}
+      >
+        {title}
+        {isActive ? (
+          <ChevronUpIcon className="ml2 partners-dropdown-icon" />
+        ) : (
+          <ChevronDownIcon className="ml2 partners-dropdown-icon" />
+        )}
+      </Button>
+
+      {/* dropdown list */}
+      {isActive && (
+        <ul className="absolute list bg-grey-dark white pv3 mt2 partners-custom-dropdown">
+          {data.map((option) => (
+            <li
+              key={option.label}
+              className="pointer partners-dropdown-list-item"
+              onMouseDown={() => {
+                option?.onClick(option);
+              }}
+              onKeyDown={() => {}}
+            >
+              {option.label}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
diff --git a/frontend/src/components/partners/leaderboard.js b/frontend/src/components/partners/leaderboard.js
new file mode 100644
index 0000000000..aeb2cb7087
--- /dev/null
+++ b/frontend/src/components/partners/leaderboard.js
@@ -0,0 +1,33 @@
+import { FormattedMessage } from 'react-intl';
+import messages from '../../views/messages';
+
+import { StatsSection } from './partnersStats';
+import { Activity } from './partnersActivity';
+import { CurrentProjects } from './currentProjects';
+
+export const Leaderboard = ({ partner, partnerStats }) => {
+  return (
+    <div className="pa4 bg-tan flex flex-column gap-1.25">
+      <div className="flex justify-between items-center">
+        <h3 className="f2 blue-dark fw7 ma0 barlow-condensed v-mid dib">
+          {partner.primary_hashtag
+            ?.split(',')
+            ?.map((str) => `#${str}`)
+            ?.join(', ')}
+        </h3>
+      </div>
+
+      <StatsSection partner={partnerStats} />
+
+      <CurrentProjects currentProjects={partner.current_projects} />
+
+      {/* activity section */}
+      <div className="w-100 fl cf">
+        <h3 className="f2 fw6 ttu barlow-condensed blue-dark mt0 pt2 mb3">
+          <FormattedMessage {...messages.activity} />
+        </h3>
+        <Activity partner={partner} />
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/src/components/partners/partners.js b/frontend/src/components/partners/partners.js
index df9e2382d2..3557a5e7d0 100644
--- a/frontend/src/components/partners/partners.js
+++ b/frontend/src/components/partners/partners.js
@@ -95,7 +95,7 @@ export function PartnersCard({ details }) {
             <FormattedMessage {...messages.edit} />
           </CustomButton>
         </Link>
-        <Link to={`/partners/${details.permalink}/stats/`}>
+        <Link to={`/partners/${details.permalink}/stats/leaderboard`}>
           <CustomButton
             style={{ backgroundColor: '#e2e2e2' }}
             className="blue-dark ba b--grey-light pa2 br1 f5 pointer"
diff --git a/frontend/src/components/partners/partnersResources.js b/frontend/src/components/partners/partnersResources.js
index 05a327fcc3..a0dc9ac081 100644
--- a/frontend/src/components/partners/partnersResources.js
+++ b/frontend/src/components/partners/partnersResources.js
@@ -1,4 +1,7 @@
-import { CustomButton } from '../button';
+import { FormattedMessage } from 'react-intl';
+
+import { CustomDropdown } from './customDropdown';
+import messages from '../../views/messages';
 
 export const Resources = ({ partner }) => {
   const renderWebsiteLinks = () => {
@@ -11,20 +14,23 @@ export const Resources = ({ partner }) => {
       name: partner[nameKey],
       url: partner[urlKeys[index]],
     }));
+
+    const resourcesData = websiteLinks.map((link) => ({
+      ...link,
+      label: link.name,
+      onClick: (item) => {
+        window.open(item.url, '_blank');
+      },
+    }));
+
+    if (!resourcesData.length) return <></>;
+
     return (
-      <div className="">
-        {websiteLinks.map((link, index) => (
-          <a
-            key={index}
-            href={link.url}
-            target="_blank"
-            rel="noreferrer"
-            className="link ttu di-l dib center m1"
-          >
-            <CustomButton className="ba b--red red pa2 mv2 mh2 w4">{link.name}</CustomButton>
-          </a>
-        ))}
-      </div>
+      <CustomDropdown
+        buttonClassname="bg-transparent partners-banner-button"
+        title={<FormattedMessage {...messages.resources} />}
+        data={resourcesData}
+      />
     );
   };
 
diff --git a/frontend/src/components/partners/styles.scss b/frontend/src/components/partners/styles.scss
index fd14c119ad..e3e3295c61 100644
--- a/frontend/src/components/partners/styles.scss
+++ b/frontend/src/components/partners/styles.scss
@@ -23,6 +23,38 @@
 }
 
 .partners-social-icon {
-  height: 24px;
-  width: 24px;
+  height: 20px;
+  width: 20px;
+}
+
+.partners-banner-button {
+  padding: 0.75rem 0 !important;
+}
+
+.partners-banner-logo {
+  margin: 2.25rem 0 1.75rem 0;
+}
+
+.partners-custom-dropdown {
+  width: 17rem;
+  right: 0;
+  padding: 0.5rem 0;
+  z-index: 111;
+}
+
+.partners-dropdown-icon {
+  width: 12px;
+}
+
+.partners-tab-item {
+  border-radius: 3px 3px 0px 0px;
+  padding: 0.625rem 1.375rem;
+  font-weight: 500;
+}
+
+.partners-dropdown-list-item {
+  padding: 0.75rem 2rem;
+  &:hover {
+    background-color: #4e5157;
+  }
 }
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index c17c7d1917..ddbf37eeec 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -1173,7 +1173,7 @@
   "management.partner.edit.error": "Partner name already exists",
   "management.partner.learnToMap": "Learn to Map",
   "management.partner.currentProjects": "Current Projects",
-  "management.partner.newToMapping": "¿New to Mapping?",
+  "management.partner.newToMapping": "New to Mapping?",
   "management.partner.activity": "Activity",
   "management.partner.resources": "Resources",
   "management.entity.creation.success": "{entity, select, organization {Organization} partner {Partner} license {License} project {Project} category {Category} campaign {Campaign} team {Team} other {}} created successfully",
diff --git a/frontend/src/routes.js b/frontend/src/routes.js
index 2ca317b374..7495186182 100644
--- a/frontend/src/routes.js
+++ b/frontend/src/routes.js
@@ -113,7 +113,7 @@ export const router = createBrowserRouter(
         }}
       />
       <Route
-        path="partners/:id/stats/"
+        path="partners/:id/stats/:tabname?"
         lazy={async () => {
           const { PartnersStats } = await import(
             './views/partnersStats' /* webpackChunkName: "partnersStats" */
diff --git a/frontend/src/views/partnersStats.js b/frontend/src/views/partnersStats.js
index 152abe8d09..5673160345 100644
--- a/frontend/src/views/partnersStats.js
+++ b/frontend/src/views/partnersStats.js
@@ -1,24 +1,46 @@
 import React, { useEffect, useState } from 'react';
-import { Link, useParams } from 'react-router-dom';
+import { Link, useParams, useNavigate } from 'react-router-dom';
 import ReactPlaceholder from 'react-placeholder';
 import { FormattedMessage } from 'react-intl';
 
 import messages from './messages';
 import { NotFound } from './notFound';
 import { useFetch } from '../hooks/UseFetch';
-import { StatsSection } from '../components/partners/partnersStats';
-import { Activity } from '../components/partners/partnersActivity';
-import { CurrentProjects } from '../components/partners/currentProjects';
+import { Leaderboard } from '../components/partners/leaderboard';
 import { Resources } from '../components/partners/partnersResources';
 import { OHSOME_STATS_BASE_URL } from '../config';
 import { Button } from '../components/button';
 import { TwitterIcon, FacebookIcon, InstagramIcon } from '../components/svgIcons';
 
+function getSocialIcons(link) {
+  const socialName = link.split('_')?.[1];
+  switch (socialName) {
+    case 'x':
+      return <TwitterIcon noBg className="partners-social-icon" />;
+    case 'meta':
+      return <FacebookIcon className="partners-social-icon" />;
+    case 'instagram':
+      return <InstagramIcon className="partners-social-icon" />;
+    default:
+      return <></>;
+  }
+}
+
+const tabData = [{ id: 'leaderboard', title: 'Leaderboard' }];
+
 export const PartnersStats = () => {
-  const { id } = useParams();
+  const { id, tabname } = useParams();
+  const navigate = useNavigate();
   const [partnerStats, setPartnerStats] = useState(null);
   const [error, loading, partner] = useFetch(`partners/${id}/`);
 
+  // navigate to /leaderboard path when no tab param present
+  useEffect(() => {
+    if (!tabname) {
+      navigate('leaderboard');
+    }
+  }, [navigate, tabname]);
+
   const fetchData = async (name) => {
     try {
       let hashtag = name.trim();
@@ -45,6 +67,19 @@ export const PartnersStats = () => {
     }
   }, [partner]);
 
+  function getTabContent() {
+    switch (tabname) {
+      case 'leaderboard':
+        return <Leaderboard partner={partner} partnerStats={partnerStats} />;
+      default:
+        return <></>;
+    }
+  }
+
+  const socialLinks = Object.keys(partner)
+    .filter((key) => key.startsWith('link'))
+    .filter((link) => partner[link]);
+
   return (
     <ReactPlaceholder
       showLoadingAnimation={true}
@@ -56,85 +91,67 @@ export const PartnersStats = () => {
         <NotFound />
       ) : (
         <div className="">
-          <div className="flex items-center justify-between bg-blue-dark pa4">
+          <div className="flex flex-column bg-blue-dark ph4">
             {/* logo */}
             {partner.logo_url ? (
-              <img src={partner.logo_url} alt="logo" height={70} />
+              <div className="partners-banner-logo">
+                <img src={partner.logo_url} alt="logo" height={70} />
+              </div>
             ) : (
-              <h3 className="f2 fw6 ttu barlow-condensed white">{partner.name}</h3>
-            )}
-            {/* new to mapping button */}
-            <Link to={`/learn/map/`}>
-              <Button className="bg-grey-dark white mr3 br1 f5 bn">
-                <FormattedMessage {...messages.newToMapping} />
-              </Button>
-            </Link>
-          </div>
-          {/* social logos */}
-          <div className="pa4 bg-tan flex flex-column" style={{ gap: '1.25rem' }}>
-            <div className="flex justify-between items-center">
-              <h3 className="f2 blue-dark fw7 ma0 barlow-condensed v-mid dib">
-                {partner.primary_hashtag
-                  ?.split(',')
-                  ?.map((str) => `#${str}`)
-                  ?.join(', ')}
+              <h3 className="f2 fw6 ttu barlow-condensed white" style={{ marginBottom: '1.75rem' }}>
+                {partner.name}
               </h3>
-              <div className="flex" style={{ gap: '0.5rem' }}>
-                {!!partner.link_x && (
-                  <a
-                    href={partner.link_x}
-                    className="link barlow-condensed white f4 ttu di-l dib"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    <TwitterIcon className="blue-dark partners-social-icon" />
-                  </a>
-                )}
-                {!!partner.link_meta && (
-                  <a
-                    href={partner.link_meta}
-                    className="link barlow-condensed white f4 ttu di-l dib"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    <FacebookIcon className="blue-dark partners-social-icon" />
-                  </a>
-                )}
-                {!!partner.link_instagram && (
-                  <a
-                    href={partner.link_instagram}
-                    className="link barlow-condensed white f4 ttu di-l dib"
-                    target="_blank"
-                    rel="noreferrer"
+            )}
+            <div className="flex justify-between">
+              <div className="flex gap-0.75">
+                {tabData.map(({ id: tabId, title }) => (
+                  <div
+                    key={tabId}
+                    role="button"
+                    tabIndex={0}
+                    className={`flex items-center pointer partners-tab-item ${
+                      tabname === tabId ? 'bg-tan blue-dark' : 'bg-grey-dark white'
+                    }`}
+                    onClick={() => navigate(`/partners/${id}/stats/${tabId}`)}
+                    onKeyDown={() => {}}
                   >
-                    <InstagramIcon className="blue-dark partners-social-icon" />
-                  </a>
-                )}
+                    <p className="ma0">{title}</p>
+                  </div>
+                ))}
               </div>
-            </div>
-
-            <StatsSection partner={partnerStats} />
-
-            <CurrentProjects currentProjects={partner.current_projects} />
+              <div className="flex gap-1.5">
+                {/* new to mapping button */}
+                <Link to={`/learn/map/`}>
+                  <Button className="bg-transparent white br1 f5 fw5 bn partners-banner-button">
+                    <FormattedMessage {...messages.newToMapping} />
+                  </Button>
+                </Link>
 
-            {/* resources section */}
-            {Object.keys(partner).some((key) => key.includes('name_')) && (
-              <div className="w-100 fl cf">
-                <h3 className="f2 fw6 ttu barlow-condensed blue-dark mt0 pt2 mb3">
-                  <FormattedMessage {...messages.resources} />
-                </h3>
+                {/* resources button */}
                 <Resources partner={partner} />
-              </div>
-            )}
 
-            {/* activity section */}
-            <div className="w-100 fl cf">
-              <h3 className="f2 fw6 ttu barlow-condensed blue-dark mt0 pt2 mb3">
-                <FormattedMessage {...messages.activity} />
-              </h3>
-              <Activity partner={partner} />
+                {/* social logos */}
+                {!!socialLinks.length && (
+                  <div className="flex items-center gap-0.625">
+                    {socialLinks.map((link) => (
+                      <a
+                        key={link}
+                        href={partner[link]}
+                        className="link barlow-condensed white f4 ttu di-l dib"
+                        target="_blank"
+                        rel="noreferrer"
+                      >
+                        {getSocialIcons(link)}
+                      </a>
+                    ))}
+                  </div>
+                )}
+              </div>
             </div>
           </div>
+
+          {/* tab content */}
+          {getTabContent()}
         </div>
       )}
     </ReactPlaceholder>