diff --git a/components/icons/PythIcon.tsx b/components/icons/PythIcon.tsx
new file mode 100644
index 00000000..8463b5c5
--- /dev/null
+++ b/components/icons/PythIcon.tsx
@@ -0,0 +1,21 @@
+const PythIcon = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      className={`${className}`}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 76 95"
+      fill="none"
+    >
+      <path
+        d="M19.4677 5.5338C24.9839 2.3324 31.3861 0.5 38.2167 0.5C58.9288 0.5 75.7147 17.336 75.7147 38.1004C75.7147 58.8648 58.9288 75.7006 38.2167 75.7006V66.3006C53.7476 66.3006 66.3402 53.6737 66.3402 38.1004C66.3402 22.5271 53.7476 9.90013 38.2167 9.90013C34.9308 9.90013 31.772 10.4655 28.8422 11.5115C25.3485 12.7444 22.1728 14.6575 19.4677 17.0809C13.7142 22.2465 10.0932 29.7505 10.0932 38.1004V75.7006L0.71875 66.3006V38.1004C0.71875 28.5685 4.25909 19.8614 10.0932 13.2333C12.7729 10.1849 15.9358 7.57876 19.4677 5.5338Z"
+        fill="#E6DAFE"
+      />
+      <path
+        d="M38.216 47.4995C43.393 47.4995 47.5905 43.2905 47.5905 38.0994C47.5905 32.9082 43.393 28.6993 38.216 28.6993C33.0391 28.6993 28.8415 32.9082 28.8415 38.0994V94.5L19.467 85.1V38.0994C19.467 31.1397 23.2363 25.0642 28.8415 21.8161C31.5974 20.2133 34.8029 19.2992 38.216 19.2992C48.5699 19.2992 56.965 27.7172 56.965 38.0994C56.965 48.4816 48.5699 56.8995 38.216 56.8995V47.4995Z"
+        fill="#E6DAFE"
+      />
+    </svg>
+  )
+}
+
+export default PythIcon
diff --git a/components/modals/PerpMarketDetailsModal.tsx b/components/modals/PerpMarketDetailsModal.tsx
index 56f1edf6..e9aab7d0 100644
--- a/components/modals/PerpMarketDetailsModal.tsx
+++ b/components/modals/PerpMarketDetailsModal.tsx
@@ -3,13 +3,10 @@ import Modal from '../shared/Modal'
 import { useTranslation } from 'next-i18next'
 import { PerpMarket } from '@blockworks-foundation/mango-v4'
 import Button from '@components/shared/Button'
-import useOracleProvider from 'hooks/useOracleProvider'
-import {
-  ArrowTopRightOnSquareIcon,
-  ExclamationTriangleIcon,
-} from '@heroicons/react/20/solid'
+import { ExclamationTriangleIcon } from '@heroicons/react/20/solid'
 import Tooltip from '@components/shared/Tooltip'
 import { useRouter } from 'next/router'
+import OracleProvider from '@components/shared/OracleProvider'
 
 interface PerpMarketDetailsModalProps {
   market: PerpMarket | undefined
@@ -23,7 +20,6 @@ const PerpMarketDetailsModal = ({
   market,
 }: ModalCombinedProps) => {
   const { t } = useTranslation(['common', 'trade'])
-  const { oracleProvider, oracleLinkPath } = useOracleProvider()
   const router = useRouter()
 
   const goToPerpDetails = (marketName: string) => {
@@ -86,19 +82,7 @@ const PerpMarketDetailsModal = ({
         </div>
         <div className="flex justify-between">
           <p>{t('trade:oracle')}</p>
-          {oracleLinkPath ? (
-            <a
-              className="flex items-center"
-              href={oracleLinkPath}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <span className="mr-1.5">{oracleProvider}</span>
-              <ArrowTopRightOnSquareIcon className="h-4 w-4" />
-            </a>
-          ) : (
-            <p className="text-th-fgd-2">{oracleProvider}</p>
-          )}
+          <OracleProvider />
         </div>
         <div className="flex justify-between">
           <Tooltip
diff --git a/components/modals/SpotMarketDetailsModal.tsx b/components/modals/SpotMarketDetailsModal.tsx
index ae0ad76c..4c741d96 100644
--- a/components/modals/SpotMarketDetailsModal.tsx
+++ b/components/modals/SpotMarketDetailsModal.tsx
@@ -4,14 +4,11 @@ import { useTranslation } from 'next-i18next'
 import useSelectedMarket from 'hooks/useSelectedMarket'
 import { Serum3Market } from '@blockworks-foundation/mango-v4'
 import Button from '@components/shared/Button'
-import useOracleProvider from 'hooks/useOracleProvider'
-import {
-  ArrowTopRightOnSquareIcon,
-  ExclamationTriangleIcon,
-} from '@heroicons/react/20/solid'
+import { ExclamationTriangleIcon } from '@heroicons/react/20/solid'
 import useMangoGroup from 'hooks/useMangoGroup'
 import { useMemo } from 'react'
 import Tooltip from '@components/shared/Tooltip'
+import OracleProvider from '@components/shared/OracleProvider'
 
 interface SpotMarketDetailsModalProps {
   market: Serum3Market | undefined
@@ -26,7 +23,6 @@ const SpotMarketDetailsModal = ({
 }: ModalCombinedProps) => {
   const { t } = useTranslation(['common', 'trade'])
   const { serumOrPerpMarket } = useSelectedMarket()
-  const { oracleProvider, oracleLinkPath } = useOracleProvider()
   const { group } = useMangoGroup()
 
   const [baseBank, quoteBank] = useMemo(() => {
@@ -77,19 +73,7 @@ const SpotMarketDetailsModal = ({
         </div>
         <div className="flex justify-between">
           <p>{t('trade:oracle')}</p>
-          {oracleLinkPath ? (
-            <a
-              className="flex items-center"
-              href={oracleLinkPath}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <span className="mr-1.5">{oracleProvider}</span>
-              <ArrowTopRightOnSquareIcon className="h-4 w-4" />
-            </a>
-          ) : (
-            <p className="text-th-fgd-2">{oracleProvider}</p>
-          )}
+          <OracleProvider />
         </div>
         {baseMintInfo ? (
           <div className="flex justify-between">
diff --git a/components/shared/OracleProvider.tsx b/components/shared/OracleProvider.tsx
new file mode 100644
index 00000000..051c9862
--- /dev/null
+++ b/components/shared/OracleProvider.tsx
@@ -0,0 +1,25 @@
+import PythIcon from '@components/icons/PythIcon'
+import { ArrowTopRightOnSquareIcon } from '@heroicons/react/20/solid'
+import useOracleProvider from 'hooks/useOracleProvider'
+
+const OracleProvider = () => {
+  const { oracleProvider, oracleLinkPath } = useOracleProvider()
+  return oracleLinkPath ? (
+    <a
+      className="flex items-center"
+      href={oracleLinkPath}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {oracleProvider === 'Pyth' ? (
+        <PythIcon className="mr-1.5 h-4 w-4" />
+      ) : null}
+      <span className="mr-1.5">{oracleProvider}</span>
+      <ArrowTopRightOnSquareIcon className="h-4 w-4" />
+    </a>
+  ) : (
+    <p className="text-th-fgd-2">{oracleProvider}</p>
+  )
+}
+
+export default OracleProvider
diff --git a/components/stats/perps/PerpMarketDetailsTable.tsx b/components/stats/perps/PerpMarketDetailsTable.tsx
index d0b071e9..bf9c69b8 100644
--- a/components/stats/perps/PerpMarketDetailsTable.tsx
+++ b/components/stats/perps/PerpMarketDetailsTable.tsx
@@ -3,19 +3,15 @@ import mangoStore from '@store/mangoStore'
 import ContentBox from '@components/shared/ContentBox'
 import MarketLogos from '@components/trade/MarketLogos'
 import { Table, Td, Th, TrBody, TrHead } from '@components/shared/TableElements'
-import {
-  ArrowTopRightOnSquareIcon,
-  ChevronDownIcon,
-  ChevronRightIcon,
-} from '@heroicons/react/20/solid'
+import { ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/20/solid'
 import Tooltip from '@components/shared/Tooltip'
 import { Disclosure, Transition } from '@headlessui/react'
-import { getOracleProvider } from 'hooks/useOracleProvider'
 import { NextRouter, useRouter } from 'next/router'
 import { LinkButton } from '@components/shared/Button'
 import SoonBadge from '@components/shared/SoonBadge'
 import { useViewport } from 'hooks/useViewport'
 import { breakpoints } from 'utils/theme'
+import OracleProvider from '@components/shared/OracleProvider'
 
 export const goToPerpMarketDetails = (
   market: string | undefined,
@@ -89,7 +85,6 @@ const PerpMarketDetailsTable = () => {
                 publicKey,
               } = market
 
-              const [oracleProvider, oracleLinkPath] = getOracleProvider(market)
               const isComingSoon = market.oracleLastUpdatedSlot == 0
 
               return (
@@ -144,21 +139,9 @@ const PerpMarketDetailsTable = () => {
                     </p>
                   </Td>
                   <Td>
-                    {oracleLinkPath ? (
-                      <a
-                        className="flex items-center justify-end"
-                        href={oracleLinkPath}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                      >
-                        <span className="mr-1.5 font-body">
-                          {oracleProvider}
-                        </span>
-                        <ArrowTopRightOnSquareIcon className="h-4 w-4" />
-                      </a>
-                    ) : (
-                      <p className="text-right font-body">{oracleProvider}</p>
-                    )}
+                    <div className="flex justify-end">
+                      <OracleProvider />
+                    </div>
                   </Td>
                   <Td>
                     <div className="flex justify-end">
@@ -186,7 +169,6 @@ const PerpMarketDetailsTable = () => {
               maxFunding,
               publicKey,
             } = market
-            const [oracleProvider, oracleLinkPath] = getOracleProvider(market)
             const isComingSoon = market.oracleLastUpdatedSlot == 0
             return (
               <Disclosure key={publicKey.toString()}>
@@ -218,7 +200,7 @@ const PerpMarketDetailsTable = () => {
                       enterTo="opacity-100"
                     >
                       <Disclosure.Panel>
-                        <div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pb-4 pt-4">
+                        <div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 py-4">
                           <div className="col-span-1">
                             <p className="text-xs text-th-fgd-3">
                               {t('trade:min-order-size')}
@@ -287,23 +269,7 @@ const PerpMarketDetailsTable = () => {
                           </div>
                           <div className="col-span-1">
                             <p className="text-xs">{t('trade:oracle')}</p>
-                            {oracleLinkPath ? (
-                              <a
-                                className="flex items-center"
-                                href={oracleLinkPath}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                              >
-                                <span className="mr-1.5 font-body">
-                                  {oracleProvider}
-                                </span>
-                                <ArrowTopRightOnSquareIcon className="h-4 w-4" />
-                              </a>
-                            ) : (
-                              <p className="text-right font-body">
-                                {oracleProvider}
-                              </p>
-                            )}
+                            <OracleProvider />
                           </div>
                           <div className="col-span-1">
                             <Tooltip
diff --git a/components/stats/perps/PerpMarketParams.tsx b/components/stats/perps/PerpMarketParams.tsx
index 4ce3fe3e..36ef96ff 100644
--- a/components/stats/perps/PerpMarketParams.tsx
+++ b/components/stats/perps/PerpMarketParams.tsx
@@ -1,18 +1,11 @@
 import { PerpMarket } from '@blockworks-foundation/mango-v4'
+import OracleProvider from '@components/shared/OracleProvider'
 import Tooltip from '@components/shared/Tooltip'
-import { ArrowTopRightOnSquareIcon } from '@heroicons/react/20/solid'
-import { getOracleProvider } from 'hooks/useOracleProvider'
 import { useTranslation } from 'next-i18next'
-import { useMemo } from 'react'
 
 const PerpMarketParams = ({ market }: { market: PerpMarket }) => {
   const { t } = useTranslation(['common', 'stats', 'token', 'trade'])
 
-  const [oracleProvider, oracleLinkPath] = useMemo(() => {
-    if (!market) return ['Unavaliable', '']
-    return getOracleProvider(market)
-  }, [market])
-
   const {
     name,
     minOrderSize,
@@ -158,15 +151,7 @@ const PerpMarketParams = ({ market }: { market: PerpMarket }) => {
         </div>
         <div className="flex justify-between border-t border-th-bkg-3 py-4">
           <p>{t('token:oracle')}</p>
-          <a
-            className="flex items-center"
-            href={oracleLinkPath}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <span className="mr-1.5">{oracleProvider}</span>
-            <ArrowTopRightOnSquareIcon className="h-4 w-4" />
-          </a>
+          {market ? <OracleProvider /> : <p>Unavailable</p>}
         </div>
         <div className="flex justify-between border-t border-th-bkg-3 py-4">
           <Tooltip content={t('token:tooltip-oracle-confidence')}>
diff --git a/components/stats/tokens/TokenDetailsTable.tsx b/components/stats/tokens/TokenDetailsTable.tsx
index 7f4865b5..01f45a0b 100644
--- a/components/stats/tokens/TokenDetailsTable.tsx
+++ b/components/stats/tokens/TokenDetailsTable.tsx
@@ -1,9 +1,5 @@
 import { Disclosure, Transition } from '@headlessui/react'
-import {
-  ArrowTopRightOnSquareIcon,
-  ChevronDownIcon,
-  ChevronRightIcon,
-} from '@heroicons/react/20/solid'
+import { ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/20/solid'
 import { useTranslation } from 'next-i18next'
 import { useViewport } from '../../../hooks/useViewport'
 import { breakpoints } from '../../../utils/theme'
@@ -28,6 +24,7 @@ import { useCallback } from 'react'
 import { useSortableData } from 'hooks/useSortableData'
 import TableTokenName from '@components/shared/TableTokenName'
 import CollateralWeightDisplay from '@components/shared/CollateralWeightDisplay'
+import OracleProvider from '@components/shared/OracleProvider'
 
 const TokenDetailsTable = () => {
   const { t } = useTranslation(['common', 'activity', 'token', 'trade'])
@@ -178,8 +175,6 @@ const TokenDetailsTable = () => {
                   isInsured,
                   liquidationFee,
                   loanOriginationFee,
-                  oracleLinkPath,
-                  oracleProvider,
                   symbol,
                 } = data
 
@@ -211,21 +206,9 @@ const TokenDetailsTable = () => {
                       <p className="text-right">{isInsured}</p>
                     </Td>
                     <Td>
-                      {oracleLinkPath ? (
-                        <a
-                          className="flex items-center justify-end"
-                          href={oracleLinkPath}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                        >
-                          <span className="mr-1.5 font-body">
-                            {oracleProvider}
-                          </span>
-                          <ArrowTopRightOnSquareIcon className="h-4 w-4" />
-                        </a>
-                      ) : (
-                        <p className="text-right font-body">{oracleProvider}</p>
-                      )}
+                      <div className="flex justify-end">
+                        <OracleProvider />
+                      </div>
                     </Td>
                     <Td>
                       <div className="flex justify-end">
@@ -242,7 +225,6 @@ const TokenDetailsTable = () => {
         <div className="border-b border-th-bkg-3">
           {banks.map((b, i) => {
             const bank = b.bank
-            const [oracleProvider, oracleLinkPath] = getOracleProvider(bank)
             const mintInfo = group.mintInfosMapByMint.get(bank.mint.toString())
             return (
               <Disclosure key={bank.name}>
@@ -268,7 +250,7 @@ const TokenDetailsTable = () => {
                       enterTo="opacity-100"
                     >
                       <Disclosure.Panel>
-                        <div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pb-4 pt-4">
+                        <div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 py-4">
                           <div className="col-span-1">
                             <Tooltip
                               content={t('asset-liability-weight-desc')}
@@ -325,23 +307,7 @@ const TokenDetailsTable = () => {
                           </div>
                           <div className="col-span-1">
                             <p className="text-xs">{t('trade:oracle')}</p>
-                            {oracleLinkPath ? (
-                              <a
-                                className="flex items-center"
-                                href={oracleLinkPath}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                              >
-                                <span className="mr-1.5 font-body">
-                                  {oracleProvider}
-                                </span>
-                                <ArrowTopRightOnSquareIcon className="h-4 w-4" />
-                              </a>
-                            ) : (
-                              <p className="text-right font-body">
-                                {oracleProvider}
-                              </p>
-                            )}
+                            <OracleProvider />
                           </div>
                           <div className="col-span-1">
                             <Tooltip
diff --git a/components/token/TokenParams.tsx b/components/token/TokenParams.tsx
index bf14b7f9..ccddc326 100644
--- a/components/token/TokenParams.tsx
+++ b/components/token/TokenParams.tsx
@@ -5,23 +5,17 @@ import {
   toUiDecimalsForQuote,
 } from '@blockworks-foundation/mango-v4'
 import Tooltip from '@components/shared/Tooltip'
-import { ArrowTopRightOnSquareIcon } from '@heroicons/react/20/solid'
 import { BN } from '@coral-xyz/anchor'
 import mangoStore from '@store/mangoStore'
-import { getOracleProvider } from 'hooks/useOracleProvider'
 import { useTranslation } from 'next-i18next'
 import { useMemo } from 'react'
 import { formatCurrencyValue } from 'utils/numbers'
 import CollateralWeightDisplay from '@components/shared/CollateralWeightDisplay'
+import OracleProvider from '@components/shared/OracleProvider'
 
 const TokenParams = ({ bank }: { bank: Bank }) => {
   const { t } = useTranslation(['common', 'activity', 'token'])
 
-  const [oracleProvider, oracleLinkPath] = useMemo(() => {
-    if (!bank) return ['Unavaliable', '']
-    return getOracleProvider(bank)
-  }, [bank])
-
   const mintInfo = useMemo(() => {
     const group = mangoStore.getState().group
     if (!bank || !group) return
@@ -172,19 +166,7 @@ const TokenParams = ({ bank }: { bank: Bank }) => {
         </div>
         <div className="flex justify-between border-t border-th-bkg-3 py-4">
           <p>{t('token:oracle')}</p>
-          {oracleLinkPath ? (
-            <a
-              className="flex items-center"
-              href={oracleLinkPath}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <span className="mr-1.5">{oracleProvider}</span>
-              <ArrowTopRightOnSquareIcon className="h-4 w-4" />
-            </a>
-          ) : (
-            <p className="text-th-fgd-2">{oracleProvider}</p>
-          )}
+          {bank ? <OracleProvider /> : <p>Unavailable</p>}
         </div>
         <div className="flex justify-between border-t border-th-bkg-3 py-4">
           <Tooltip content={t('token:tooltip-oracle-confidence')}>
diff --git a/components/trade/OraclePrice.tsx b/components/trade/OraclePrice.tsx
index abe8fe36..35b3d58d 100644
--- a/components/trade/OraclePrice.tsx
+++ b/components/trade/OraclePrice.tsx
@@ -15,8 +15,8 @@ import dayjs from 'dayjs'
 import duration from 'dayjs/plugin/duration'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import useOracleProvider from 'hooks/useOracleProvider'
-import { ArrowTopRightOnSquareIcon } from '@heroicons/react/20/solid'
 import { CURRENCY_SYMBOLS } from './MarketSelectDropdown'
+import OracleProvider from '@components/shared/OracleProvider'
 
 const OraclePrice = () => {
   const {
@@ -33,7 +33,7 @@ const OraclePrice = () => {
   const [oracleLastUpdatedSlot, setOracleLastUpdatedSlot] = useState(0)
   const [highestSlot, setHighestSlot] = useState(0)
   const [isStale, setIsStale] = useState(false)
-  const { oracleProvider, oracleLinkPath } = useOracleProvider()
+  const { oracleProvider } = useOracleProvider()
 
   const { t } = useTranslation(['common', 'trade'])
 
@@ -126,21 +126,9 @@ const OraclePrice = () => {
           content={
             !isStub ? (
               <>
-                <div className="flex">
+                <div className="flex text-sm">
                   <span className="mr-1">{t('trade:price-provided-by')}</span>
-                  {oracleLinkPath ? (
-                    <a
-                      href={oracleLinkPath}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="flex items-center"
-                    >
-                      <span className="mr-1">{oracleProvider}</span>
-                      <ArrowTopRightOnSquareIcon className="h-4 w-4" />
-                    </a>
-                  ) : (
-                    <span className="text-th-fgd-2">{oracleProvider}</span>
-                  )}
+                  <OracleProvider />
                 </div>
                 <div className="mt-2">
                   {t('trade:last-updated')}{' '}