From b952f18b8c47d29eab2a66c864dcf48342e7b910 Mon Sep 17 00:00:00 2001
From: PartyParrotGreg <2233348+partyparrotgreg@users.noreply.github.com>
Date: Wed, 22 Jan 2025 18:11:47 +0000
Subject: [PATCH 01/13] chore(insights): add mobile menu component with styles
 and update stats rendering in PriceFeeds

---
 apps/insights/.env.development                |  1 +
 .../src/components/CopyButton/index.tsx       |  1 -
 .../MobileMenu/mobile-menu.module.scss        | 54 +++++++++++++
 .../components/MobileMenu/mobile-menu.v2.tsx  | 75 +++++++++++++++++++
 .../src/components/PriceFeeds/index.tsx       | 59 ++++++++-------
 .../src/components/Root/footer.module.scss    | 11 ++-
 apps/insights/src/components/Root/footer.tsx  |  5 +-
 .../src/components/Root/header.module.scss    | 70 +++++++++++------
 apps/insights/src/components/Root/header.tsx  | 34 +++++----
 .../src/components/Root/search-button.tsx     |  2 +-
 .../Root/support-drawer.module.scss           | 15 ++--
 .../src/components/Stats/index.module.scss    | 56 ++++++++++++++
 apps/insights/src/components/Stats/index.tsx  |  9 +++
 .../src/Button/index.module.scss              |  5 +-
 .../src/Card/index.module.scss                |  1 +
 .../src/Drawer/index.module.scss              | 25 ++++++-
 packages/component-library/src/Html/base.scss |  4 +
 .../src/MainNavTabs/index.module.scss         | 20 +++++
 .../src/SingleToggleGroup/index.module.scss   |  2 +-
 packages/component-library/src/theme.scss     | 54 +++++++++++++
 20 files changed, 426 insertions(+), 77 deletions(-)
 create mode 100644 apps/insights/.env.development
 create mode 100644 apps/insights/src/components/MobileMenu/mobile-menu.module.scss
 create mode 100644 apps/insights/src/components/MobileMenu/mobile-menu.v2.tsx
 create mode 100644 apps/insights/src/components/Stats/index.module.scss
 create mode 100644 apps/insights/src/components/Stats/index.tsx

diff --git a/apps/insights/.env.development b/apps/insights/.env.development
new file mode 100644
index 0000000000..addc9dd5a0
--- /dev/null
+++ b/apps/insights/.env.development
@@ -0,0 +1 @@
+DISABLE_ACCESSIBILITY_REPORTING=true
\ No newline at end of file
diff --git a/apps/insights/src/components/CopyButton/index.tsx b/apps/insights/src/components/CopyButton/index.tsx
index f002ccbbbc..53de57de10 100644
--- a/apps/insights/src/components/CopyButton/index.tsx
+++ b/apps/insights/src/components/CopyButton/index.tsx
@@ -27,7 +27,6 @@ export const CopyButton = ({ text, children, className, ...props }: Props) => {
   const [isCopied, setIsCopied] = useState(false);
   const logger = useLogger();
   const copy = useCallback(() => {
-    // eslint-disable-next-line n/no-unsupported-features/node-builtins
     navigator.clipboard
       .writeText(text)
       .then(() => {
diff --git a/apps/insights/src/components/MobileMenu/mobile-menu.module.scss b/apps/insights/src/components/MobileMenu/mobile-menu.module.scss
new file mode 100644
index 0000000000..668e96c1f2
--- /dev/null
+++ b/apps/insights/src/components/MobileMenu/mobile-menu.module.scss
@@ -0,0 +1,54 @@
+@use "@pythnetwork/component-library/theme";
+
+.mobileMenuTrigger {
+  display: none;
+
+  @include theme.mobile {
+    display: block;
+  }
+}
+
+.mobileMenuOverlay {
+  background: rgb(0 0 0 / 40%);
+  position: fixed;
+  inset: 0;
+  z-index: 999;
+}
+
+.mobileMenuContainer {
+  border-top-left-radius: theme.border-radius("2xl");
+  border-top-right-radius: theme.border-radius("2xl");
+  background: theme.color("background", "modal");
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 1rem;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: theme.spacing(4);
+}
+
+.mobileMenuHandle {
+  background: theme.color("background", "secondary");
+  width: 33%;
+  height: 6px;
+  border-radius: theme.border-radius("full");
+  align-self: center;
+}
+
+.mobileThemeSwitcher {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.mobileThemeSwitcherFeedback {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  gap: theme.spacing(3);
+  text-transform: capitalize;
+  font-weight: theme.font-weight("medium");
+}
diff --git a/apps/insights/src/components/MobileMenu/mobile-menu.v2.tsx b/apps/insights/src/components/MobileMenu/mobile-menu.v2.tsx
new file mode 100644
index 0000000000..d6c5048944
--- /dev/null
+++ b/apps/insights/src/components/MobileMenu/mobile-menu.v2.tsx
@@ -0,0 +1,75 @@
+"use client";
+import { Lifebuoy } from "@phosphor-icons/react/dist/ssr/Lifebuoy";
+import { List } from "@phosphor-icons/react/dist/ssr/List";
+import { X } from "@phosphor-icons/react/dist/ssr/X";
+import { Button } from "@pythnetwork/component-library/Button";
+import clsx from "clsx";
+import { useTheme } from "next-themes";
+import { useState } from "react";
+
+import styles from "./mobile-menu.module.scss";
+import { SupportDrawer } from "../Root/support-drawer";
+import { ThemeSwitch } from "../Root/theme-switch";
+
+export const MobileMenu = ({
+  className,
+  ...props
+}: {
+  className?: string | string[];
+}) => {
+  const { theme } = useTheme();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleMenu = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <div className={clsx(styles.mobileMenuTrigger, className)} {...props}>
+      <Button
+        variant="ghost"
+        size="sm"
+        afterIcon={List}
+        rounded
+        onPress={toggleMenu}
+      >
+        Menu
+      </Button>
+      {isOpen && (
+        <div className={styles.mobileMenuOverlay}>
+          <div className={styles.mobileMenuContainer}>
+            <div className={styles.mobileMenuHandle} />
+            <Button
+              href="https://docs.pyth.network"
+              size="md"
+              rounded
+              target="_blank"
+            >
+              Dev Docs
+            </Button>
+            <SupportDrawer>
+              <Button beforeIcon={Lifebuoy} variant="ghost" size="md" rounded>
+                Support
+              </Button>
+            </SupportDrawer>
+            <div className={styles.mobileThemeSwitcher}>
+              <div>Theme</div>
+              <div className={styles.mobileThemeSwitcherFeedback}>
+                <div>{theme}</div>
+                <ThemeSwitch />
+              </div>
+            </div>
+            <Button
+              variant="outline"
+              afterIcon={X}
+              rounded
+              onPress={toggleMenu}
+            >
+              Close
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/apps/insights/src/components/PriceFeeds/index.tsx b/apps/insights/src/components/PriceFeeds/index.tsx
index 16691c0844..3a0c9aeeca 100644
--- a/apps/insights/src/components/PriceFeeds/index.tsx
+++ b/apps/insights/src/components/PriceFeeds/index.tsx
@@ -23,6 +23,7 @@ import { YesterdaysPricesProvider, ChangePercent } from "../ChangePercent";
 import { LivePrice } from "../LivePrices";
 import { PriceFeedIcon } from "../PriceFeedIcon";
 import { PriceFeedTag } from "../PriceFeedTag";
+import { Stats } from "../Stats";
 
 const PRICE_FEEDS_ANCHOR = "priceFeeds";
 
@@ -48,7 +49,7 @@ export const PriceFeeds = async () => {
     <div className={styles.priceFeeds}>
       <h1 className={styles.header}>Price Feeds</h1>
       <div className={styles.body}>
-        <section className={styles.stats}>
+        <Stats>
           <StatCard
             variant="primary"
             header="Active Feeds"
@@ -74,7 +75,7 @@ export const PriceFeeds = async () => {
               corner={<Info weight="fill" />}
             />
           </AssetClassesDrawer>
-        </section>
+        </Stats>
         <YesterdaysPricesProvider
           feeds={Object.fromEntries(
             featuredRecentlyAdded.map(({ symbol, product }) => [
@@ -165,32 +166,34 @@ const FeaturedFeedsCard = <T extends ElementType>({
 }: FeaturedFeedsCardProps<T>) => (
   <Card {...props}>
     <div className={styles.featuredFeeds}>
-      {feeds.map((feed) => (
-        <Card
-          key={feed.product.price_account}
-          variant="tertiary"
-          {...(linkFeeds && {
-            href: `/price-feeds/${encodeURIComponent(feed.symbol)}`,
-          })}
-        >
-          <div className={styles.feedCardContents}>
-            <PriceFeedTag
-              symbol={feed.product.display_symbol}
-              description={feed.product.description}
-              icon={<PriceFeedIcon symbol={feed.product.display_symbol} />}
-            />
-            {showPrices && (
-              <div className={styles.prices}>
-                <LivePrice feedKey={feed.product.price_account} />
-                <ChangePercent
-                  className={styles.changePercent}
-                  feedKey={feed.product.price_account}
-                />
-              </div>
-            )}
-          </div>
-        </Card>
-      ))}
+      <Stats>
+        {feeds.map((feed) => (
+          <Card
+            key={feed.product.price_account}
+            variant="tertiary"
+            {...(linkFeeds && {
+              href: `/price-feeds/${encodeURIComponent(feed.symbol)}`,
+            })}
+          >
+            <div className={styles.feedCardContents}>
+              <PriceFeedTag
+                symbol={feed.product.display_symbol}
+                description={feed.product.description}
+                icon={<PriceFeedIcon symbol={feed.product.display_symbol} />}
+              />
+              {showPrices && (
+                <div className={styles.prices}>
+                  <LivePrice feedKey={feed.product.price_account} />
+                  <ChangePercent
+                    className={styles.changePercent}
+                    feedKey={feed.product.price_account}
+                  />
+                </div>
+              )}
+            </div>
+          </Card>
+        ))}
+      </Stats>
     </div>
   </Card>
 );
diff --git a/apps/insights/src/components/Root/footer.module.scss b/apps/insights/src/components/Root/footer.module.scss
index f6799a3bf8..979a0c2565 100644
--- a/apps/insights/src/components/Root/footer.module.scss
+++ b/apps/insights/src/components/Root/footer.module.scss
@@ -7,6 +7,10 @@
   // XL
   padding: theme.spacing(8) 0;
 
+  @include theme.mobile {
+    padding-bottom: theme.spacing(20);
+  }
+
   // bg-beige-100 sm:border-t sm:border-stone-300
 
   .topContent {
@@ -18,10 +22,15 @@
     align-items: center;
     justify-content: space-between;
 
+    @media screen and (max-width: theme.breakpoint("sm")) {
+      flex-flow: column nowrap;
+      align-items: flex-start;
+    }
+
     @include theme.max-width;
 
     // XL
-    margin-bottom: theme.spacing(12);
+    margin-bottom: theme.spacing(6);
 
     // py-6
 
diff --git a/apps/insights/src/components/Root/footer.tsx b/apps/insights/src/components/Root/footer.tsx
index 343d49e678..04fa9b773b 100644
--- a/apps/insights/src/components/Root/footer.tsx
+++ b/apps/insights/src/components/Root/footer.tsx
@@ -1,3 +1,4 @@
+import { ArrowSquareOut } from "@phosphor-icons/react/dist/ssr/ArrowSquareOut";
 import {
   type Props as ButtonProps,
   Button,
@@ -21,10 +22,10 @@ export const Footer = () => (
         <div className={styles.divider} />
         <div className={styles.help}>
           <SupportDrawer>
-            <Link>Help</Link>
+            <Link>Support</Link>
           </SupportDrawer>
           <Link href="https://docs.pyth.network" target="_blank">
-            Documentation
+            Documentation <ArrowSquareOut />
           </Link>
         </div>
       </div>
diff --git a/apps/insights/src/components/Root/header.module.scss b/apps/insights/src/components/Root/header.module.scss
index 65a3ff8506..6309d5ebde 100644
--- a/apps/insights/src/components/Root/header.module.scss
+++ b/apps/insights/src/components/Root/header.module.scss
@@ -4,8 +4,11 @@
   position: sticky;
   top: 0;
   width: 100%;
-  background-color: theme.color("background", "nav-blur");
-  backdrop-filter: blur(32px);
+  background-color: theme.color("background", "primary");
+  border-bottom: 1px solid theme.color("background", "secondary");
+
+  // TODO: This causes that navigation is not fixed
+  // backdrop-filter: blur(32px);
 
   .content {
     height: 100%;
@@ -16,18 +19,23 @@
 
     .leftMenu {
       flex: none;
-      gap: theme.spacing(6);
+      gap: theme.spacing(4);
+      position: relative;
 
       @include theme.row;
 
       .logoLink {
         padding: theme.spacing(3);
-        margin: -#{theme.spacing(3)};
         color: theme.color("foreground");
 
+        @include theme.desktop {
+          position: absolute;
+          left: -#{theme.spacing(16)};
+        }
+
         .logoWrapper {
-          width: theme.spacing(9);
-          height: theme.spacing(9);
+          width: theme.spacing(8);
+          height: theme.spacing(8);
           position: relative;
 
           .logo {
@@ -52,33 +60,49 @@
 
     .rightMenu {
       flex: none;
+      position: relative;
       gap: theme.spacing(2);
 
       @include theme.row;
 
-      margin-right: -#{theme.button-padding("sm", false)};
-
       .themeSwitch {
-        margin-left: theme.spacing(1);
-      }
-    }
+        position: relative;
 
-    @media screen and (min-width: theme.$max-width + (2 * (theme.spacing(9) + theme.spacing(8) + theme.spacing(7)))) {
-      .leftMenu {
-        margin-left: -#{theme.spacing(9) + theme.spacing(7)};
-
-        .logoLink {
-          margin-right: -#{theme.spacing(2)};
+        @include theme.mobile {
+          display: none;
         }
-      }
 
-      .rightMenu {
-        margin-right: -#{theme.spacing(9) + theme.spacing(7)};
-
-        .themeSwitch {
-          margin-left: theme.spacing(5);
+        @include theme.desktop {
+          display: block;
+          position: absolute;
+          right: -#{theme.spacing(16)};
         }
       }
     }
+
+    // Reason: you can absolute position relatively to a container and disable this behavior on mobile
+    // @media screen and (min-width: #{theme.$max-width + (2 * (theme.spacing(9) + theme.spacing(8) + theme.spacing(7)))}) {
+    //   .leftMenu {
+    //     margin-left: -#{theme.spacing(9) + theme.spacing(7)};
+
+    //     .logoLink {
+    //       margin-right: -#{theme.spacing(2)};
+    //     }
+    //   }
+
+    //   .rightMenu {
+    //     margin-right: -#{theme.spacing(9) + theme.spacing(7)};
+
+    //     .themeSwitch {
+    //       margin-left: theme.spacing(5);
+    //     }
+    //   }
+    // }
+  }
+}
+
+.hideOnMobile {
+  @include theme.mobile {
+    display: none;
   }
 }
diff --git a/apps/insights/src/components/Root/header.tsx b/apps/insights/src/components/Root/header.tsx
index d83d733ccb..c10a9c7fd5 100644
--- a/apps/insights/src/components/Root/header.tsx
+++ b/apps/insights/src/components/Root/header.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { Lifebuoy } from "@phosphor-icons/react/dist/ssr/Lifebuoy";
 import { Button } from "@pythnetwork/component-library/Button";
 import { Link } from "@pythnetwork/component-library/Link";
@@ -10,6 +12,7 @@ import { SearchButton } from "./search-button";
 import { SupportDrawer } from "./support-drawer";
 import { MainNavTabs } from "./tabs";
 import { ThemeSwitch } from "./theme-switch";
+import { MobileMenu } from "../MobileMenu/mobile-menu.v2";
 
 export const Header = ({ className, ...props }: ComponentProps<"header">) => (
   <header className={clsx(styles.header, className)} {...props}>
@@ -25,21 +28,26 @@ export const Header = ({ className, ...props }: ComponentProps<"header">) => (
         <MainNavTabs />
       </div>
       <div className={styles.rightMenu}>
-        <SupportDrawer>
-          <Button beforeIcon={Lifebuoy} variant="ghost" size="sm" rounded>
-            Support
-          </Button>
-        </SupportDrawer>
+        <div className={styles.hideOnMobile}>
+          <SupportDrawer>
+            <Button beforeIcon={Lifebuoy} variant="ghost" size="sm" rounded>
+              Support
+            </Button>
+          </SupportDrawer>
+        </div>
         <SearchButton />
-        <Button
-          href="https://docs.pyth.network"
-          size="sm"
-          rounded
-          target="_blank"
-        >
-          Dev Docs
-        </Button>
+        <div className={styles.hideOnMobile}>
+          <Button
+            href="https://docs.pyth.network"
+            size="sm"
+            rounded
+            target="_blank"
+          >
+            Dev Docs
+          </Button>
+        </div>
         <ThemeSwitch className={styles.themeSwitch ?? ""} />
+        <MobileMenu />
       </div>
     </div>
   </header>
diff --git a/apps/insights/src/components/Root/search-button.tsx b/apps/insights/src/components/Root/search-button.tsx
index d099ba7431..0f421acb4f 100644
--- a/apps/insights/src/components/Root/search-button.tsx
+++ b/apps/insights/src/components/Root/search-button.tsx
@@ -31,7 +31,7 @@ const SearchText = () => {
 const SearchTextImpl = () => {
   // This component can only ever render in the client so we can safely ignore
   // this eslint rule.
-  // eslint-disable-next-line n/no-unsupported-features/node-builtins
+
   const isMac = useMemo(() => navigator.userAgent.includes("Mac"), []);
   return isMac ? "⌘ K" : "Ctrl K";
 };
diff --git a/apps/insights/src/components/Root/support-drawer.module.scss b/apps/insights/src/components/Root/support-drawer.module.scss
index f6152c85d3..9ef4761f9a 100644
--- a/apps/insights/src/components/Root/support-drawer.module.scss
+++ b/apps/insights/src/components/Root/support-drawer.module.scss
@@ -34,12 +34,12 @@
         grid-template-columns: max-content 1fr max-content;
         grid-template-rows: max-content max-content;
         text-align: left;
-        gap: theme.spacing(2) theme.spacing(4);
-        align-items: center;
+        gap: theme.spacing(1) theme.spacing(4);
+        align-items: start;
         width: 100%;
 
         .icon {
-          font-size: theme.spacing(8);
+          font-size: theme.spacing(6);
           color: theme.color("states", "data", "normal");
           grid-row: span 2 / span 2;
           display: grid;
@@ -47,17 +47,22 @@
         }
 
         .header {
-          @include theme.text("sm", "medium");
+          @include theme.h6;
 
+          line-height: 1.5;
           color: theme.color("heading");
         }
 
         .description {
-          @include theme.text("xs", "normal");
+          @include theme.text("sm", "normal");
 
+          line-height: 1.5;
           color: theme.color("muted");
           grid-column: 2;
           grid-row: 2;
+          word-wrap: break-word;
+          overflow: hidden;
+          max-width: 100%;
         }
 
         .caret {
diff --git a/apps/insights/src/components/Stats/index.module.scss b/apps/insights/src/components/Stats/index.module.scss
new file mode 100644
index 0000000000..5ef9f4ffc8
--- /dev/null
+++ b/apps/insights/src/components/Stats/index.module.scss
@@ -0,0 +1,56 @@
+@use "@pythnetwork/component-library/theme";
+
+.statWrapper {
+  position: relative;
+  width: 100%;
+  display: flex;
+
+  @include theme.mobile {
+    width: 100dvw; // Extend the width beyond the root padding
+    margin-left: -#{theme.spacing(4)};
+    margin-right: -#{theme.spacing(4)};
+    white-space: nowrap;
+    overflow: auto hidden;
+    -webkit-overflow-scrolling: touch;
+    scroll-snap-type: x mandatory;
+    scroll-padding: theme.spacing(4);
+    left: 0;
+    right: 0;
+
+    // Optional: Hide scrollbars
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}
+
+.statsContainer {
+  gap: theme.spacing(2);
+  width: 100%;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+
+  > * {
+    display: flex;
+    width: 100%;
+    flex: 1 0 0;
+    min-width: 0;
+    max-width: 100%;
+    min-height: 0;
+  }
+
+  @include theme.mobile {
+    width: max-content;
+    gap: theme.spacing(3);
+    padding: 0 theme.spacing(4);
+
+    > * {
+      width: 280px;
+      scroll-snap-align: start;
+    }
+  }
+}
diff --git a/apps/insights/src/components/Stats/index.tsx b/apps/insights/src/components/Stats/index.tsx
new file mode 100644
index 0000000000..ec040ed115
--- /dev/null
+++ b/apps/insights/src/components/Stats/index.tsx
@@ -0,0 +1,9 @@
+import styles from "./index.module.scss";
+
+export const Stats = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div className={styles.statWrapper}>
+      <div className={styles.statsContainer}>{children}</div>
+    </div>
+  );
+};
diff --git a/packages/component-library/src/Button/index.module.scss b/packages/component-library/src/Button/index.module.scss
index 6de1e6fc7a..57379baeaa 100644
--- a/packages/component-library/src/Button/index.module.scss
+++ b/packages/component-library/src/Button/index.module.scss
@@ -1,7 +1,7 @@
 @use "../theme";
 
 .button {
-  display: inline flow-root;
+  display: flex;
   cursor: pointer;
   white-space: nowrap;
   font-weight: theme.font-weight("medium");
@@ -12,6 +12,9 @@
   text-decoration: none;
   outline-offset: 0;
   outline: theme.spacing(1) solid transparent;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
 
   .iconWrapper {
     display: inline-grid;
diff --git a/packages/component-library/src/Card/index.module.scss b/packages/component-library/src/Card/index.module.scss
index 2f127ce2a6..097d0940d7 100644
--- a/packages/component-library/src/Card/index.module.scss
+++ b/packages/component-library/src/Card/index.module.scss
@@ -16,6 +16,7 @@
   position: relative;
   padding: theme.spacing(1);
   isolation: isolate;
+  overflow: hidden;
 
   @at-root button#{&} {
     cursor: pointer;
diff --git a/packages/component-library/src/Drawer/index.module.scss b/packages/component-library/src/Drawer/index.module.scss
index 3840e4b28e..1b3e7cab62 100644
--- a/packages/component-library/src/Drawer/index.module.scss
+++ b/packages/component-library/src/Drawer/index.module.scss
@@ -22,6 +22,20 @@
     overflow-y: hidden;
     padding-bottom: theme.border-radius("3xl");
 
+    @include theme.mobile {
+      width: 100%;
+      inset: 0;
+      border-radius: 0;
+      border: none;
+      padding-bottom: 0;
+
+      // Remove if we don't want a gap on the top
+      // Will require to change the animation direction
+      // top: 5rem;
+      // border-top-left-radius: theme.border-radius("2xl");
+      // border-top-right-radius: theme.border-radius("2xl");
+    }
+
     .heading {
       padding: theme.spacing(4);
       padding-left: theme.spacing(6);
@@ -33,6 +47,11 @@
       flex: none;
       border-bottom: 1px solid theme.color("border");
 
+      @include theme.mobile {
+        padding: theme.spacing(3);
+        padding-left: theme.spacing(4);
+      }
+
       .title {
         @include theme.h4;
 
@@ -51,8 +70,12 @@
 
     .body {
       flex: 1;
-      overflow-y: auto;
+      overflow: hidden auto;
       padding: theme.spacing(6);
+
+      @include theme.mobile {
+        padding: theme.spacing(4);
+      }
     }
 
     &[data-fill] {
diff --git a/packages/component-library/src/Html/base.scss b/packages/component-library/src/Html/base.scss
index f4bc030dcc..498fb50698 100644
--- a/packages/component-library/src/Html/base.scss
+++ b/packages/component-library/src/Html/base.scss
@@ -10,6 +10,10 @@
   line-height: 1;
 }
 
+nextjs-portal {
+  display: none;
+}
+
 html {
   // We use `scrollbar-gutter: stable` which prevents the page from jumping when
   // adding or removing the scrollbar.  However, react-aria [tries to add a
diff --git a/packages/component-library/src/MainNavTabs/index.module.scss b/packages/component-library/src/MainNavTabs/index.module.scss
index 0d6e7573ef..121a7afa7c 100644
--- a/packages/component-library/src/MainNavTabs/index.module.scss
+++ b/packages/component-library/src/MainNavTabs/index.module.scss
@@ -5,10 +5,30 @@
 
   @include theme.row;
 
+  @include theme.mobile {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 900;
+    padding: 0.5rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 3rem;
+    border-top: 1px solid theme.color("border");
+    background: theme.color("background", "primary");
+  }
+
   .tab {
     position: relative;
     outline: none;
 
+    @include theme.mobile {
+      flex-grow: 1;
+      text-align: center;
+    }
+
     .bubble {
       position: absolute;
       inset: 0;
diff --git a/packages/component-library/src/SingleToggleGroup/index.module.scss b/packages/component-library/src/SingleToggleGroup/index.module.scss
index 5bc1f0d035..64a0400d7d 100644
--- a/packages/component-library/src/SingleToggleGroup/index.module.scss
+++ b/packages/component-library/src/SingleToggleGroup/index.module.scss
@@ -1,7 +1,7 @@
 @use "../theme";
 
 .singleToggleGroup {
-  gap: theme.spacing(2);
+  gap: theme.spacing(1);
 
   @include theme.row;
 
diff --git a/packages/component-library/src/theme.scss b/packages/component-library/src/theme.scss
index 0cfb0b6f9b..0f7d09eb18 100644
--- a/packages/component-library/src/theme.scss
+++ b/packages/component-library/src/theme.scss
@@ -80,6 +80,38 @@ $border-radius: (
   @return map-get-strict($border-radius, $radius);
 }
 
+$brakpoints: (
+  "xs": 480px,
+  "sm": 720px,
+  "md": 960px,
+  "lg": 1024px,
+  "xl": 1280px,
+  "2xl": 1536px,
+  "3xl": 1720px,
+);
+
+@function breakpoint($breakpoint) {
+  @return map-get-strict($brakpoints, $breakpoint);
+}
+
+@mixin mobile() {
+  @media screen and (max-width: breakpoint("md")) {
+    @content;
+  }
+}
+
+@mixin tablet() {
+  @media screen and (min-width: breakpoint("md")) {
+    @content;
+  }
+}
+
+@mixin desktop() {
+  @media screen and (min-width: breakpoint("3xl")) {
+    @content;
+  }
+}
+
 $color-pallette: (
   "black": #000,
   "white": #fff,
@@ -726,6 +758,10 @@ $max-width: 96rem;
   max-width: $max-width;
   padding: 0 spacing(6);
   box-sizing: content-box;
+
+  @include mobile {
+    padding: 0 spacing(4);
+  }
 }
 
 @mixin row {
@@ -784,6 +820,24 @@ $elevations: (
   margin: 0;
 }
 
+@mixin h5 {
+  font-size: font-size("lg");
+  font-style: normal;
+  font-weight: font-weight("medium");
+  line-height: 125%;
+  letter-spacing: letter-spacing("tight");
+  margin: 0;
+}
+
+@mixin h6 {
+  font-size: font-size("base");
+  font-style: normal;
+  font-weight: font-weight("medium");
+  line-height: 125%;
+  letter-spacing: letter-spacing("tight");
+  margin: 0;
+}
+
 @mixin text($size: "base", $weight: "normal") {
   font-size: font-size($size);
   font-weight: font-weight($weight);

From b27e3e41796a3368c8e711ea78081fe08cc19bdf Mon Sep 17 00:00:00 2001
From: PartyParrotGreg <2233348+partyparrotgreg@users.noreply.github.com>
Date: Thu, 23 Jan 2025 15:16:06 +0000
Subject: [PATCH 02/13] chore(insights): update .gitignore to include
 .env*.development files

---
 apps/insights/.gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/insights/.gitignore b/apps/insights/.gitignore
index 9d2ee2a739..e6fc78b8ba 100644
--- a/apps/insights/.gitignore
+++ b/apps/insights/.gitignore
@@ -1 +1,2 @@
 .env*.local
+.env*.development
\ No newline at end of file

From e938faeb63a085d060cdbe570a0080ab74396e6e Mon Sep 17 00:00:00 2001
From: PartyParrotGreg <2233348+partyparrotgreg@users.noreply.github.com>
Date: Thu, 23 Jan 2025 16:41:37 +0000
Subject: [PATCH 03/13] chore(insights): improve footer and drawer styles for
 better responsiveness and layout adjustments in component library

---
 .../src/components/Root/footer.module.scss    |  39 +--
 .../src/Drawer/index.module.scss              |  62 ++--
 .../src/MainNavTabs/index.module.scss         |  36 +-
 packages/component-library/src/theme.scss     | 330 +++++++-----------
 4 files changed, 176 insertions(+), 291 deletions(-)

diff --git a/apps/insights/src/components/Root/footer.module.scss b/apps/insights/src/components/Root/footer.module.scss
index 979a0c2565..fcedc0bfa5 100644
--- a/apps/insights/src/components/Root/footer.module.scss
+++ b/apps/insights/src/components/Root/footer.module.scss
@@ -2,39 +2,27 @@
 
 .footer {
   // SM
+  margin-top: theme.spacing(8);
+  padding-top: theme.spacing(8);
+  padding-bottom: theme.spacing(20);
   background: theme.color("background", "primary");
 
-  // XL
-  padding: theme.spacing(8) 0;
-
-  @include theme.mobile {
-    padding-bottom: theme.spacing(20);
-  }
-
   // bg-beige-100 sm:border-t sm:border-stone-300
 
   .topContent {
     display: flex;
     gap: theme.spacing(6);
-
-    // SM
-    flex-flow: row nowrap;
-    align-items: center;
+    flex-flow: column nowrap;
+    align-items: flex-start;
     justify-content: space-between;
 
-    @media screen and (max-width: theme.breakpoint("sm")) {
-      flex-flow: column nowrap;
-      align-items: flex-start;
-    }
-
     @include theme.max-width;
-
-    // XL
     margin-bottom: theme.spacing(6);
 
-    // py-6
-
-    // flex-col
+    @include theme.breakpoint("sm") {
+      flex-flow: row nowrap;
+      align-items: center;
+    }
 
     .left {
       display: flex;
@@ -95,10 +83,11 @@
   .bottomContent {
     display: flex;
     gap: theme.spacing(6);
-
-    // SM
-    flex-flow: row nowrap;
-    justify-content: space-between;
+    flex-flow: column;
+    @include theme.breakpoint("sm") {
+      flex-flow: row nowrap;
+      justify-content: space-between;
+    }
 
     // "flex-col
 
diff --git a/packages/component-library/src/Drawer/index.module.scss b/packages/component-library/src/Drawer/index.module.scss
index 1b3e7cab62..bc3fd65f19 100644
--- a/packages/component-library/src/Drawer/index.module.scss
+++ b/packages/component-library/src/Drawer/index.module.scss
@@ -7,38 +7,34 @@
   z-index: 1;
 
   .drawer {
-    position: fixed;
-    top: theme.spacing(4);
-    bottom: theme.spacing(4);
-    right: theme.spacing(4);
-    width: 60%;
-    max-width: theme.spacing(160);
-    outline: none;
+    width: 100%;
+    border-radius: 0;
+    border: none;
+    padding-bottom: 0;
     background: theme.color("background", "primary");
-    border: 1px solid theme.color("border");
-    border-radius: theme.border-radius("3xl");
-    display: flex;
-    flex-flow: column nowrap;
-    overflow-y: hidden;
-    padding-bottom: theme.border-radius("3xl");
 
-    @include theme.mobile {
-      width: 100%;
-      inset: 0;
-      border-radius: 0;
-      border: none;
-      padding-bottom: 0;
-
-      // Remove if we don't want a gap on the top
-      // Will require to change the animation direction
-      // top: 5rem;
-      // border-top-left-radius: theme.border-radius("2xl");
-      // border-top-right-radius: theme.border-radius("2xl");
+    @include theme.breakpoint("sm") {
+      position: fixed;
+      top: theme.spacing(4);
+      bottom: theme.spacing(4);
+      right: theme.spacing(4);
+      width: 80%;
+      max-width: theme.spacing(160);
+      outline: none;
+      border: 1px solid theme.color("border");
+      border-radius: theme.border-radius("3xl");
+      display: flex;
+      flex-flow: column nowrap;
+      overflow-y: hidden;
+      padding-bottom: theme.border-radius("3xl");
+    }
+    @include theme.breakpoint("lg") {
+      width: 60%;
     }
 
     .heading {
-      padding: theme.spacing(4);
-      padding-left: theme.spacing(6);
+      padding: theme.spacing(3);
+      padding-left: theme.spacing(4);
       display: flex;
       flex-flow: row nowrap;
       justify-content: space-between;
@@ -47,9 +43,9 @@
       flex: none;
       border-bottom: 1px solid theme.color("border");
 
-      @include theme.mobile {
-        padding: theme.spacing(3);
-        padding-left: theme.spacing(4);
+      @include theme.breakpoint("sm") {
+        padding: theme.spacing(4);
+        padding-left: theme.spacing(6);
       }
 
       .title {
@@ -71,10 +67,10 @@
     .body {
       flex: 1;
       overflow: hidden auto;
-      padding: theme.spacing(6);
+      padding: theme.spacing(4);
 
-      @include theme.mobile {
-        padding: theme.spacing(4);
+      @include theme.breakpoint("sm") {
+        padding: theme.spacing(6);
       }
     }
 
diff --git a/packages/component-library/src/MainNavTabs/index.module.scss b/packages/component-library/src/MainNavTabs/index.module.scss
index 121a7afa7c..7941540539 100644
--- a/packages/component-library/src/MainNavTabs/index.module.scss
+++ b/packages/component-library/src/MainNavTabs/index.module.scss
@@ -1,34 +1,14 @@
 @use "../theme";
 
 .mainNavTabs {
+  isolation: isolate;
   gap: theme.spacing(2);
-
   @include theme.row;
 
-  @include theme.mobile {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 900;
-    padding: 0.5rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    height: 3rem;
-    border-top: 1px solid theme.color("border");
-    background: theme.color("background", "primary");
-  }
-
   .tab {
     position: relative;
     outline: none;
 
-    @include theme.mobile {
-      flex-grow: 1;
-      text-align: center;
-    }
-
     .bubble {
       position: absolute;
       inset: 0;
@@ -59,21 +39,11 @@
         pointer-events: auto;
 
         &[data-hovered] .bubble {
-          background-color: theme.color(
-            "button",
-            "solid",
-            "background",
-            "hover"
-          );
+          background-color: theme.color("button", "solid", "background", "hover");
         }
 
         &[data-pressed] .bubble {
-          background-color: theme.color(
-            "button",
-            "solid",
-            "background",
-            "active"
-          );
+          background-color: theme.color("button", "solid", "background", "active");
         }
       }
     }
diff --git a/packages/component-library/src/theme.scss b/packages/component-library/src/theme.scss
index 0f7d09eb18..91735cd2f7 100644
--- a/packages/component-library/src/theme.scss
+++ b/packages/component-library/src/theme.scss
@@ -23,7 +23,7 @@ $font-weight: (
   "semibold": 600,
   "bold": 700,
   "extrabold": 800,
-  "black": 900,
+  "black": 900
 );
 
 @function font-weight($weight) {
@@ -44,7 +44,7 @@ $font-size: (
   "6xl": 3.75rem,
   "7xl": 4.5rem,
   "8xl": 6rem,
-  "9xl": 8rem,
+  "9xl": 8rem
 );
 
 @function font-size($size: "base") {
@@ -57,7 +57,7 @@ $letter-spacing: (
   "normal": 0em,
   "wide": 0.025em,
   "wider": 0.05em,
-  "widest": 0.1em,
+  "widest": 0.1em
 );
 
 @function letter-spacing($spacing: "normal") {
@@ -73,42 +73,53 @@ $border-radius: (
   "xl": 0.75rem,
   "2xl": 1rem,
   "3xl": 1.5rem,
-  "full": 9999px,
+  "full": 9999px
 );
 
 @function border-radius($radius: "base") {
   @return map-get-strict($border-radius, $radius);
 }
 
-$brakpoints: (
+$breakpoints: (
   "xs": 480px,
   "sm": 720px,
   "md": 960px,
   "lg": 1024px,
   "xl": 1280px,
   "2xl": 1536px,
-  "3xl": 1720px,
+  "3xl": 1720px
 );
 
-@function breakpoint($breakpoint) {
-  @return map-get-strict($brakpoints, $breakpoint);
+@function breakpoint-old($breakpoint) {
+  @return map-get-strict($breakpoints, $breakpoint);
+}
+
+@mixin breakpoint($point) {
+  @media (min-width: map-get-strict($breakpoints, $point)) {
+    @content;
+    background: lime;
+    outline: 1px solid purple;
+  }
 }
 
 @mixin mobile() {
-  @media screen and (max-width: breakpoint("md")) {
+  @media screen and (max-width: breakpoint-old("md")) {
     @content;
+    background: cyan;
   }
 }
 
 @mixin tablet() {
-  @media screen and (min-width: breakpoint("md")) {
+  @media screen and (min-width: breakpoint-old("md")) {
     @content;
+    background: orange;
   }
 }
 
 @mixin desktop() {
-  @media screen and (min-width: breakpoint("3xl")) {
+  @media screen and (min-width: breakpoint-old("3xl")) {
     @content;
+    background: pink;
   }
 }
 
@@ -126,7 +137,7 @@ $color-pallette: (
     700: #334155,
     800: #1e293b,
     900: #0f172a,
-    950: #020617,
+    950: #020617
   ),
   "gray": (
     50: #f9fafb,
@@ -139,7 +150,7 @@ $color-pallette: (
     700: #374151,
     800: #1f2937,
     900: #111827,
-    950: #030712,
+    950: #030712
   ),
   "zinc": (
     50: #fafafa,
@@ -152,7 +163,7 @@ $color-pallette: (
     700: #3f3f46,
     800: #27272a,
     900: #18181b,
-    950: #09090b,
+    950: #09090b
   ),
   "neutral": (
     50: #fafafa,
@@ -165,7 +176,7 @@ $color-pallette: (
     700: #404040,
     800: #262626,
     900: #171717,
-    950: #0a0a0a,
+    950: #0a0a0a
   ),
   "stone": (
     50: #fafaf9,
@@ -178,7 +189,7 @@ $color-pallette: (
     700: #44403c,
     800: #292524,
     900: #1c1917,
-    950: #0c0a09,
+    950: #0c0a09
   ),
   "red": (
     50: #fef2f2,
@@ -191,7 +202,7 @@ $color-pallette: (
     700: #b91c1c,
     800: #991b1b,
     900: #7f1d1d,
-    950: #450a0a,
+    950: #450a0a
   ),
   "orange": (
     50: #fff7ed,
@@ -204,7 +215,7 @@ $color-pallette: (
     700: #c2410c,
     800: #9a3412,
     900: #7c2d12,
-    950: #431407,
+    950: #431407
   ),
   "amber": (
     50: #fffbeb,
@@ -217,7 +228,7 @@ $color-pallette: (
     700: #b45309,
     800: #92400e,
     900: #78350f,
-    950: #451a03,
+    950: #451a03
   ),
   "yellow": (
     50: #fefce8,
@@ -230,7 +241,7 @@ $color-pallette: (
     700: #a16207,
     800: #854d0e,
     900: #713f12,
-    950: #422006,
+    950: #422006
   ),
   "lime": (
     50: #f7fee7,
@@ -243,7 +254,7 @@ $color-pallette: (
     700: #4d7c0f,
     800: #3f6212,
     900: #365314,
-    950: #1a2e05,
+    950: #1a2e05
   ),
   "green": (
     50: #f0fdf4,
@@ -256,7 +267,7 @@ $color-pallette: (
     700: #15803d,
     800: #166534,
     900: #14532d,
-    950: #052e16,
+    950: #052e16
   ),
   "emerald": (
     50: #ecfdf5,
@@ -269,7 +280,7 @@ $color-pallette: (
     700: #047857,
     800: #065f46,
     900: #064e3b,
-    950: #022c22,
+    950: #022c22
   ),
   "teal": (
     50: #f0fdfa,
@@ -282,7 +293,7 @@ $color-pallette: (
     700: #0f766e,
     800: #115e59,
     900: #134e4a,
-    950: #042f2e,
+    950: #042f2e
   ),
   "cyan": (
     50: #ecfeff,
@@ -295,7 +306,7 @@ $color-pallette: (
     700: #0e7490,
     800: #155e75,
     900: #164e63,
-    950: #083344,
+    950: #083344
   ),
   "sky": (
     50: #f0f9ff,
@@ -308,7 +319,7 @@ $color-pallette: (
     700: #0369a1,
     800: #075985,
     900: #0c4a6e,
-    950: #082f49,
+    950: #082f49
   ),
   "blue": (
     50: #eff6ff,
@@ -321,7 +332,7 @@ $color-pallette: (
     700: #1d4ed8,
     800: #1e40af,
     900: #1e3a8a,
-    950: #172554,
+    950: #172554
   ),
   "indigo": (
     50: #eef2ff,
@@ -334,7 +345,7 @@ $color-pallette: (
     700: #4338ca,
     800: #3730a3,
     900: #312e81,
-    950: #1e1b4b,
+    950: #1e1b4b
   ),
   "violet": (
     50: #f5f3ff,
@@ -347,7 +358,7 @@ $color-pallette: (
     700: #6d28d9,
     800: #5b21b6,
     900: #4c1d95,
-    950: #2e1065,
+    950: #2e1065
   ),
   "purple": (
     50: #faf5ff,
@@ -360,7 +371,7 @@ $color-pallette: (
     700: #7e22ce,
     800: #6b21a8,
     900: #581c87,
-    950: #3b0764,
+    950: #3b0764
   ),
   "fuchsia": (
     50: #fdf4ff,
@@ -373,7 +384,7 @@ $color-pallette: (
     700: #a21caf,
     800: #86198f,
     900: #701a75,
-    950: #4a044e,
+    950: #4a044e
   ),
   "pink": (
     50: #fdf2f8,
@@ -386,7 +397,7 @@ $color-pallette: (
     700: #be185d,
     800: #9d174d,
     900: #831843,
-    950: #500724,
+    950: #500724
   ),
   "rose": (
     50: #fff1f2,
@@ -399,7 +410,7 @@ $color-pallette: (
     700: #be123c,
     800: #9f1239,
     900: #881337,
-    950: #4c0519,
+    950: #4c0519
   ),
   "beige": (
     50: #f7f4f4,
@@ -412,7 +423,7 @@ $color-pallette: (
     700: #795c5c,
     800: #664e4e,
     900: #574545,
-    950: #2d2222,
+    950: #2d2222
   ),
   "steel": (
     50: #f8f9fc,
@@ -425,8 +436,8 @@ $color-pallette: (
     700: #333655,
     800: #25253e,
     900: #27253d,
-    950: #100e23,
-  ),
+    950: #100e23
+  )
 );
 
 @function pallette-color($color...) {
@@ -438,198 +449,123 @@ $color: (
   "background": (
     "primary": light-dark(pallette-color("white"), pallette-color("steel", 950)),
     "nav-blur":
-      light-dark(
-        rgb(from pallette-color("white") r g b / 70%),
-        rgb(from pallette-color("steel", 950) r g b / 70%)
-      ),
+      light-dark(rgb(from pallette-color("white") r g b / 70%), rgb(from pallette-color("steel", 950) r g b / 70%)),
     "modal": light-dark(pallette-color("white"), pallette-color("steel", 950)),
-    "secondary":
-      light-dark(pallette-color("beige", 100), pallette-color("steel", 900)),
-    "card-highlight":
-      light-dark(pallette-color("violet", 100), pallette-color("violet", 950)),
-    "card-secondary":
-      light-dark(pallette-color("white"), pallette-color("steel", 950)),
-  ),
-  "foreground":
-    light-dark(pallette-color("steel", 900), pallette-color("steel", 50)),
-  "heading":
-    light-dark(pallette-color("steel", 800), pallette-color("steel", 200)),
-  "paragraph":
-    light-dark(pallette-color("steel", 700), pallette-color("steel", 300)),
+    "secondary": light-dark(pallette-color("beige", 100), pallette-color("steel", 900)),
+    "card-highlight": light-dark(pallette-color("violet", 100), pallette-color("violet", 950)),
+    "card-secondary": light-dark(pallette-color("white"), pallette-color("steel", 950))
+  ),
+  "foreground": light-dark(pallette-color("steel", 900), pallette-color("steel", 50)),
+  "heading": light-dark(pallette-color("steel", 800), pallette-color("steel", 200)),
+  "paragraph": light-dark(pallette-color("steel", 700), pallette-color("steel", 300)),
   "link": (
-    "primary":
-      light-dark(pallette-color("violet", 700), pallette-color("purple", 300)),
-    "normal":
-      light-dark(pallette-color("steel", 800), pallette-color("steel", 50)),
-  ),
-  "highlight":
-    light-dark(pallette-color("violet", 600), pallette-color("violet", 500)),
-  "muted":
-    light-dark(pallette-color("stone", 700), pallette-color("steel", 300)),
-  "border":
-    light-dark(pallette-color("stone", 300), pallette-color("steel", 600)),
+    "primary": light-dark(pallette-color("violet", 700), pallette-color("purple", 300)),
+    "normal": light-dark(pallette-color("steel", 800), pallette-color("steel", 50))
+  ),
+  "highlight": light-dark(pallette-color("violet", 600), pallette-color("violet", 500)),
+  "muted": light-dark(pallette-color("stone", 700), pallette-color("steel", 300)),
+  "border": light-dark(pallette-color("stone", 300), pallette-color("steel", 600)),
   "selection": (
-    "background":
-      light-dark(pallette-color("violet", 600), pallette-color("violet", 400)),
-    "foreground":
-      light-dark(pallette-color("steel", 50), pallette-color("steel", 950)),
+    "background": light-dark(pallette-color("violet", 600), pallette-color("violet", 400)),
+    "foreground": light-dark(pallette-color("steel", 50), pallette-color("steel", 950))
   ),
   "states": (
     "success": (
-      "base":
-        light-dark(
-          pallette-color("emerald", 600),
-          pallette-color("emerald", 500)
-        ),
-      "background":
-        light-dark(
-          pallette-color("emerald", 100),
-          pallette-color("emerald", 950)
-        ),
-      "normal":
-        light-dark(
-          pallette-color("emerald", 600),
-          pallette-color("emerald", 500)
-        ),
+      "base": light-dark(pallette-color("emerald", 600), pallette-color("emerald", 500)),
+      "background": light-dark(pallette-color("emerald", 100), pallette-color("emerald", 950)),
+      "normal": light-dark(pallette-color("emerald", 600), pallette-color("emerald", 500)),
       "hover": pallette-color("emerald", 700),
       "active": pallette-color("emerald", 800),
-      "border":
-        light-dark(
-          pallette-color("emerald", 400),
-          pallette-color("emerald", 800)
-        ),
+      "border": light-dark(pallette-color("emerald", 400), pallette-color("emerald", 800))
     ),
     "error": (
       "base": light-dark(pallette-color("red", 600), pallette-color("red", 400)),
-      "color":
-        light-dark(pallette-color("red", 500), pallette-color("red", 400)),
-      "background":
-        light-dark(pallette-color("red", 100), pallette-color("red", 950)),
+      "color": light-dark(pallette-color("red", 500), pallette-color("red", 400)),
+      "background": light-dark(pallette-color("red", 100), pallette-color("red", 950)),
       "normal": pallette-color("red", 500),
       "hover": pallette-color("red", 600),
       "active": pallette-color("red", 700),
-      "border":
-        light-dark(pallette-color("red", 400), pallette-color("red", 900)),
+      "border": light-dark(pallette-color("red", 400), pallette-color("red", 900))
     ),
     "neutral": (
-      "normal":
-        light-dark(pallette-color("steel", 900), pallette-color("steel", 50)),
-      "border":
-        light-dark(pallette-color("stone", 300), pallette-color("steel", 600)),
-      "background":
-        light-dark(pallette-color("white"), pallette-color("steel", 900)),
+      "normal": light-dark(pallette-color("steel", 900), pallette-color("steel", 50)),
+      "border": light-dark(pallette-color("stone", 300), pallette-color("steel", 600)),
+      "background": light-dark(pallette-color("white"), pallette-color("steel", 900))
     ),
     "info": (
-      "background":
-        light-dark(pallette-color("indigo", 100), pallette-color("indigo", 950)),
+      "background": light-dark(pallette-color("indigo", 100), pallette-color("indigo", 950)),
       "background-opaque":
         light-dark(
           rgb(from pallette-color("indigo", 200) r g b / 80%),
           rgb(from pallette-color("indigo", 950) r g b / 80%)
         ),
-      "icon":
-        light-dark(pallette-color("indigo", 600), pallette-color("indigo", 500)),
-      "normal":
-        light-dark(pallette-color("indigo", 600), pallette-color("indigo", 400)),
-      "border":
-        light-dark(pallette-color("indigo", 400), pallette-color("indigo", 800)),
+      "icon": light-dark(pallette-color("indigo", 600), pallette-color("indigo", 500)),
+      "normal": light-dark(pallette-color("indigo", 600), pallette-color("indigo", 400)),
+      "border": light-dark(pallette-color("indigo", 400), pallette-color("indigo", 800))
     ),
     "warning": (
-      "normal":
-        light-dark(pallette-color("orange", 600), pallette-color("orange", 400)),
-      "background":
-        light-dark(pallette-color("orange", 100), pallette-color("orange", 950)),
-      "border":
-        light-dark(pallette-color("orange", 400), pallette-color("orange", 700)),
+      "normal": light-dark(pallette-color("orange", 600), pallette-color("orange", 400)),
+      "background": light-dark(pallette-color("orange", 100), pallette-color("orange", 950)),
+      "border": light-dark(pallette-color("orange", 400), pallette-color("orange", 700))
     ),
     "yellow": (
       "normal": pallette-color("yellow", 500),
-      "background":
-        light-dark(pallette-color("yellow", 100), pallette-color("yellow", 900)),
+      "background": light-dark(pallette-color("yellow", 100), pallette-color("yellow", 900))
     ),
     "lime": (
       "normal": pallette-color("lime", 500),
-      "background":
-        light-dark(pallette-color("lime", 100), pallette-color("lime", 900)),
+      "background": light-dark(pallette-color("lime", 100), pallette-color("lime", 900))
     ),
     "data": (
-      "normal":
-        light-dark(pallette-color("violet", 600), pallette-color("violet", 400)),
-      "background":
-        light-dark(pallette-color("violet", 100), pallette-color("violet", 950)),
-      "border":
-        light-dark(pallette-color("violet", 200), pallette-color("violet", 800)),
-    ),
+      "normal": light-dark(pallette-color("violet", 600), pallette-color("violet", 400)),
+      "background": light-dark(pallette-color("violet", 100), pallette-color("violet", 950)),
+      "border": light-dark(pallette-color("violet", 200), pallette-color("violet", 800))
+    )
   ),
-  "focus":
-    light-dark(pallette-color("violet", 700), pallette-color("violet", 500)),
+  "focus": light-dark(pallette-color("violet", 700), pallette-color("violet", 500)),
   "focus-dim":
-    light-dark(
-      rgb(from pallette-color("violet", 700) r g b / 30%),
-      rgb(from pallette-color("violet", 500) r g b / 30%)
-    ),
+    light-dark(rgb(from pallette-color("violet", 700) r g b / 30%), rgb(from pallette-color("violet", 500) r g b / 30%)),
   "forms": (
     "input": (
       "hover": (
-        "border":
-          light-dark(pallette-color("stone", 400), pallette-color("steel", 500)),
-      ),
-    ),
+        "border": light-dark(pallette-color("stone", 400), pallette-color("steel", 500))
+      )
+    )
   ),
   "chart": (
     "series": (
-      "primary":
-        light-dark(pallette-color("violet", 500), pallette-color("violet", 400)),
-      "neutral":
-        light-dark(pallette-color("stone", 500), pallette-color("steel", 300)),
-    ),
+      "primary": light-dark(pallette-color("violet", 500), pallette-color("violet", 400)),
+      "neutral": light-dark(pallette-color("stone", 500), pallette-color("steel", 300))
+    )
   ),
   "button": (
     "primary": (
       "foreground": pallette-color("white"),
       "background": (
-        "normal":
-          light-dark(
-            pallette-color("violet", 700),
-            pallette-color("violet", 600)
-          ),
-        "hover":
-          light-dark(
-            pallette-color("violet", 800),
-            pallette-color("violet", 700)
-          ),
-        "active":
-          light-dark(
-            pallette-color("violet", 900),
-            pallette-color("violet", 800)
-          ),
-      ),
+        "normal": light-dark(pallette-color("violet", 700), pallette-color("violet", 600)),
+        "hover": light-dark(pallette-color("violet", 800), pallette-color("violet", 700)),
+        "active": light-dark(pallette-color("violet", 900), pallette-color("violet", 800))
+      )
     ),
     "secondary": (
       "foreground": pallette-color("steel", 900),
       "background": (
         "normal": pallette-color("purple", 200),
         "hover": pallette-color("purple", 300),
-        "active": pallette-color("purple", 400),
-      ),
+        "active": pallette-color("purple", 400)
+      )
     ),
     "solid": (
-      "foreground":
-        light-dark(pallette-color("steel", 50), pallette-color("steel", 900)),
+      "foreground": light-dark(pallette-color("steel", 50), pallette-color("steel", 900)),
       "background": (
-        "normal":
-          light-dark(pallette-color("steel", 900), pallette-color("steel", 50)),
-        "hover":
-          light-dark(pallette-color("steel", 600), pallette-color("steel", 200)),
-        "active":
-          light-dark(pallette-color("steel", 900), pallette-color("steel", 50)),
-      ),
+        "normal": light-dark(pallette-color("steel", 900), pallette-color("steel", 50)),
+        "hover": light-dark(pallette-color("steel", 600), pallette-color("steel", 200)),
+        "active": light-dark(pallette-color("steel", 900), pallette-color("steel", 50))
+      )
     ),
     "outline": (
-      "border":
-        light-dark(pallette-color("stone", 300), pallette-color("steel", 600)),
-      "foreground":
-        light-dark(pallette-color("stone", 900), pallette-color("steel", 50)),
+      "border": light-dark(pallette-color("stone", 300), pallette-color("steel", 600)),
+      "foreground": light-dark(pallette-color("stone", 900), pallette-color("steel", 50)),
       "background": (
         "hover":
           light-dark(
@@ -640,16 +576,14 @@ $color: (
           light-dark(
             rgb(from pallette-color("beige", 950) r g b / 10%),
             rgb(from pallette-color("steel", 50) r g b / 10%)
-          ),
-      ),
+          )
+      )
     ),
     "disabled": (
-      "foreground":
-        light-dark(pallette-color("stone", 400), pallette-color("steel", 400)),
-      "background":
-        light-dark(pallette-color("stone", 200), pallette-color("steel", 600)),
-    ),
-  ),
+      "foreground": light-dark(pallette-color("stone", 400), pallette-color("steel", 400)),
+      "background": light-dark(pallette-color("stone", 200), pallette-color("steel", 600))
+    )
+  )
 );
 
 @function color($color-path...) {
@@ -663,7 +597,7 @@ $button-sizes: (
     "border-radius": border-radius("md"),
     "font-size": font-size("xxs"),
     "icon-size": spacing(4),
-    "gap": spacing(1),
+    "gap": spacing(1)
   ),
   "sm": (
     "padding": spacing(2),
@@ -671,7 +605,7 @@ $button-sizes: (
     "border-radius": border-radius("lg"),
     "font-size": font-size("sm"),
     "icon-size": spacing(5),
-    "gap": spacing(2),
+    "gap": spacing(2)
   ),
   "md": (
     "padding": spacing(3),
@@ -679,7 +613,7 @@ $button-sizes: (
     "border-radius": border-radius("xl"),
     "font-size": font-size("base"),
     "icon-size": spacing(6),
-    "gap": spacing(2),
+    "gap": spacing(2)
   ),
   "lg": (
     "padding": spacing(4),
@@ -687,8 +621,8 @@ $button-sizes: (
     "border-radius": border-radius("2xl"),
     "font-size": font-size("xl"),
     "icon-size": spacing(6),
-    "gap": spacing(3),
-  ),
+    "gap": spacing(3)
+  )
 );
 
 @function button-padding($size, $include-gap) {
@@ -756,11 +690,11 @@ $max-width: 96rem;
 @mixin max-width {
   margin: 0 auto;
   max-width: $max-width;
-  padding: 0 spacing(6);
+  padding: 0 spacing(4);
   box-sizing: content-box;
 
-  @include mobile {
-    padding: 0 spacing(4);
+  @include breakpoint("xl") {
+    padding: 0 spacing(6);
   }
 }
 
@@ -777,25 +711,21 @@ $elevations: (
       0px 42px 17px 0px rgb(112 66 206 / 3%),
       0px 24px 14px 0px rgb(112 66 206 / 8%),
       0px 11px 11px 0px rgb(112 66 206 / 14%),
-      0px 3px 6px 0px rgb(112 66 206 / 17%),
-    ),
+      0px 3px 6px 0px rgb(112 66 206 / 17%)
+    )
   ),
   default: (
     1: (
       0px 4px 6px -4px rgb(from black r g b / 10%),
-      0px 10px 15px -3px rgb(from black r g b / 10%),
+      0px 10px 15px -3px rgb(from black r g b / 10%)
     ),
     2: (
-      0px 29px 12px 0px
-        light-dark(rgb(from #564848 r g b / 2%), rgb(from black r g b / 8%)),
-      0px 16px 10px 0px
-        light-dark(rgb(from #564848 r g b / 6%), rgb(from black r g b / 12%)),
-      0px 7px 7px 0px
-        light-dark(rgb(from #564848 r g b / 12%), rgb(from black r g b / 20%)),
-      0px 2px 4px 0px
-        light-dark(rgb(from #564848 r g b / 14%), rgb(from black r g b / 30%)),
-    ),
-  ),
+      0px 29px 12px 0px light-dark(rgb(from #564848 r g b / 2%), rgb(from black r g b / 8%)),
+      0px 16px 10px 0px light-dark(rgb(from #564848 r g b / 6%), rgb(from black r g b / 12%)),
+      0px 7px 7px 0px light-dark(rgb(from #564848 r g b / 12%), rgb(from black r g b / 20%)),
+      0px 2px 4px 0px light-dark(rgb(from #564848 r g b / 14%), rgb(from black r g b / 30%))
+    )
+  )
 );
 
 @mixin elevation($elevation...) {

From 8b3765324f59d16ea4d4a1dc293f1e02d2232332 Mon Sep 17 00:00:00 2001
From: PartyParrotGreg <2233348+partyparrotgreg@users.noreply.github.com>
Date: Thu, 23 Jan 2025 16:45:28 +0000
Subject: [PATCH 04/13] chore(insights): refine header styles for better layout
 and responsiveness across breakpoints in the insights component

---
 .../src/components/Root/header.module.scss    | 42 ++++++-------------
 apps/insights/src/components/Root/header.tsx  |  8 ++--
 2 files changed, 18 insertions(+), 32 deletions(-)

diff --git a/apps/insights/src/components/Root/header.module.scss b/apps/insights/src/components/Root/header.module.scss
index 6309d5ebde..60f42bcfb1 100644
--- a/apps/insights/src/components/Root/header.module.scss
+++ b/apps/insights/src/components/Root/header.module.scss
@@ -27,8 +27,8 @@
       .logoLink {
         padding: theme.spacing(3);
         color: theme.color("foreground");
-
-        @include theme.desktop {
+        position: relative;
+        @include theme.breakpoint("3xl") {
           position: absolute;
           left: -#{theme.spacing(16)};
         }
@@ -66,43 +66,27 @@
       @include theme.row;
 
       .themeSwitch {
-        position: relative;
+        display: none;
 
-        @include theme.mobile {
-          display: none;
+        @include theme.breakpoint("md") {
+          position: relative;
+          display: block;
         }
 
-        @include theme.desktop {
+        @include theme.breakpoint("3xl") {
           display: block;
           position: absolute;
           right: -#{theme.spacing(16)};
         }
       }
     }
-
-    // Reason: you can absolute position relatively to a container and disable this behavior on mobile
-    // @media screen and (min-width: #{theme.$max-width + (2 * (theme.spacing(9) + theme.spacing(8) + theme.spacing(7)))}) {
-    //   .leftMenu {
-    //     margin-left: -#{theme.spacing(9) + theme.spacing(7)};
-
-    //     .logoLink {
-    //       margin-right: -#{theme.spacing(2)};
-    //     }
-    //   }
-
-    //   .rightMenu {
-    //     margin-right: -#{theme.spacing(9) + theme.spacing(7)};
-
-    //     .themeSwitch {
-    //       margin-left: theme.spacing(5);
-    //     }
-    //   }
-    // }
   }
-}
-
-.hideOnMobile {
-  @include theme.mobile {
+  .desktopNavigation,
+  .desktopSupport,
+  .desktopDocs {
     display: none;
+    @include theme.breakpoint("md") {
+      display: block;
+    }
   }
 }
diff --git a/apps/insights/src/components/Root/header.tsx b/apps/insights/src/components/Root/header.tsx
index c10a9c7fd5..e7baebaa7d 100644
--- a/apps/insights/src/components/Root/header.tsx
+++ b/apps/insights/src/components/Root/header.tsx
@@ -25,10 +25,12 @@ export const Header = ({ className, ...props }: ComponentProps<"header">) => (
           <div className={styles.logoLabel}>Pyth Homepage</div>
         </Link>
         <div className={styles.appName}>Insights</div>
-        <MainNavTabs />
+        <div className={styles.desktopNavigation}>
+          <MainNavTabs />
+        </div>
       </div>
       <div className={styles.rightMenu}>
-        <div className={styles.hideOnMobile}>
+        <div className={styles.desktopSupport}>
           <SupportDrawer>
             <Button beforeIcon={Lifebuoy} variant="ghost" size="sm" rounded>
               Support
@@ -36,7 +38,7 @@ export const Header = ({ className, ...props }: ComponentProps<"header">) => (
           </SupportDrawer>
         </div>
         <SearchButton />
-        <div className={styles.hideOnMobile}>
+        <div className={styles.desktopDocs}>
           <Button
             href="https://docs.pyth.network"
             size="sm"

From 9ded02d2b7b2749541971a343505cf6028c9fece Mon Sep 17 00:00:00 2001
From: PartyParrotGreg <2233348+partyparrotgreg@users.noreply.github.com>
Date: Thu, 23 Jan 2025 17:06:26 +0000
Subject: [PATCH 05/13] chore(insights): implement new mobile menu and
 navigation components for improved user experience and layout in insights
 section

---
 .../MobileMenu/mobile-menu.module.scss        |  6 +-
 .../src/components/MobileMenu/mobile-menu.tsx | 32 ++++++++
 .../components/MobileMenu/mobile-menu.v2.tsx  | 75 -------------------
 .../mobile-navigation.module.scss             | 11 +++
 .../MobileNavigation/mobile-navigation.tsx    |  9 +++
 .../src/components/Root/footer.module.scss    |  9 +--
 apps/insights/src/components/Root/header.tsx  |  2 +-
 apps/insights/src/components/Root/index.tsx   |  2 +
 .../src/MainNavTabs/index.module.scss         |  4 +
 packages/component-library/src/theme.scss     |  2 -
 10 files changed, 63 insertions(+), 89 deletions(-)
 create mode 100644 apps/insights/src/components/MobileMenu/mobile-menu.tsx
 delete mode 100644 apps/insights/src/components/MobileMenu/mobile-menu.v2.tsx
 create mode 100644 apps/insights/src/components/MobileNavigation/mobile-navigation.module.scss
 create mode 100644 apps/insights/src/components/MobileNavigation/mobile-navigation.tsx

diff --git a/apps/insights/src/components/MobileMenu/mobile-menu.module.scss b/apps/insights/src/components/MobileMenu/mobile-menu.module.scss
index 668e96c1f2..ae47132655 100644
--- a/apps/insights/src/components/MobileMenu/mobile-menu.module.scss
+++ b/apps/insights/src/components/MobileMenu/mobile-menu.module.scss
@@ -1,10 +1,10 @@
 @use "@pythnetwork/component-library/theme";
 
 .mobileMenuTrigger {
-  display: none;
+  display: block;
 
-  @include theme.mobile {
-    display: block;
+  @include theme.breakpoint("md") {
+    display: none;
   }
 }
 
diff --git a/apps/insights/src/components/MobileMenu/mobile-menu.tsx b/apps/insights/src/components/MobileMenu/mobile-menu.tsx
new file mode 100644
index 0000000000..d36c85a122
--- /dev/null
+++ b/apps/insights/src/components/MobileMenu/mobile-menu.tsx
@@ -0,0 +1,32 @@
+"use client";
+import { List } from "@phosphor-icons/react/dist/ssr/List";
+import { Button } from "@pythnetwork/component-library/Button";
+import clsx from "clsx";
+import { useState, type ComponentProps } from "react";
+
+import styles from "./mobile-menu.module.scss";
+
+export const MobileMenu = ({
+  className,
+  ...props
+}: ComponentProps<"div">) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleMenu = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <div className={clsx(styles.mobileMenuTrigger, className)} {...props}>
+      <Button
+        variant="ghost"
+        size="sm"
+        afterIcon={List}
+        rounded
+        onPress={toggleMenu}
+      >
+        Menu
+      </Button>
+    </div>
+  );
+};
diff --git a/apps/insights/src/components/MobileMenu/mobile-menu.v2.tsx b/apps/insights/src/components/MobileMenu/mobile-menu.v2.tsx
deleted file mode 100644
index d6c5048944..0000000000
--- a/apps/insights/src/components/MobileMenu/mobile-menu.v2.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-"use client";
-import { Lifebuoy } from "@phosphor-icons/react/dist/ssr/Lifebuoy";
-import { List } from "@phosphor-icons/react/dist/ssr/List";
-import { X } from "@phosphor-icons/react/dist/ssr/X";
-import { Button } from "@pythnetwork/component-library/Button";
-import clsx from "clsx";
-import { useTheme } from "next-themes";
-import { useState } from "react";
-
-import styles from "./mobile-menu.module.scss";
-import { SupportDrawer } from "../Root/support-drawer";
-import { ThemeSwitch } from "../Root/theme-switch";
-
-export const MobileMenu = ({
-  className,
-  ...props
-}: {
-  className?: string | string[];
-}) => {
-  const { theme } = useTheme();
-  const [isOpen, setIsOpen] = useState(false);
-
-  const toggleMenu = () => {
-    setIsOpen(!isOpen);
-  };
-
-  return (
-    <div className={clsx(styles.mobileMenuTrigger, className)} {...props}>
-      <Button
-        variant="ghost"
-        size="sm"
-        afterIcon={List}
-        rounded
-        onPress={toggleMenu}
-      >
-        Menu
-      </Button>
-      {isOpen && (
-        <div className={styles.mobileMenuOverlay}>
-          <div className={styles.mobileMenuContainer}>
-            <div className={styles.mobileMenuHandle} />
-            <Button
-              href="https://docs.pyth.network"
-              size="md"
-              rounded
-              target="_blank"
-            >
-              Dev Docs
-            </Button>
-            <SupportDrawer>
-              <Button beforeIcon={Lifebuoy} variant="ghost" size="md" rounded>
-                Support
-              </Button>
-            </SupportDrawer>
-            <div className={styles.mobileThemeSwitcher}>
-              <div>Theme</div>
-              <div className={styles.mobileThemeSwitcherFeedback}>
-                <div>{theme}</div>
-                <ThemeSwitch />
-              </div>
-            </div>
-            <Button
-              variant="outline"
-              afterIcon={X}
-              rounded
-              onPress={toggleMenu}
-            >
-              Close
-            </Button>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
diff --git a/apps/insights/src/components/MobileNavigation/mobile-navigation.module.scss b/apps/insights/src/components/MobileNavigation/mobile-navigation.module.scss
new file mode 100644
index 0000000000..6710b50b8c
--- /dev/null
+++ b/apps/insights/src/components/MobileNavigation/mobile-navigation.module.scss
@@ -0,0 +1,11 @@
+@use "@pythnetwork/component-library/theme";
+
+.mobileNavigation {
+    display: block;
+    padding: theme.spacing(2);
+    background: theme.color("background", "primary");
+    border-top: 1px solid theme.color("background", "secondary");
+    @include theme.breakpoint("md") {
+        display: none;
+    }
+}
diff --git a/apps/insights/src/components/MobileNavigation/mobile-navigation.tsx b/apps/insights/src/components/MobileNavigation/mobile-navigation.tsx
new file mode 100644
index 0000000000..ebaa4915cb
--- /dev/null
+++ b/apps/insights/src/components/MobileNavigation/mobile-navigation.tsx
@@ -0,0 +1,9 @@
+import styles from "./mobile-navigation.module.scss"
+import { MainNavTabs } from "../Root/tabs"
+export const MobileNavigation = () => {
+    return (
+        <div className={styles.mobileNavigation}>
+            <MainNavTabs />
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/apps/insights/src/components/Root/footer.module.scss b/apps/insights/src/components/Root/footer.module.scss
index fcedc0bfa5..e0164772b1 100644
--- a/apps/insights/src/components/Root/footer.module.scss
+++ b/apps/insights/src/components/Root/footer.module.scss
@@ -3,12 +3,9 @@
 .footer {
   // SM
   margin-top: theme.spacing(8);
-  padding-top: theme.spacing(8);
-  padding-bottom: theme.spacing(20);
+  padding: theme.spacing(8) 0;
   background: theme.color("background", "primary");
 
-  // bg-beige-100 sm:border-t sm:border-stone-300
-
   .topContent {
     display: flex;
     gap: theme.spacing(6);
@@ -28,12 +25,8 @@
       display: flex;
       align-items: stretch;
       justify-content: space-between;
-
-      // SM
       gap: theme.spacing(6);
 
-      // gap-8
-
       .logoLink {
         height: theme.spacing(5);
         box-sizing: content-box;
diff --git a/apps/insights/src/components/Root/header.tsx b/apps/insights/src/components/Root/header.tsx
index e7baebaa7d..d1f54e6294 100644
--- a/apps/insights/src/components/Root/header.tsx
+++ b/apps/insights/src/components/Root/header.tsx
@@ -12,7 +12,7 @@ import { SearchButton } from "./search-button";
 import { SupportDrawer } from "./support-drawer";
 import { MainNavTabs } from "./tabs";
 import { ThemeSwitch } from "./theme-switch";
-import { MobileMenu } from "../MobileMenu/mobile-menu.v2";
+import { MobileMenu } from "../MobileMenu/mobile-menu";
 
 export const Header = ({ className, ...props }: ComponentProps<"header">) => (
   <header className={clsx(styles.header, className)} {...props}>
diff --git a/apps/insights/src/components/Root/index.tsx b/apps/insights/src/components/Root/index.tsx
index e3fb96107d..b2fd1e2a88 100644
--- a/apps/insights/src/components/Root/index.tsx
+++ b/apps/insights/src/components/Root/index.tsx
@@ -18,6 +18,7 @@ import { toHex } from "../../hex";
 import { getPublishers } from "../../services/clickhouse";
 import { Cluster, getData } from "../../services/pyth";
 import { LivePricesProvider } from "../LivePrices";
+import { MobileNavigation } from "../MobileNavigation/mobile-navigation";
 import { PriceFeedIcon } from "../PriceFeedIcon";
 import { PublisherIcon } from "../PublisherIcon";
 
@@ -65,6 +66,7 @@ export const Root = async ({ children }: Props) => {
             <TabPanel>{children}</TabPanel>
           </main>
           <Footer />
+          <MobileNavigation />
         </TabRoot>
       </SearchDialogProvider>
     </BaseRoot>
diff --git a/packages/component-library/src/MainNavTabs/index.module.scss b/packages/component-library/src/MainNavTabs/index.module.scss
index 7941540539..1ce2ca5d64 100644
--- a/packages/component-library/src/MainNavTabs/index.module.scss
+++ b/packages/component-library/src/MainNavTabs/index.module.scss
@@ -6,6 +6,10 @@
   @include theme.row;
 
   .tab {
+    width: 100%;
+    @include theme.breakpoint("md") {
+      width: auto;
+    }
     position: relative;
     outline: none;
 
diff --git a/packages/component-library/src/theme.scss b/packages/component-library/src/theme.scss
index 91735cd2f7..1e4f377cc5 100644
--- a/packages/component-library/src/theme.scss
+++ b/packages/component-library/src/theme.scss
@@ -97,8 +97,6 @@ $breakpoints: (
 @mixin breakpoint($point) {
   @media (min-width: map-get-strict($breakpoints, $point)) {
     @content;
-    background: lime;
-    outline: 1px solid purple;
   }
 }
 

From e61dae4da98127a1060ca8b38082c15d2f609f30 Mon Sep 17 00:00:00 2001
From: PartyParrotGreg <2233348+partyparrotgreg@users.noreply.github.com>
Date: Thu, 23 Jan 2025 17:14:33 +0000
Subject: [PATCH 06/13] chore(insights): enhance layout and responsiveness of
 Stats component for improved user experience across mobile and desktop
 breakpoints

---
 .../src/components/Stats/index.module.scss    | 75 +++++++++----------
 1 file changed, 37 insertions(+), 38 deletions(-)

diff --git a/apps/insights/src/components/Stats/index.module.scss b/apps/insights/src/components/Stats/index.module.scss
index 5ef9f4ffc8..3830c5284f 100644
--- a/apps/insights/src/components/Stats/index.module.scss
+++ b/apps/insights/src/components/Stats/index.module.scss
@@ -1,56 +1,55 @@
 @use "@pythnetwork/component-library/theme";
 
 .statWrapper {
-  position: relative;
-  width: 100%;
-  display: flex;
-
-  @include theme.mobile {
-    width: 100dvw; // Extend the width beyond the root padding
-    margin-left: -#{theme.spacing(4)};
-    margin-right: -#{theme.spacing(4)};
-    white-space: nowrap;
-    overflow: auto hidden;
-    -webkit-overflow-scrolling: touch;
-    scroll-snap-type: x mandatory;
-    scroll-padding: theme.spacing(4);
-    left: 0;
-    right: 0;
-
-    // Optional: Hide scrollbars
-    scrollbar-width: none;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
+  width: 100dvw; // Extend the width beyond the root padding
+  margin-left: -#{theme.spacing(4)};
+  margin-right: -#{theme.spacing(4)};
+  white-space: nowrap;
+  overflow: auto hidden;
+  -webkit-overflow-scrolling: touch;
+  scroll-snap-type: x mandatory;
+  scroll-padding: theme.spacing(4);
+  left: 0;
+  right: 0;
+
+  // Optional: Hide scrollbars
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  @include theme.breakpoint("md") {
+    position: relative;
+    width: 100%;
+    display: flex;
+    overflow: visible;
+    margin: 0;
   }
 }
 
 .statsContainer {
-  gap: theme.spacing(2);
-  width: 100%;
   display: flex;
   flex-flow: row nowrap;
-  justify-content: space-between;
-  align-items: center;
+  width: max-content;
+  gap: theme.spacing(3);
+  padding: 0 theme.spacing(4);
 
   > * {
-    display: flex;
-    width: 100%;
-    flex: 1 0 0;
-    min-width: 0;
-    max-width: 100%;
-    min-height: 0;
+    width: 280px;
+    scroll-snap-align: start;
   }
 
-  @include theme.mobile {
-    width: max-content;
-    gap: theme.spacing(3);
-    padding: 0 theme.spacing(4);
+  @include theme.breakpoint("md") {
+    gap: theme.spacing(2);
+    width: 100%;
+    padding: 0;
 
     > * {
-      width: 280px;
-      scroll-snap-align: start;
+      display: flex;
+      width: 100%;
+      flex: 1 0 0;
+      min-width: 0;
+      max-width: 100%;
+      min-height: 0;
     }
   }
 }

From f4ca5a1ec5b3018b6c152231a8b488fb4d3a3759 Mon Sep 17 00:00:00 2001
From: PartyParrotGreg <2233348+partyparrotgreg@users.noreply.github.com>
Date: Fri, 24 Jan 2025 14:33:37 +0000
Subject: [PATCH 07/13] chore(Drawer): remove unnecessary padding and clean up
 styles for better layout and consistency in the component library

---
 packages/component-library/src/Drawer/index.module.scss | 1 -
 packages/component-library/src/Html/base.scss           | 4 ----
 2 files changed, 5 deletions(-)

diff --git a/packages/component-library/src/Drawer/index.module.scss b/packages/component-library/src/Drawer/index.module.scss
index bc3fd65f19..450152cae4 100644
--- a/packages/component-library/src/Drawer/index.module.scss
+++ b/packages/component-library/src/Drawer/index.module.scss
@@ -26,7 +26,6 @@
       display: flex;
       flex-flow: column nowrap;
       overflow-y: hidden;
-      padding-bottom: theme.border-radius("3xl");
     }
     @include theme.breakpoint("lg") {
       width: 60%;
diff --git a/packages/component-library/src/Html/base.scss b/packages/component-library/src/Html/base.scss
index 498fb50698..f4bc030dcc 100644
--- a/packages/component-library/src/Html/base.scss
+++ b/packages/component-library/src/Html/base.scss
@@ -10,10 +10,6 @@
   line-height: 1;
 }
 
-nextjs-portal {
-  display: none;
-}
-
 html {
   // We use `scrollbar-gutter: stable` which prevents the page from jumping when
   // adding or removing the scrollbar.  However, react-aria [tries to add a

From f4aa420ed367e5a311f8031a9edf24fc289de57e Mon Sep 17 00:00:00 2001
From: PartyParrotGreg <2233348+partyparrotgreg@users.noreply.github.com>
Date: Fri, 24 Jan 2025 17:20:56 +0000
Subject: [PATCH 08/13] chore(insights): refactor PriceFeed components with
 updated styling and structure for better layout and consistency in the design
 system

---
 .../components/PriceFeedTag/index.module.scss |   8 +-
 .../src/components/PriceFeedTag/index.tsx     |  14 +--
 .../components/PriceFeeds/index.module.scss   |  19 ++-
 .../src/components/PriceFeeds/index.tsx       |  54 ++++----
 .../PriceFeeds/price-feed-items.module.scss   |  16 +++
 .../PriceFeeds/price-feed-items.tsx           |  32 +++++
 .../PriceFeeds/price-feeds-card.tsx           | 117 +++++++++---------
 .../src/components/Stats/index.module.scss    |  94 +++++++-------
 apps/insights/src/components/Stats/index.tsx  |  15 ++-
 .../StructuredList/index.module.scss          |  24 ++++
 .../src/components/StructuredList/index.tsx   |  43 +++++++
 .../src/Card/index.module.scss                |  23 ++--
 .../src/Paginator/index.module.scss           |   5 +-
 .../src/Table/index.module.scss               |  18 +--
 packages/component-library/src/theme.scss     |   2 +-
 15 files changed, 312 insertions(+), 172 deletions(-)
 create mode 100644 apps/insights/src/components/PriceFeeds/price-feed-items.module.scss
 create mode 100644 apps/insights/src/components/PriceFeeds/price-feed-items.tsx
 create mode 100644 apps/insights/src/components/StructuredList/index.module.scss
 create mode 100644 apps/insights/src/components/StructuredList/index.tsx

diff --git a/apps/insights/src/components/PriceFeedTag/index.module.scss b/apps/insights/src/components/PriceFeedTag/index.module.scss
index 0ca6b99f12..fc92baf48e 100644
--- a/apps/insights/src/components/PriceFeedTag/index.module.scss
+++ b/apps/insights/src/components/PriceFeedTag/index.module.scss
@@ -1,8 +1,8 @@
 @use "@pythnetwork/component-library/theme";
 
 .priceFeedTag {
-  display: flex;
-  flex-flow: row nowrap;
+  display: grid;
+  grid-template-columns: theme.spacing(10) 1fr;
   gap: theme.spacing(3);
   align-items: center;
 
@@ -13,6 +13,8 @@
   }
 
   .nameAndDescription {
+    width: 100%;
+    position: relative;
     display: flex;
     flex-flow: column nowrap;
     gap: theme.spacing(1.5);
@@ -52,6 +54,8 @@
       color: theme.color("muted");
       overflow: hidden;
       text-overflow: ellipsis;
+      white-space: nowrap; // Add this line
+      width: 100%;
 
       @include theme.text("xs", "medium");
     }
diff --git a/apps/insights/src/components/PriceFeedTag/index.tsx b/apps/insights/src/components/PriceFeedTag/index.tsx
index 0f47f8c701..c8db9096e9 100644
--- a/apps/insights/src/components/PriceFeedTag/index.tsx
+++ b/apps/insights/src/components/PriceFeedTag/index.tsx
@@ -7,15 +7,15 @@ import styles from "./index.module.scss";
 type OwnProps =
   | { isLoading: true; compact?: boolean | undefined }
   | ({
-      isLoading?: false;
-      symbol: string;
-      icon: ReactNode;
-    } & (
+    isLoading?: false;
+    symbol: string;
+    icon: ReactNode;
+  } & (
       | { compact: true }
       | {
-          compact?: false;
-          description: string;
-        }
+        compact?: false;
+        description: string;
+      }
     ));
 
 type Props = Omit<ComponentProps<"div">, keyof OwnProps> & OwnProps;
diff --git a/apps/insights/src/components/PriceFeeds/index.module.scss b/apps/insights/src/components/PriceFeeds/index.module.scss
index d5927a894b..adba87040d 100644
--- a/apps/insights/src/components/PriceFeeds/index.module.scss
+++ b/apps/insights/src/components/PriceFeeds/index.module.scss
@@ -5,10 +5,14 @@
 
   .header {
     @include theme.h3;
-
     color: theme.color("heading");
     font-weight: theme.font-weight("semibold");
   }
+  .toolbarContainer {
+    display: flex;
+    flex-flow: row nowrap;
+    gap: theme.spacing(2);
+  }
 
   .body {
     display: flex;
@@ -23,12 +27,15 @@
     .featuredFeeds,
     .stats {
       display: flex;
-      flex-flow: row nowrap;
-      align-items: center;
+      flex-flow: column nowrap;
+      align-items: stretch;
 
-      & > * {
-        flex: 1 1 0px;
-        width: 0;
+      @include theme.breakpoint("md") {
+        flex-flow: row nowrap;
+        & > * {
+          flex: 1 1 0px;
+          width: 0;
+        }
       }
     }
 
diff --git a/apps/insights/src/components/PriceFeeds/index.tsx b/apps/insights/src/components/PriceFeeds/index.tsx
index 3a0c9aeeca..290900a3a8 100644
--- a/apps/insights/src/components/PriceFeeds/index.tsx
+++ b/apps/insights/src/components/PriceFeeds/index.tsx
@@ -166,34 +166,32 @@ const FeaturedFeedsCard = <T extends ElementType>({
 }: FeaturedFeedsCardProps<T>) => (
   <Card {...props}>
     <div className={styles.featuredFeeds}>
-      <Stats>
-        {feeds.map((feed) => (
-          <Card
-            key={feed.product.price_account}
-            variant="tertiary"
-            {...(linkFeeds && {
-              href: `/price-feeds/${encodeURIComponent(feed.symbol)}`,
-            })}
-          >
-            <div className={styles.feedCardContents}>
-              <PriceFeedTag
-                symbol={feed.product.display_symbol}
-                description={feed.product.description}
-                icon={<PriceFeedIcon symbol={feed.product.display_symbol} />}
-              />
-              {showPrices && (
-                <div className={styles.prices}>
-                  <LivePrice feedKey={feed.product.price_account} />
-                  <ChangePercent
-                    className={styles.changePercent}
-                    feedKey={feed.product.price_account}
-                  />
-                </div>
-              )}
-            </div>
-          </Card>
-        ))}
-      </Stats>
+      {feeds.map((feed) => (
+        <Card
+          key={feed.product.price_account}
+          variant="tertiary"
+          {...(linkFeeds && {
+            href: `/price-feeds/${encodeURIComponent(feed.symbol)}`,
+          })}
+        >
+          <div className={styles.feedCardContents}>
+            <PriceFeedTag
+              symbol={feed.product.display_symbol}
+              description={feed.product.description}
+              icon={<PriceFeedIcon symbol={feed.product.display_symbol} />}
+            />
+            {showPrices && (
+              <div className={styles.prices}>
+                <LivePrice feedKey={feed.product.price_account} />
+                <ChangePercent
+                  className={styles.changePercent}
+                  feedKey={feed.product.price_account}
+                />
+              </div>
+            )}
+          </div>
+        </Card>
+      ))}
     </div>
   </Card>
 );
diff --git a/apps/insights/src/components/PriceFeeds/price-feed-items.module.scss b/apps/insights/src/components/PriceFeeds/price-feed-items.module.scss
new file mode 100644
index 0000000000..07733d5a85
--- /dev/null
+++ b/apps/insights/src/components/PriceFeeds/price-feed-items.module.scss
@@ -0,0 +1,16 @@
+@use "@pythnetwork/component-library/theme";
+
+.priceFeedItemsWrapper {
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 0;
+    border-radius: theme.border-radius("xl");
+    background: theme.color("background", "card-secondary");
+}
+.priceFeedItem {
+    padding: theme.spacing(4);
+    position: relative;
+    &:not(:last-child) {
+        border-bottom: 1px solid theme.color("background", "secondary");
+    }
+}
diff --git a/apps/insights/src/components/PriceFeeds/price-feed-items.tsx b/apps/insights/src/components/PriceFeeds/price-feed-items.tsx
new file mode 100644
index 0000000000..87549b79c8
--- /dev/null
+++ b/apps/insights/src/components/PriceFeeds/price-feed-items.tsx
@@ -0,0 +1,32 @@
+
+import styles from "./price-feed-items.module.scss";
+import { PriceFeedTag } from "../PriceFeedTag";
+import { StructuredList } from "../StructuredList";
+
+export const PriceFeedItems = () => {
+    return (
+        <div className={styles.priceFeedItemsWrapper}>
+            {Array.from({ length: 20 }).map((item, index) => {
+                return (
+                    <div className={styles.priceFeedItem} key={index}>
+                        <StructuredList items={[
+                            {
+                                label: <PriceFeedTag compact isLoading />,
+                                value: "$32,323.22"
+                            },
+                            {
+                                label: "Last Price",
+                                value: "$10,000.00"
+                            },
+                            {
+                                label: "Last Updated",
+                                value: "2022-01-01"
+                            },
+                        ]} />
+                    </div>
+                )
+            })}
+        </div>
+    );
+};
+
diff --git a/apps/insights/src/components/PriceFeeds/price-feeds-card.tsx b/apps/insights/src/components/PriceFeeds/price-feeds-card.tsx
index 0fe94882fd..16ac24894a 100644
--- a/apps/insights/src/components/PriceFeeds/price-feeds-card.tsx
+++ b/apps/insights/src/components/PriceFeeds/price-feeds-card.tsx
@@ -16,6 +16,8 @@ import { useQueryState, parseAsString } from "nuqs";
 import { type ReactNode, Suspense, useCallback, useMemo } from "react";
 import { useFilter, useCollator } from "react-aria";
 
+import styles from "./index.module.scss";
+import { PriceFeedItems } from "./price-feed-items";
 import { useQueryParamFilterPagination } from "../../use-query-param-filter-pagination";
 import { FeedKey } from "../FeedKey";
 import {
@@ -195,31 +197,31 @@ type PriceFeedsCardContents = Pick<Props, "id"> &
   (
     | { isLoading: true }
     | {
-        isLoading?: false;
-        numResults: number;
-        search: string;
-        sortDescriptor: SortDescriptor;
-        onSortChange: (newSort: SortDescriptor) => void;
-        assetClass: string;
-        assetClasses: string[];
-        numPages: number;
-        page: number;
-        pageSize: number;
-        onSearchChange: (newSearch: string) => void;
-        onAssetClassChange: (newAssetClass: string) => void;
-        onPageSizeChange: (newPageSize: number) => void;
-        onPageChange: (newPage: number) => void;
-        mkPageLink: (page: number) => string;
-        rows: RowConfig<
-          | "priceFeedName"
-          | "assetClass"
-          | "priceFeedId"
-          | "price"
-          | "confidenceInterval"
-          | "exponent"
-          | "numPublishers"
-        >[];
-      }
+      isLoading?: false;
+      numResults: number;
+      search: string;
+      sortDescriptor: SortDescriptor;
+      onSortChange: (newSort: SortDescriptor) => void;
+      assetClass: string;
+      assetClasses: string[];
+      numPages: number;
+      page: number;
+      pageSize: number;
+      onSearchChange: (newSearch: string) => void;
+      onAssetClassChange: (newAssetClass: string) => void;
+      onPageSizeChange: (newPageSize: number) => void;
+      onPageChange: (newPage: number) => void;
+      mkPageLink: (page: number) => string;
+      rows: RowConfig<
+        | "priceFeedName"
+        | "assetClass"
+        | "priceFeedId"
+        | "price"
+        | "confidenceInterval"
+        | "exponent"
+        | "numPublishers"
+      >[];
+    }
   );
 
 const PriceFeedsCardContents = ({ id, ...props }: PriceFeedsCardContents) => (
@@ -237,7 +239,7 @@ const PriceFeedsCardContents = ({ id, ...props }: PriceFeedsCardContents) => (
       </>
     }
     toolbar={
-      <>
+      <div className={styles.toolbarContainer}>
         <Select<string>
           label="Asset Class"
           size="sm"
@@ -246,18 +248,18 @@ const PriceFeedsCardContents = ({ id, ...props }: PriceFeedsCardContents) => (
           {...(props.isLoading
             ? { isPending: true, options: [], buttonLabel: "Asset Class" }
             : {
-                optionGroups: [
-                  { name: "All", options: [""] },
-                  { name: "Asset classes", options: props.assetClasses },
-                ],
-                hideGroupLabel: true,
-                show: (value) => (value === "" ? "All" : value),
-                placement: "bottom end",
-                buttonLabel:
-                  props.assetClass === "" ? "Asset Class" : props.assetClass,
-                selectedKey: props.assetClass,
-                onSelectionChange: props.onAssetClassChange,
-              })}
+              optionGroups: [
+                { name: "All", options: [""] },
+                { name: "Asset classes", options: props.assetClasses },
+              ],
+              hideGroupLabel: true,
+              show: (value) => (value === "" ? "All" : value),
+              placement: "bottom end",
+              buttonLabel:
+                props.assetClass === "" ? "Asset Class" : props.assetClass,
+              selectedKey: props.assetClass,
+              onSelectionChange: props.onAssetClassChange,
+            })}
         />
         <SearchInput
           size="sm"
@@ -266,11 +268,11 @@ const PriceFeedsCardContents = ({ id, ...props }: PriceFeedsCardContents) => (
           {...(props.isLoading
             ? { isPending: true, isDisabled: true }
             : {
-                value: props.search,
-                onChange: props.onSearchChange,
-              })}
+              value: props.search,
+              onChange: props.onSearchChange,
+            })}
         />
-      </>
+      </div>
     }
     {...(!props.isLoading && {
       footer: (
@@ -286,6 +288,9 @@ const PriceFeedsCardContents = ({ id, ...props }: PriceFeedsCardContents) => (
       ),
     })}
   >
+
+    <PriceFeedItems />
+
     <Table
       rounded
       fill
@@ -344,21 +349,21 @@ const PriceFeedsCardContents = ({ id, ...props }: PriceFeedsCardContents) => (
       ]}
       {...(props.isLoading
         ? {
-            isLoading: true,
-          }
+          isLoading: true,
+        }
         : {
-            rows: props.rows,
-            sortDescriptor: props.sortDescriptor,
-            onSortChange: props.onSortChange,
-            emptyState: (
-              <NoResults
-                query={props.search}
-                onClearSearch={() => {
-                  props.onSearchChange("");
-                }}
-              />
-            ),
-          })}
+          rows: props.rows,
+          sortDescriptor: props.sortDescriptor,
+          onSortChange: props.onSortChange,
+          emptyState: (
+            <NoResults
+              query={props.search}
+              onClearSearch={() => {
+                props.onSearchChange("");
+              }}
+            />
+          ),
+        })}
     />
   </Card>
 );
diff --git a/apps/insights/src/components/Stats/index.module.scss b/apps/insights/src/components/Stats/index.module.scss
index 3830c5284f..6ff744e363 100644
--- a/apps/insights/src/components/Stats/index.module.scss
+++ b/apps/insights/src/components/Stats/index.module.scss
@@ -1,55 +1,57 @@
 @use "@pythnetwork/component-library/theme";
 
-.statWrapper {
-  width: 100dvw; // Extend the width beyond the root padding
-  margin-left: -#{theme.spacing(4)};
-  margin-right: -#{theme.spacing(4)};
-  white-space: nowrap;
-  overflow: auto hidden;
-  -webkit-overflow-scrolling: touch;
-  scroll-snap-type: x mandatory;
-  scroll-padding: theme.spacing(4);
-  left: 0;
-  right: 0;
-
-  // Optional: Hide scrollbars
-  scrollbar-width: none;
-  &::-webkit-scrollbar {
-    display: none;
-  }
-  @include theme.breakpoint("md") {
-    position: relative;
-    width: 100%;
-    display: flex;
-    overflow: visible;
-    margin: 0;
-  }
-}
-
 .statsContainer {
-  display: flex;
-  flex-flow: row nowrap;
-  width: max-content;
-  gap: theme.spacing(3);
-  padding: 0 theme.spacing(4);
+  .statScrollWrapper {
+    width: 100dvw; // Extend the width beyond the root padding
+    margin-left: -#{theme.spacing(4)};
+    margin-right: -#{theme.spacing(4)};
+    white-space: nowrap;
+    overflow: auto hidden;
+    -webkit-overflow-scrolling: touch;
+    scroll-snap-type: x mandatory;
+    scroll-padding: theme.spacing(4);
+    left: 0;
+    right: 0;
 
-  > * {
-    width: 280px;
-    scroll-snap-align: start;
-  }
+    // Optional: Hide scrollbars
+    scrollbar-width: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    @include theme.breakpoint("md") {
+      width: 100%;
+      position: relative;
+      display: flex;
+      flex-flow: row nowrap;
+      overflow: visible;
+      margin: 0;
+    }
+    .statsItemsContainer {
+      display: flex;
+      flex-flow: row nowrap;
+      width: max-content;
+      gap: theme.spacing(3);
+      padding: 0 theme.spacing(4);
 
-  @include theme.breakpoint("md") {
-    gap: theme.spacing(2);
-    width: 100%;
-    padding: 0;
+      > * {
+        width: 280px;
+        scroll-snap-align: start;
+      }
 
-    > * {
-      display: flex;
-      width: 100%;
-      flex: 1 0 0;
-      min-width: 0;
-      max-width: 100%;
-      min-height: 0;
+      @include theme.breakpoint("md") {
+        gap: theme.spacing(6);
+        width: 100%;
+        padding: 0;
+
+        > * {
+          display: flex;
+          width: 100%;
+          flex: 1 0 0;
+          min-width: 0;
+          max-width: 100%;
+          min-height: 0;
+        }
+      }
     }
   }
 }
diff --git a/apps/insights/src/components/Stats/index.tsx b/apps/insights/src/components/Stats/index.tsx
index ec040ed115..1a379e913e 100644
--- a/apps/insights/src/components/Stats/index.tsx
+++ b/apps/insights/src/components/Stats/index.tsx
@@ -1,9 +1,18 @@
+import clsx from "clsx";
+import type { ComponentProps } from "react";
+
 import styles from "./index.module.scss";
 
-export const Stats = ({ children }: { children: React.ReactNode }) => {
+type StatsProps = {
+  children: React.ReactNode;
+} & ComponentProps<"div">;
+
+export const Stats = ({ children, ...props }: StatsProps) => {
   return (
-    <div className={styles.statWrapper}>
-      <div className={styles.statsContainer}>{children}</div>
+    <div className={clsx(styles.statsContainer, props.className)} {...props}>
+      <div className={styles.statScrollWrapper}>
+        <div className={styles.statsItemsContainer}>{children}</div>
+      </div>
     </div>
   );
 };
diff --git a/apps/insights/src/components/StructuredList/index.module.scss b/apps/insights/src/components/StructuredList/index.module.scss
new file mode 100644
index 0000000000..4a8a1506e6
--- /dev/null
+++ b/apps/insights/src/components/StructuredList/index.module.scss
@@ -0,0 +1,24 @@
+@use "@pythnetwork/component-library/theme";
+.structuredList {
+    display: flex;
+    flex-flow: column nowrap;
+    gap: theme.spacing(4);
+
+    .structuredListItem {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: theme.spacing(2);
+        align-items: center;
+        justify-content: space-between;
+        // font-size: theme.font-size("sm");
+        .structuredListItemLabel {
+            color: theme.color("muted");
+        }
+        .structuredListItemValue {
+            text-align: right;
+            place-items: end;
+            font-weight: theme.font-weight("medium");
+            color: theme.color("heading");
+        }
+    }
+}
diff --git a/apps/insights/src/components/StructuredList/index.tsx b/apps/insights/src/components/StructuredList/index.tsx
new file mode 100644
index 0000000000..5e39b4e04c
--- /dev/null
+++ b/apps/insights/src/components/StructuredList/index.tsx
@@ -0,0 +1,43 @@
+import clsx from "clsx";
+import type { ComponentProps } from "react";
+
+import styles from "./index.module.scss";
+
+type StructuredListProps = {
+    items: StructureListItemProps[];
+} & ComponentProps<"div">;
+
+type StructureListItemProps = {
+    label: React.ReactNode;
+    value: React.ReactNode;
+} & ComponentProps<"div">;
+
+
+export const StructuredList = ({
+    items,
+    ...props
+}: StructuredListProps) => {
+    return (
+        items.length > 0 && (
+            <div className={clsx(styles.structuredList, props.className)} {...props}>
+                {items.map((item, index) => (
+                    <StructuredListItem key={index} {...item} />
+                ))}
+            </div>
+        )
+    );
+};
+
+
+export const StructuredListItem = ({
+    label,
+    value,
+    ...props
+}: StructureListItemProps) => {
+    return (
+        <div className={clsx(styles.structuredListItem, props.className)} {...props}>
+            <div className={styles.structuredListItemLabel}>{label}</div>
+            <div className={styles.structuredListItemValue}>{value}</div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/packages/component-library/src/Card/index.module.scss b/packages/component-library/src/Card/index.module.scss
index 097d0940d7..7e1dc9e3eb 100644
--- a/packages/component-library/src/Card/index.module.scss
+++ b/packages/component-library/src/Card/index.module.scss
@@ -16,7 +16,6 @@
   position: relative;
   padding: theme.spacing(1);
   isolation: isolate;
-  overflow: hidden;
 
   @at-root button#{&} {
     cursor: pointer;
@@ -35,15 +34,23 @@
 
   .header {
     display: flex;
-    padding: theme.spacing(3) theme.spacing(4);
     position: relative;
+    flex-direction: column;
+    padding: theme.spacing(2);
+    gap: theme.spacing(4);
+
+    @include theme.breakpoint("lg") {
+      flex-direction: row;
+      padding: theme.spacing(3) theme.spacing(4);
+    }
 
     .title {
       color: theme.color("heading");
-      display: inline-flex;
+      display: flex;
       flex-flow: row nowrap;
       gap: theme.spacing(3);
       align-items: center;
+      flex-grow: 1;
 
       @include theme.text("lg", "medium");
 
@@ -55,14 +62,10 @@
     }
 
     .toolbar {
-      position: absolute;
-      right: theme.spacing(3);
-      top: 0;
-      bottom: theme.spacing(0);
+      &:empty {
+        display: none;
+      }
       display: flex;
-      flex-flow: row nowrap;
-      gap: theme.spacing(2);
-      align-items: center;
     }
   }
 
diff --git a/packages/component-library/src/Paginator/index.module.scss b/packages/component-library/src/Paginator/index.module.scss
index 5679663437..5e96b4414d 100644
--- a/packages/component-library/src/Paginator/index.module.scss
+++ b/packages/component-library/src/Paginator/index.module.scss
@@ -6,10 +6,13 @@
   justify-content: space-between;
 
   .pageSizeSelect {
-    display: flex;
+    display: none;
     flex-flow: row nowrap;
     align-items: center;
     gap: theme.spacing(1);
+    @include theme.breakpoint("lg") {
+      display: flex;
+    }
 
     .loadingIndicator {
       width: theme.spacing(4);
diff --git a/packages/component-library/src/Table/index.module.scss b/packages/component-library/src/Table/index.module.scss
index 6e96da9c1f..bcbf293acc 100644
--- a/packages/component-library/src/Table/index.module.scss
+++ b/packages/component-library/src/Table/index.module.scss
@@ -1,8 +1,12 @@
 @use "../theme";
 
 .tableContainer {
+  display: none;
   background-color: theme.color("background", "primary");
   position: relative;
+  @include theme.breakpoint("lg") {
+    display: block;
+  }
 
   .loaderWrapper {
     position: absolute;
@@ -164,21 +168,11 @@
         }
 
         &[data-hovered] .cell {
-          background-color: theme.color(
-            "button",
-            "outline",
-            "background",
-            "hover"
-          );
+          background-color: theme.color("button", "outline", "background", "hover");
         }
 
         &[data-pressed] .cell {
-          background-color: theme.color(
-            "button",
-            "outline",
-            "background",
-            "active"
-          );
+          background-color: theme.color("button", "outline", "background", "active");
         }
       }
     }
diff --git a/packages/component-library/src/theme.scss b/packages/component-library/src/theme.scss
index 1e4f377cc5..1ba5a2e328 100644
--- a/packages/component-library/src/theme.scss
+++ b/packages/component-library/src/theme.scss
@@ -461,7 +461,7 @@ $color: (
     "normal": light-dark(pallette-color("steel", 800), pallette-color("steel", 50))
   ),
   "highlight": light-dark(pallette-color("violet", 600), pallette-color("violet", 500)),
-  "muted": light-dark(pallette-color("stone", 700), pallette-color("steel", 300)),
+  "muted": light-dark(pallette-color("stone", 500), pallette-color("steel", 400)),
   "border": light-dark(pallette-color("stone", 300), pallette-color("steel", 600)),
   "selection": (
     "background": light-dark(pallette-color("violet", 600), pallette-color("violet", 400)),

From e5f22efd3de93b8220cf5b6541c0c0439243d985 Mon Sep 17 00:00:00 2001
From: PartyParrotGreg <2233348+partyparrotgreg@users.noreply.github.com>
Date: Fri, 24 Jan 2025 17:41:57 +0000
Subject: [PATCH 09/13] chore(insights): clean up and standardize component
 styles across MobileMenu, Navigation, and PriceFeeds for improved consistency
 and layout

---
 .../src/components/MobileMenu/mobile-menu.tsx |   5 +-
 .../mobile-navigation.module.scss             |  15 +-
 .../MobileNavigation/mobile-navigation.tsx    |  16 +-
 .../src/components/PriceFeedTag/index.tsx     |  14 +-
 .../components/PriceFeeds/index.module.scss   |   3 +
 .../src/components/PriceFeeds/index.tsx       |   4 +-
 .../PriceFeeds/price-feed-items.module.scss   |  26 +-
 .../PriceFeeds/price-feed-items.tsx           |  52 +--
 .../PriceFeeds/price-feeds-card.tsx           | 125 ++++---
 .../src/components/Root/footer.module.scss    |   2 +
 .../src/components/Root/header.module.scss    |   3 +
 .../src/components/Stats/index.module.scss    |   3 +
 .../StructuredList/index.module.scss          |  41 +--
 .../src/components/StructuredList/index.tsx   |  54 ++--
 .../src/Card/index.module.scss                |  13 +-
 packages/component-library/src/Card/index.tsx |   3 +
 .../src/Drawer/index.module.scss              |   1 +
 .../src/MainNavTabs/index.module.scss         |  17 +-
 .../src/Paginator/index.module.scss           |   7 +-
 .../src/Table/index.module.scss               |  17 +-
 packages/component-library/src/theme.scss     | 304 +++++++++++-------
 21 files changed, 434 insertions(+), 291 deletions(-)

diff --git a/apps/insights/src/components/MobileMenu/mobile-menu.tsx b/apps/insights/src/components/MobileMenu/mobile-menu.tsx
index d36c85a122..4e5932b425 100644
--- a/apps/insights/src/components/MobileMenu/mobile-menu.tsx
+++ b/apps/insights/src/components/MobileMenu/mobile-menu.tsx
@@ -6,10 +6,7 @@ import { useState, type ComponentProps } from "react";
 
 import styles from "./mobile-menu.module.scss";
 
-export const MobileMenu = ({
-  className,
-  ...props
-}: ComponentProps<"div">) => {
+export const MobileMenu = ({ className, ...props }: ComponentProps<"div">) => {
   const [isOpen, setIsOpen] = useState(false);
 
   const toggleMenu = () => {
diff --git a/apps/insights/src/components/MobileNavigation/mobile-navigation.module.scss b/apps/insights/src/components/MobileNavigation/mobile-navigation.module.scss
index 6710b50b8c..00e1c7ceec 100644
--- a/apps/insights/src/components/MobileNavigation/mobile-navigation.module.scss
+++ b/apps/insights/src/components/MobileNavigation/mobile-navigation.module.scss
@@ -1,11 +1,12 @@
 @use "@pythnetwork/component-library/theme";
 
 .mobileNavigation {
-    display: block;
-    padding: theme.spacing(2);
-    background: theme.color("background", "primary");
-    border-top: 1px solid theme.color("background", "secondary");
-    @include theme.breakpoint("md") {
-        display: none;
-    }
+  display: block;
+  padding: theme.spacing(2);
+  background: theme.color("background", "primary");
+  border-top: 1px solid theme.color("background", "secondary");
+
+  @include theme.breakpoint("md") {
+    display: none;
+  }
 }
diff --git a/apps/insights/src/components/MobileNavigation/mobile-navigation.tsx b/apps/insights/src/components/MobileNavigation/mobile-navigation.tsx
index ebaa4915cb..0ee7773a4b 100644
--- a/apps/insights/src/components/MobileNavigation/mobile-navigation.tsx
+++ b/apps/insights/src/components/MobileNavigation/mobile-navigation.tsx
@@ -1,9 +1,9 @@
-import styles from "./mobile-navigation.module.scss"
-import { MainNavTabs } from "../Root/tabs"
+import styles from "./mobile-navigation.module.scss";
+import { MainNavTabs } from "../Root/tabs";
 export const MobileNavigation = () => {
-    return (
-        <div className={styles.mobileNavigation}>
-            <MainNavTabs />
-        </div>
-    )
-}
\ No newline at end of file
+  return (
+    <div className={styles.mobileNavigation}>
+      <MainNavTabs />
+    </div>
+  );
+};
diff --git a/apps/insights/src/components/PriceFeedTag/index.tsx b/apps/insights/src/components/PriceFeedTag/index.tsx
index c8db9096e9..0f47f8c701 100644
--- a/apps/insights/src/components/PriceFeedTag/index.tsx
+++ b/apps/insights/src/components/PriceFeedTag/index.tsx
@@ -7,15 +7,15 @@ import styles from "./index.module.scss";
 type OwnProps =
   | { isLoading: true; compact?: boolean | undefined }
   | ({
-    isLoading?: false;
-    symbol: string;
-    icon: ReactNode;
-  } & (
+      isLoading?: false;
+      symbol: string;
+      icon: ReactNode;
+    } & (
       | { compact: true }
       | {
-        compact?: false;
-        description: string;
-      }
+          compact?: false;
+          description: string;
+        }
     ));
 
 type Props = Omit<ComponentProps<"div">, keyof OwnProps> & OwnProps;
diff --git a/apps/insights/src/components/PriceFeeds/index.module.scss b/apps/insights/src/components/PriceFeeds/index.module.scss
index adba87040d..83d0b32be3 100644
--- a/apps/insights/src/components/PriceFeeds/index.module.scss
+++ b/apps/insights/src/components/PriceFeeds/index.module.scss
@@ -5,9 +5,11 @@
 
   .header {
     @include theme.h3;
+
     color: theme.color("heading");
     font-weight: theme.font-weight("semibold");
   }
+
   .toolbarContainer {
     display: flex;
     flex-flow: row nowrap;
@@ -32,6 +34,7 @@
 
       @include theme.breakpoint("md") {
         flex-flow: row nowrap;
+
         & > * {
           flex: 1 1 0px;
           width: 0;
diff --git a/apps/insights/src/components/PriceFeeds/index.tsx b/apps/insights/src/components/PriceFeeds/index.tsx
index 290900a3a8..fd9a797ea0 100644
--- a/apps/insights/src/components/PriceFeeds/index.tsx
+++ b/apps/insights/src/components/PriceFeeds/index.tsx
@@ -96,9 +96,9 @@ export const PriceFeeds = async () => {
           title="Coming Soon"
           icon={<ClockCountdown />}
           feeds={featuredComingSoon}
-          toolbar={
+          action={
             <DrawerTrigger>
-              <Button size="xs" variant="outline">
+              <Button size="sm" variant="outline">
                 Show all
               </Button>
               <Drawer
diff --git a/apps/insights/src/components/PriceFeeds/price-feed-items.module.scss b/apps/insights/src/components/PriceFeeds/price-feed-items.module.scss
index 07733d5a85..9825c9e6e4 100644
--- a/apps/insights/src/components/PriceFeeds/price-feed-items.module.scss
+++ b/apps/insights/src/components/PriceFeeds/price-feed-items.module.scss
@@ -1,16 +1,22 @@
 @use "@pythnetwork/component-library/theme";
 
 .priceFeedItemsWrapper {
-    display: flex;
-    flex-flow: column nowrap;
-    gap: 0;
-    border-radius: theme.border-radius("xl");
-    background: theme.color("background", "card-secondary");
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0;
+  border-radius: theme.border-radius("xl");
+  background: theme.color("background", "card-secondary");
+
+  @include theme.breakpoint("md") {
+    display: none;
+  }
 }
+
 .priceFeedItem {
-    padding: theme.spacing(4);
-    position: relative;
-    &:not(:last-child) {
-        border-bottom: 1px solid theme.color("background", "secondary");
-    }
+  padding: theme.spacing(4);
+  position: relative;
+
+  &:not(:last-child) {
+    border-bottom: 1px solid theme.color("background", "secondary");
+  }
 }
diff --git a/apps/insights/src/components/PriceFeeds/price-feed-items.tsx b/apps/insights/src/components/PriceFeeds/price-feed-items.tsx
index 87549b79c8..3759311ca7 100644
--- a/apps/insights/src/components/PriceFeeds/price-feed-items.tsx
+++ b/apps/insights/src/components/PriceFeeds/price-feed-items.tsx
@@ -1,32 +1,32 @@
-
 import styles from "./price-feed-items.module.scss";
 import { PriceFeedTag } from "../PriceFeedTag";
 import { StructuredList } from "../StructuredList";
 
 export const PriceFeedItems = () => {
-    return (
-        <div className={styles.priceFeedItemsWrapper}>
-            {Array.from({ length: 20 }).map((item, index) => {
-                return (
-                    <div className={styles.priceFeedItem} key={index}>
-                        <StructuredList items={[
-                            {
-                                label: <PriceFeedTag compact isLoading />,
-                                value: "$32,323.22"
-                            },
-                            {
-                                label: "Last Price",
-                                value: "$10,000.00"
-                            },
-                            {
-                                label: "Last Updated",
-                                value: "2022-01-01"
-                            },
-                        ]} />
-                    </div>
-                )
-            })}
-        </div>
-    );
+  return (
+    <div className={styles.priceFeedItemsWrapper}>
+      {Array.from({ length: 20 }).map((_, index) => {
+        return (
+          <div className={styles.priceFeedItem} key={index}>
+            <StructuredList
+              items={[
+                {
+                  label: <PriceFeedTag compact isLoading />,
+                  value: "$32,323.22",
+                },
+                {
+                  label: "Last Price",
+                  value: "$10,000.00",
+                },
+                {
+                  label: "Last Updated",
+                  value: "2022-01-01",
+                },
+              ]}
+            />
+          </div>
+        );
+      })}
+    </div>
+  );
 };
-
diff --git a/apps/insights/src/components/PriceFeeds/price-feeds-card.tsx b/apps/insights/src/components/PriceFeeds/price-feeds-card.tsx
index 16ac24894a..5290c9c139 100644
--- a/apps/insights/src/components/PriceFeeds/price-feeds-card.tsx
+++ b/apps/insights/src/components/PriceFeeds/price-feeds-card.tsx
@@ -197,31 +197,31 @@ type PriceFeedsCardContents = Pick<Props, "id"> &
   (
     | { isLoading: true }
     | {
-      isLoading?: false;
-      numResults: number;
-      search: string;
-      sortDescriptor: SortDescriptor;
-      onSortChange: (newSort: SortDescriptor) => void;
-      assetClass: string;
-      assetClasses: string[];
-      numPages: number;
-      page: number;
-      pageSize: number;
-      onSearchChange: (newSearch: string) => void;
-      onAssetClassChange: (newAssetClass: string) => void;
-      onPageSizeChange: (newPageSize: number) => void;
-      onPageChange: (newPage: number) => void;
-      mkPageLink: (page: number) => string;
-      rows: RowConfig<
-        | "priceFeedName"
-        | "assetClass"
-        | "priceFeedId"
-        | "price"
-        | "confidenceInterval"
-        | "exponent"
-        | "numPublishers"
-      >[];
-    }
+        isLoading?: false;
+        numResults: number;
+        search: string;
+        sortDescriptor: SortDescriptor;
+        onSortChange: (newSort: SortDescriptor) => void;
+        assetClass: string;
+        assetClasses: string[];
+        numPages: number;
+        page: number;
+        pageSize: number;
+        onSearchChange: (newSearch: string) => void;
+        onAssetClassChange: (newAssetClass: string) => void;
+        onPageSizeChange: (newPageSize: number) => void;
+        onPageChange: (newPage: number) => void;
+        mkPageLink: (page: number) => string;
+        rows: RowConfig<
+          | "priceFeedName"
+          | "assetClass"
+          | "priceFeedId"
+          | "price"
+          | "confidenceInterval"
+          | "exponent"
+          | "numPublishers"
+        >[];
+      }
   );
 
 const PriceFeedsCardContents = ({ id, ...props }: PriceFeedsCardContents) => (
@@ -240,6 +240,17 @@ const PriceFeedsCardContents = ({ id, ...props }: PriceFeedsCardContents) => (
     }
     toolbar={
       <div className={styles.toolbarContainer}>
+        <SearchInput
+          size="sm"
+          width={50}
+          placeholder="Feed symbol"
+          {...(props.isLoading
+            ? { isPending: true, isDisabled: true }
+            : {
+                value: props.search,
+                onChange: props.onSearchChange,
+              })}
+        />
         <Select<string>
           label="Asset Class"
           size="sm"
@@ -248,29 +259,18 @@ const PriceFeedsCardContents = ({ id, ...props }: PriceFeedsCardContents) => (
           {...(props.isLoading
             ? { isPending: true, options: [], buttonLabel: "Asset Class" }
             : {
-              optionGroups: [
-                { name: "All", options: [""] },
-                { name: "Asset classes", options: props.assetClasses },
-              ],
-              hideGroupLabel: true,
-              show: (value) => (value === "" ? "All" : value),
-              placement: "bottom end",
-              buttonLabel:
-                props.assetClass === "" ? "Asset Class" : props.assetClass,
-              selectedKey: props.assetClass,
-              onSelectionChange: props.onAssetClassChange,
-            })}
-        />
-        <SearchInput
-          size="sm"
-          width={50}
-          placeholder="Feed symbol"
-          {...(props.isLoading
-            ? { isPending: true, isDisabled: true }
-            : {
-              value: props.search,
-              onChange: props.onSearchChange,
-            })}
+                optionGroups: [
+                  { name: "All", options: [""] },
+                  { name: "Asset classes", options: props.assetClasses },
+                ],
+                hideGroupLabel: true,
+                show: (value) => (value === "" ? "All" : value),
+                placement: "bottom end",
+                buttonLabel:
+                  props.assetClass === "" ? "Asset Class" : props.assetClass,
+                selectedKey: props.assetClass,
+                onSelectionChange: props.onAssetClassChange,
+              })}
         />
       </div>
     }
@@ -288,7 +288,6 @@ const PriceFeedsCardContents = ({ id, ...props }: PriceFeedsCardContents) => (
       ),
     })}
   >
-
     <PriceFeedItems />
 
     <Table
@@ -349,21 +348,21 @@ const PriceFeedsCardContents = ({ id, ...props }: PriceFeedsCardContents) => (
       ]}
       {...(props.isLoading
         ? {
-          isLoading: true,
-        }
+            isLoading: true,
+          }
         : {
-          rows: props.rows,
-          sortDescriptor: props.sortDescriptor,
-          onSortChange: props.onSortChange,
-          emptyState: (
-            <NoResults
-              query={props.search}
-              onClearSearch={() => {
-                props.onSearchChange("");
-              }}
-            />
-          ),
-        })}
+            rows: props.rows,
+            sortDescriptor: props.sortDescriptor,
+            onSortChange: props.onSortChange,
+            emptyState: (
+              <NoResults
+                query={props.search}
+                onClearSearch={() => {
+                  props.onSearchChange("");
+                }}
+              />
+            ),
+          })}
     />
   </Card>
 );
diff --git a/apps/insights/src/components/Root/footer.module.scss b/apps/insights/src/components/Root/footer.module.scss
index e0164772b1..d28c839e48 100644
--- a/apps/insights/src/components/Root/footer.module.scss
+++ b/apps/insights/src/components/Root/footer.module.scss
@@ -14,6 +14,7 @@
     justify-content: space-between;
 
     @include theme.max-width;
+
     margin-bottom: theme.spacing(6);
 
     @include theme.breakpoint("sm") {
@@ -77,6 +78,7 @@
     display: flex;
     gap: theme.spacing(6);
     flex-flow: column;
+
     @include theme.breakpoint("sm") {
       flex-flow: row nowrap;
       justify-content: space-between;
diff --git a/apps/insights/src/components/Root/header.module.scss b/apps/insights/src/components/Root/header.module.scss
index 60f42bcfb1..b1a6a20149 100644
--- a/apps/insights/src/components/Root/header.module.scss
+++ b/apps/insights/src/components/Root/header.module.scss
@@ -28,6 +28,7 @@
         padding: theme.spacing(3);
         color: theme.color("foreground");
         position: relative;
+
         @include theme.breakpoint("3xl") {
           position: absolute;
           left: -#{theme.spacing(16)};
@@ -81,10 +82,12 @@
       }
     }
   }
+
   .desktopNavigation,
   .desktopSupport,
   .desktopDocs {
     display: none;
+
     @include theme.breakpoint("md") {
       display: block;
     }
diff --git a/apps/insights/src/components/Stats/index.module.scss b/apps/insights/src/components/Stats/index.module.scss
index 6ff744e363..8cecc3044f 100644
--- a/apps/insights/src/components/Stats/index.module.scss
+++ b/apps/insights/src/components/Stats/index.module.scss
@@ -15,9 +15,11 @@
 
     // Optional: Hide scrollbars
     scrollbar-width: none;
+
     &::-webkit-scrollbar {
       display: none;
     }
+
     @include theme.breakpoint("md") {
       width: 100%;
       position: relative;
@@ -26,6 +28,7 @@
       overflow: visible;
       margin: 0;
     }
+
     .statsItemsContainer {
       display: flex;
       flex-flow: row nowrap;
diff --git a/apps/insights/src/components/StructuredList/index.module.scss b/apps/insights/src/components/StructuredList/index.module.scss
index 4a8a1506e6..150d791f45 100644
--- a/apps/insights/src/components/StructuredList/index.module.scss
+++ b/apps/insights/src/components/StructuredList/index.module.scss
@@ -1,24 +1,27 @@
 @use "@pythnetwork/component-library/theme";
+
 .structuredList {
-    display: flex;
-    flex-flow: column nowrap;
-    gap: theme.spacing(4);
+  display: flex;
+  flex-flow: column nowrap;
+  gap: theme.spacing(4);
+
+  .structuredListItem {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: theme.spacing(2);
+    align-items: center;
+    justify-content: space-between;
+
+    // font-size: theme.font-size("sm");
+    .structuredListItemLabel {
+      color: theme.color("muted");
+    }
 
-    .structuredListItem {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        gap: theme.spacing(2);
-        align-items: center;
-        justify-content: space-between;
-        // font-size: theme.font-size("sm");
-        .structuredListItemLabel {
-            color: theme.color("muted");
-        }
-        .structuredListItemValue {
-            text-align: right;
-            place-items: end;
-            font-weight: theme.font-weight("medium");
-            color: theme.color("heading");
-        }
+    .structuredListItemValue {
+      text-align: right;
+      place-items: end;
+      font-weight: theme.font-weight("medium");
+      color: theme.color("heading");
     }
+  }
 }
diff --git a/apps/insights/src/components/StructuredList/index.tsx b/apps/insights/src/components/StructuredList/index.tsx
index 5e39b4e04c..6ac09802b2 100644
--- a/apps/insights/src/components/StructuredList/index.tsx
+++ b/apps/insights/src/components/StructuredList/index.tsx
@@ -4,40 +4,38 @@ import type { ComponentProps } from "react";
 import styles from "./index.module.scss";
 
 type StructuredListProps = {
-    items: StructureListItemProps[];
+  items: StructureListItemProps[];
 } & ComponentProps<"div">;
 
 type StructureListItemProps = {
-    label: React.ReactNode;
-    value: React.ReactNode;
+  label: React.ReactNode;
+  value: React.ReactNode;
 } & ComponentProps<"div">;
 
-
-export const StructuredList = ({
-    items,
-    ...props
-}: StructuredListProps) => {
-    return (
-        items.length > 0 && (
-            <div className={clsx(styles.structuredList, props.className)} {...props}>
-                {items.map((item, index) => (
-                    <StructuredListItem key={index} {...item} />
-                ))}
-            </div>
-        )
-    );
+export const StructuredList = ({ items, ...props }: StructuredListProps) => {
+  return (
+    items.length > 0 && (
+      <div className={clsx(styles.structuredList, props.className)} {...props}>
+        {items.map((item, index) => (
+          <StructuredListItem key={index} {...item} />
+        ))}
+      </div>
+    )
+  );
 };
 
-
 export const StructuredListItem = ({
-    label,
-    value,
-    ...props
+  label,
+  value,
+  ...props
 }: StructureListItemProps) => {
-    return (
-        <div className={clsx(styles.structuredListItem, props.className)} {...props}>
-            <div className={styles.structuredListItemLabel}>{label}</div>
-            <div className={styles.structuredListItemValue}>{value}</div>
-        </div>
-    );
-}
\ No newline at end of file
+  return (
+    <div
+      className={clsx(styles.structuredListItem, props.className)}
+      {...props}
+    >
+      <div className={styles.structuredListItemLabel}>{label}</div>
+      <div className={styles.structuredListItemValue}>{value}</div>
+    </div>
+  );
+};
diff --git a/packages/component-library/src/Card/index.module.scss b/packages/component-library/src/Card/index.module.scss
index 7e1dc9e3eb..ca6034e176 100644
--- a/packages/component-library/src/Card/index.module.scss
+++ b/packages/component-library/src/Card/index.module.scss
@@ -36,7 +36,7 @@
     display: flex;
     position: relative;
     flex-direction: column;
-    padding: theme.spacing(2);
+    padding: theme.spacing(4) theme.spacing(3);
     gap: theme.spacing(4);
 
     @include theme.breakpoint("lg") {
@@ -65,8 +65,19 @@
       &:empty {
         display: none;
       }
+
       display: flex;
     }
+
+    .action {
+      display: grid;
+      place-items: center;
+      height: 100%;
+      padding: 0 theme.spacing(2);
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
   }
 
   .footer {
diff --git a/packages/component-library/src/Card/index.tsx b/packages/component-library/src/Card/index.tsx
index de33b1c4cd..ad48fc86e9 100644
--- a/packages/component-library/src/Card/index.tsx
+++ b/packages/component-library/src/Card/index.tsx
@@ -20,6 +20,7 @@ type OwnProps = {
   icon?: ReactNode | undefined;
   title?: ReactNode | undefined;
   toolbar?: ReactNode | ReactNode[] | undefined;
+  action?: ReactNode | undefined;
   footer?: ReactNode | undefined;
   nonInteractive?: boolean | undefined;
 };
@@ -59,6 +60,7 @@ const cardProps = <T extends ElementType>({
   title,
   toolbar,
   footer,
+  action,
   ...props
 }: Props<T>) => ({
   ...props,
@@ -74,6 +76,7 @@ const cardProps = <T extends ElementType>({
             {title}
           </h2>
           <div className={styles.toolbar}>{toolbar}</div>
+          {action && <div className={styles.action}>{action}</div>}
         </div>
       )}
       {children}
diff --git a/packages/component-library/src/Drawer/index.module.scss b/packages/component-library/src/Drawer/index.module.scss
index 450152cae4..2ee3f40258 100644
--- a/packages/component-library/src/Drawer/index.module.scss
+++ b/packages/component-library/src/Drawer/index.module.scss
@@ -27,6 +27,7 @@
       flex-flow: column nowrap;
       overflow-y: hidden;
     }
+
     @include theme.breakpoint("lg") {
       width: 60%;
     }
diff --git a/packages/component-library/src/MainNavTabs/index.module.scss b/packages/component-library/src/MainNavTabs/index.module.scss
index 1ce2ca5d64..f10cdc3dae 100644
--- a/packages/component-library/src/MainNavTabs/index.module.scss
+++ b/packages/component-library/src/MainNavTabs/index.module.scss
@@ -3,13 +3,16 @@
 .mainNavTabs {
   isolation: isolate;
   gap: theme.spacing(2);
+
   @include theme.row;
 
   .tab {
     width: 100%;
+
     @include theme.breakpoint("md") {
       width: auto;
     }
+
     position: relative;
     outline: none;
 
@@ -43,11 +46,21 @@
         pointer-events: auto;
 
         &[data-hovered] .bubble {
-          background-color: theme.color("button", "solid", "background", "hover");
+          background-color: theme.color(
+            "button",
+            "solid",
+            "background",
+            "hover"
+          );
         }
 
         &[data-pressed] .bubble {
-          background-color: theme.color("button", "solid", "background", "active");
+          background-color: theme.color(
+            "button",
+            "solid",
+            "background",
+            "active"
+          );
         }
       }
     }
diff --git a/packages/component-library/src/Paginator/index.module.scss b/packages/component-library/src/Paginator/index.module.scss
index 5e96b4414d..cd49af2658 100644
--- a/packages/component-library/src/Paginator/index.module.scss
+++ b/packages/component-library/src/Paginator/index.module.scss
@@ -3,13 +3,18 @@
 .paginator {
   display: flex;
   flex-flow: row nowrap;
-  justify-content: space-between;
+  justify-content: center;
+
+  @include theme.breakpoint("lg") {
+    justify-content: space-between;
+  }
 
   .pageSizeSelect {
     display: none;
     flex-flow: row nowrap;
     align-items: center;
     gap: theme.spacing(1);
+
     @include theme.breakpoint("lg") {
       display: flex;
     }
diff --git a/packages/component-library/src/Table/index.module.scss b/packages/component-library/src/Table/index.module.scss
index bcbf293acc..d140c36e9e 100644
--- a/packages/component-library/src/Table/index.module.scss
+++ b/packages/component-library/src/Table/index.module.scss
@@ -4,7 +4,8 @@
   display: none;
   background-color: theme.color("background", "primary");
   position: relative;
-  @include theme.breakpoint("lg") {
+
+  @include theme.breakpoint("md") {
     display: block;
   }
 
@@ -168,11 +169,21 @@
         }
 
         &[data-hovered] .cell {
-          background-color: theme.color("button", "outline", "background", "hover");
+          background-color: theme.color(
+            "button",
+            "outline",
+            "background",
+            "hover"
+          );
         }
 
         &[data-pressed] .cell {
-          background-color: theme.color("button", "outline", "background", "active");
+          background-color: theme.color(
+            "button",
+            "outline",
+            "background",
+            "active"
+          );
         }
       }
     }
diff --git a/packages/component-library/src/theme.scss b/packages/component-library/src/theme.scss
index 1ba5a2e328..1f12d81998 100644
--- a/packages/component-library/src/theme.scss
+++ b/packages/component-library/src/theme.scss
@@ -23,7 +23,7 @@ $font-weight: (
   "semibold": 600,
   "bold": 700,
   "extrabold": 800,
-  "black": 900
+  "black": 900,
 );
 
 @function font-weight($weight) {
@@ -44,7 +44,7 @@ $font-size: (
   "6xl": 3.75rem,
   "7xl": 4.5rem,
   "8xl": 6rem,
-  "9xl": 8rem
+  "9xl": 8rem,
 );
 
 @function font-size($size: "base") {
@@ -57,7 +57,7 @@ $letter-spacing: (
   "normal": 0em,
   "wide": 0.025em,
   "wider": 0.05em,
-  "widest": 0.1em
+  "widest": 0.1em,
 );
 
 @function letter-spacing($spacing: "normal") {
@@ -73,7 +73,7 @@ $border-radius: (
   "xl": 0.75rem,
   "2xl": 1rem,
   "3xl": 1.5rem,
-  "full": 9999px
+  "full": 9999px,
 );
 
 @function border-radius($radius: "base") {
@@ -87,7 +87,7 @@ $breakpoints: (
   "lg": 1024px,
   "xl": 1280px,
   "2xl": 1536px,
-  "3xl": 1720px
+  "3xl": 1720px,
 );
 
 @function breakpoint-old($breakpoint) {
@@ -103,6 +103,7 @@ $breakpoints: (
 @mixin mobile() {
   @media screen and (max-width: breakpoint-old("md")) {
     @content;
+
     background: cyan;
   }
 }
@@ -110,6 +111,7 @@ $breakpoints: (
 @mixin tablet() {
   @media screen and (min-width: breakpoint-old("md")) {
     @content;
+
     background: orange;
   }
 }
@@ -117,6 +119,7 @@ $breakpoints: (
 @mixin desktop() {
   @media screen and (min-width: breakpoint-old("3xl")) {
     @content;
+
     background: pink;
   }
 }
@@ -135,7 +138,7 @@ $color-pallette: (
     700: #334155,
     800: #1e293b,
     900: #0f172a,
-    950: #020617
+    950: #020617,
   ),
   "gray": (
     50: #f9fafb,
@@ -148,7 +151,7 @@ $color-pallette: (
     700: #374151,
     800: #1f2937,
     900: #111827,
-    950: #030712
+    950: #030712,
   ),
   "zinc": (
     50: #fafafa,
@@ -161,7 +164,7 @@ $color-pallette: (
     700: #3f3f46,
     800: #27272a,
     900: #18181b,
-    950: #09090b
+    950: #09090b,
   ),
   "neutral": (
     50: #fafafa,
@@ -174,7 +177,7 @@ $color-pallette: (
     700: #404040,
     800: #262626,
     900: #171717,
-    950: #0a0a0a
+    950: #0a0a0a,
   ),
   "stone": (
     50: #fafaf9,
@@ -187,7 +190,7 @@ $color-pallette: (
     700: #44403c,
     800: #292524,
     900: #1c1917,
-    950: #0c0a09
+    950: #0c0a09,
   ),
   "red": (
     50: #fef2f2,
@@ -200,7 +203,7 @@ $color-pallette: (
     700: #b91c1c,
     800: #991b1b,
     900: #7f1d1d,
-    950: #450a0a
+    950: #450a0a,
   ),
   "orange": (
     50: #fff7ed,
@@ -213,7 +216,7 @@ $color-pallette: (
     700: #c2410c,
     800: #9a3412,
     900: #7c2d12,
-    950: #431407
+    950: #431407,
   ),
   "amber": (
     50: #fffbeb,
@@ -226,7 +229,7 @@ $color-pallette: (
     700: #b45309,
     800: #92400e,
     900: #78350f,
-    950: #451a03
+    950: #451a03,
   ),
   "yellow": (
     50: #fefce8,
@@ -239,7 +242,7 @@ $color-pallette: (
     700: #a16207,
     800: #854d0e,
     900: #713f12,
-    950: #422006
+    950: #422006,
   ),
   "lime": (
     50: #f7fee7,
@@ -252,7 +255,7 @@ $color-pallette: (
     700: #4d7c0f,
     800: #3f6212,
     900: #365314,
-    950: #1a2e05
+    950: #1a2e05,
   ),
   "green": (
     50: #f0fdf4,
@@ -265,7 +268,7 @@ $color-pallette: (
     700: #15803d,
     800: #166534,
     900: #14532d,
-    950: #052e16
+    950: #052e16,
   ),
   "emerald": (
     50: #ecfdf5,
@@ -278,7 +281,7 @@ $color-pallette: (
     700: #047857,
     800: #065f46,
     900: #064e3b,
-    950: #022c22
+    950: #022c22,
   ),
   "teal": (
     50: #f0fdfa,
@@ -291,7 +294,7 @@ $color-pallette: (
     700: #0f766e,
     800: #115e59,
     900: #134e4a,
-    950: #042f2e
+    950: #042f2e,
   ),
   "cyan": (
     50: #ecfeff,
@@ -304,7 +307,7 @@ $color-pallette: (
     700: #0e7490,
     800: #155e75,
     900: #164e63,
-    950: #083344
+    950: #083344,
   ),
   "sky": (
     50: #f0f9ff,
@@ -317,7 +320,7 @@ $color-pallette: (
     700: #0369a1,
     800: #075985,
     900: #0c4a6e,
-    950: #082f49
+    950: #082f49,
   ),
   "blue": (
     50: #eff6ff,
@@ -330,7 +333,7 @@ $color-pallette: (
     700: #1d4ed8,
     800: #1e40af,
     900: #1e3a8a,
-    950: #172554
+    950: #172554,
   ),
   "indigo": (
     50: #eef2ff,
@@ -343,7 +346,7 @@ $color-pallette: (
     700: #4338ca,
     800: #3730a3,
     900: #312e81,
-    950: #1e1b4b
+    950: #1e1b4b,
   ),
   "violet": (
     50: #f5f3ff,
@@ -356,7 +359,7 @@ $color-pallette: (
     700: #6d28d9,
     800: #5b21b6,
     900: #4c1d95,
-    950: #2e1065
+    950: #2e1065,
   ),
   "purple": (
     50: #faf5ff,
@@ -369,7 +372,7 @@ $color-pallette: (
     700: #7e22ce,
     800: #6b21a8,
     900: #581c87,
-    950: #3b0764
+    950: #3b0764,
   ),
   "fuchsia": (
     50: #fdf4ff,
@@ -382,7 +385,7 @@ $color-pallette: (
     700: #a21caf,
     800: #86198f,
     900: #701a75,
-    950: #4a044e
+    950: #4a044e,
   ),
   "pink": (
     50: #fdf2f8,
@@ -395,7 +398,7 @@ $color-pallette: (
     700: #be185d,
     800: #9d174d,
     900: #831843,
-    950: #500724
+    950: #500724,
   ),
   "rose": (
     50: #fff1f2,
@@ -408,7 +411,7 @@ $color-pallette: (
     700: #be123c,
     800: #9f1239,
     900: #881337,
-    950: #4c0519
+    950: #4c0519,
   ),
   "beige": (
     50: #f7f4f4,
@@ -421,7 +424,7 @@ $color-pallette: (
     700: #795c5c,
     800: #664e4e,
     900: #574545,
-    950: #2d2222
+    950: #2d2222,
   ),
   "steel": (
     50: #f8f9fc,
@@ -434,8 +437,8 @@ $color-pallette: (
     700: #333655,
     800: #25253e,
     900: #27253d,
-    950: #100e23
-  )
+    950: #100e23,
+  ),
 );
 
 @function pallette-color($color...) {
@@ -447,123 +450,198 @@ $color: (
   "background": (
     "primary": light-dark(pallette-color("white"), pallette-color("steel", 950)),
     "nav-blur":
-      light-dark(rgb(from pallette-color("white") r g b / 70%), rgb(from pallette-color("steel", 950) r g b / 70%)),
+      light-dark(
+        rgb(from pallette-color("white") r g b / 70%),
+        rgb(from pallette-color("steel", 950) r g b / 70%)
+      ),
     "modal": light-dark(pallette-color("white"), pallette-color("steel", 950)),
-    "secondary": light-dark(pallette-color("beige", 100), pallette-color("steel", 900)),
-    "card-highlight": light-dark(pallette-color("violet", 100), pallette-color("violet", 950)),
-    "card-secondary": light-dark(pallette-color("white"), pallette-color("steel", 950))
-  ),
-  "foreground": light-dark(pallette-color("steel", 900), pallette-color("steel", 50)),
-  "heading": light-dark(pallette-color("steel", 800), pallette-color("steel", 200)),
-  "paragraph": light-dark(pallette-color("steel", 700), pallette-color("steel", 300)),
+    "secondary":
+      light-dark(pallette-color("beige", 100), pallette-color("steel", 900)),
+    "card-highlight":
+      light-dark(pallette-color("violet", 100), pallette-color("violet", 950)),
+    "card-secondary":
+      light-dark(pallette-color("white"), pallette-color("steel", 950)),
+  ),
+  "foreground":
+    light-dark(pallette-color("steel", 900), pallette-color("steel", 50)),
+  "heading":
+    light-dark(pallette-color("steel", 800), pallette-color("steel", 200)),
+  "paragraph":
+    light-dark(pallette-color("steel", 700), pallette-color("steel", 300)),
   "link": (
-    "primary": light-dark(pallette-color("violet", 700), pallette-color("purple", 300)),
-    "normal": light-dark(pallette-color("steel", 800), pallette-color("steel", 50))
-  ),
-  "highlight": light-dark(pallette-color("violet", 600), pallette-color("violet", 500)),
-  "muted": light-dark(pallette-color("stone", 500), pallette-color("steel", 400)),
-  "border": light-dark(pallette-color("stone", 300), pallette-color("steel", 600)),
+    "primary":
+      light-dark(pallette-color("violet", 700), pallette-color("purple", 300)),
+    "normal":
+      light-dark(pallette-color("steel", 800), pallette-color("steel", 50)),
+  ),
+  "highlight":
+    light-dark(pallette-color("violet", 600), pallette-color("violet", 500)),
+  "muted":
+    light-dark(pallette-color("stone", 500), pallette-color("steel", 400)),
+  "border":
+    light-dark(pallette-color("stone", 300), pallette-color("steel", 600)),
   "selection": (
-    "background": light-dark(pallette-color("violet", 600), pallette-color("violet", 400)),
-    "foreground": light-dark(pallette-color("steel", 50), pallette-color("steel", 950))
+    "background":
+      light-dark(pallette-color("violet", 600), pallette-color("violet", 400)),
+    "foreground":
+      light-dark(pallette-color("steel", 50), pallette-color("steel", 950)),
   ),
   "states": (
     "success": (
-      "base": light-dark(pallette-color("emerald", 600), pallette-color("emerald", 500)),
-      "background": light-dark(pallette-color("emerald", 100), pallette-color("emerald", 950)),
-      "normal": light-dark(pallette-color("emerald", 600), pallette-color("emerald", 500)),
+      "base":
+        light-dark(
+          pallette-color("emerald", 600),
+          pallette-color("emerald", 500)
+        ),
+      "background":
+        light-dark(
+          pallette-color("emerald", 100),
+          pallette-color("emerald", 950)
+        ),
+      "normal":
+        light-dark(
+          pallette-color("emerald", 600),
+          pallette-color("emerald", 500)
+        ),
       "hover": pallette-color("emerald", 700),
       "active": pallette-color("emerald", 800),
-      "border": light-dark(pallette-color("emerald", 400), pallette-color("emerald", 800))
+      "border":
+        light-dark(
+          pallette-color("emerald", 400),
+          pallette-color("emerald", 800)
+        ),
     ),
     "error": (
       "base": light-dark(pallette-color("red", 600), pallette-color("red", 400)),
-      "color": light-dark(pallette-color("red", 500), pallette-color("red", 400)),
-      "background": light-dark(pallette-color("red", 100), pallette-color("red", 950)),
+      "color":
+        light-dark(pallette-color("red", 500), pallette-color("red", 400)),
+      "background":
+        light-dark(pallette-color("red", 100), pallette-color("red", 950)),
       "normal": pallette-color("red", 500),
       "hover": pallette-color("red", 600),
       "active": pallette-color("red", 700),
-      "border": light-dark(pallette-color("red", 400), pallette-color("red", 900))
+      "border":
+        light-dark(pallette-color("red", 400), pallette-color("red", 900)),
     ),
     "neutral": (
-      "normal": light-dark(pallette-color("steel", 900), pallette-color("steel", 50)),
-      "border": light-dark(pallette-color("stone", 300), pallette-color("steel", 600)),
-      "background": light-dark(pallette-color("white"), pallette-color("steel", 900))
+      "normal":
+        light-dark(pallette-color("steel", 900), pallette-color("steel", 50)),
+      "border":
+        light-dark(pallette-color("stone", 300), pallette-color("steel", 600)),
+      "background":
+        light-dark(pallette-color("white"), pallette-color("steel", 900)),
     ),
     "info": (
-      "background": light-dark(pallette-color("indigo", 100), pallette-color("indigo", 950)),
+      "background":
+        light-dark(pallette-color("indigo", 100), pallette-color("indigo", 950)),
       "background-opaque":
         light-dark(
           rgb(from pallette-color("indigo", 200) r g b / 80%),
           rgb(from pallette-color("indigo", 950) r g b / 80%)
         ),
-      "icon": light-dark(pallette-color("indigo", 600), pallette-color("indigo", 500)),
-      "normal": light-dark(pallette-color("indigo", 600), pallette-color("indigo", 400)),
-      "border": light-dark(pallette-color("indigo", 400), pallette-color("indigo", 800))
+      "icon":
+        light-dark(pallette-color("indigo", 600), pallette-color("indigo", 500)),
+      "normal":
+        light-dark(pallette-color("indigo", 600), pallette-color("indigo", 400)),
+      "border":
+        light-dark(pallette-color("indigo", 400), pallette-color("indigo", 800)),
     ),
     "warning": (
-      "normal": light-dark(pallette-color("orange", 600), pallette-color("orange", 400)),
-      "background": light-dark(pallette-color("orange", 100), pallette-color("orange", 950)),
-      "border": light-dark(pallette-color("orange", 400), pallette-color("orange", 700))
+      "normal":
+        light-dark(pallette-color("orange", 600), pallette-color("orange", 400)),
+      "background":
+        light-dark(pallette-color("orange", 100), pallette-color("orange", 950)),
+      "border":
+        light-dark(pallette-color("orange", 400), pallette-color("orange", 700)),
     ),
     "yellow": (
       "normal": pallette-color("yellow", 500),
-      "background": light-dark(pallette-color("yellow", 100), pallette-color("yellow", 900))
+      "background":
+        light-dark(pallette-color("yellow", 100), pallette-color("yellow", 900)),
     ),
     "lime": (
       "normal": pallette-color("lime", 500),
-      "background": light-dark(pallette-color("lime", 100), pallette-color("lime", 900))
+      "background":
+        light-dark(pallette-color("lime", 100), pallette-color("lime", 900)),
     ),
     "data": (
-      "normal": light-dark(pallette-color("violet", 600), pallette-color("violet", 400)),
-      "background": light-dark(pallette-color("violet", 100), pallette-color("violet", 950)),
-      "border": light-dark(pallette-color("violet", 200), pallette-color("violet", 800))
-    )
+      "normal":
+        light-dark(pallette-color("violet", 600), pallette-color("violet", 400)),
+      "background":
+        light-dark(pallette-color("violet", 100), pallette-color("violet", 950)),
+      "border":
+        light-dark(pallette-color("violet", 200), pallette-color("violet", 800)),
+    ),
   ),
-  "focus": light-dark(pallette-color("violet", 700), pallette-color("violet", 500)),
+  "focus":
+    light-dark(pallette-color("violet", 700), pallette-color("violet", 500)),
   "focus-dim":
-    light-dark(rgb(from pallette-color("violet", 700) r g b / 30%), rgb(from pallette-color("violet", 500) r g b / 30%)),
+    light-dark(
+      rgb(from pallette-color("violet", 700) r g b / 30%),
+      rgb(from pallette-color("violet", 500) r g b / 30%)
+    ),
   "forms": (
     "input": (
       "hover": (
-        "border": light-dark(pallette-color("stone", 400), pallette-color("steel", 500))
-      )
-    )
+        "border":
+          light-dark(pallette-color("stone", 400), pallette-color("steel", 500)),
+      ),
+    ),
   ),
   "chart": (
     "series": (
-      "primary": light-dark(pallette-color("violet", 500), pallette-color("violet", 400)),
-      "neutral": light-dark(pallette-color("stone", 500), pallette-color("steel", 300))
-    )
+      "primary":
+        light-dark(pallette-color("violet", 500), pallette-color("violet", 400)),
+      "neutral":
+        light-dark(pallette-color("stone", 500), pallette-color("steel", 300)),
+    ),
   ),
   "button": (
     "primary": (
       "foreground": pallette-color("white"),
       "background": (
-        "normal": light-dark(pallette-color("violet", 700), pallette-color("violet", 600)),
-        "hover": light-dark(pallette-color("violet", 800), pallette-color("violet", 700)),
-        "active": light-dark(pallette-color("violet", 900), pallette-color("violet", 800))
-      )
+        "normal":
+          light-dark(
+            pallette-color("violet", 700),
+            pallette-color("violet", 600)
+          ),
+        "hover":
+          light-dark(
+            pallette-color("violet", 800),
+            pallette-color("violet", 700)
+          ),
+        "active":
+          light-dark(
+            pallette-color("violet", 900),
+            pallette-color("violet", 800)
+          ),
+      ),
     ),
     "secondary": (
       "foreground": pallette-color("steel", 900),
       "background": (
         "normal": pallette-color("purple", 200),
         "hover": pallette-color("purple", 300),
-        "active": pallette-color("purple", 400)
-      )
+        "active": pallette-color("purple", 400),
+      ),
     ),
     "solid": (
-      "foreground": light-dark(pallette-color("steel", 50), pallette-color("steel", 900)),
+      "foreground":
+        light-dark(pallette-color("steel", 50), pallette-color("steel", 900)),
       "background": (
-        "normal": light-dark(pallette-color("steel", 900), pallette-color("steel", 50)),
-        "hover": light-dark(pallette-color("steel", 600), pallette-color("steel", 200)),
-        "active": light-dark(pallette-color("steel", 900), pallette-color("steel", 50))
-      )
+        "normal":
+          light-dark(pallette-color("steel", 900), pallette-color("steel", 50)),
+        "hover":
+          light-dark(pallette-color("steel", 600), pallette-color("steel", 200)),
+        "active":
+          light-dark(pallette-color("steel", 900), pallette-color("steel", 50)),
+      ),
     ),
     "outline": (
-      "border": light-dark(pallette-color("stone", 300), pallette-color("steel", 600)),
-      "foreground": light-dark(pallette-color("stone", 900), pallette-color("steel", 50)),
+      "border":
+        light-dark(pallette-color("stone", 300), pallette-color("steel", 600)),
+      "foreground":
+        light-dark(pallette-color("stone", 900), pallette-color("steel", 50)),
       "background": (
         "hover":
           light-dark(
@@ -574,14 +652,16 @@ $color: (
           light-dark(
             rgb(from pallette-color("beige", 950) r g b / 10%),
             rgb(from pallette-color("steel", 50) r g b / 10%)
-          )
-      )
+          ),
+      ),
     ),
     "disabled": (
-      "foreground": light-dark(pallette-color("stone", 400), pallette-color("steel", 400)),
-      "background": light-dark(pallette-color("stone", 200), pallette-color("steel", 600))
-    )
-  )
+      "foreground":
+        light-dark(pallette-color("stone", 400), pallette-color("steel", 400)),
+      "background":
+        light-dark(pallette-color("stone", 200), pallette-color("steel", 600)),
+    ),
+  ),
 );
 
 @function color($color-path...) {
@@ -595,7 +675,7 @@ $button-sizes: (
     "border-radius": border-radius("md"),
     "font-size": font-size("xxs"),
     "icon-size": spacing(4),
-    "gap": spacing(1)
+    "gap": spacing(1),
   ),
   "sm": (
     "padding": spacing(2),
@@ -603,7 +683,7 @@ $button-sizes: (
     "border-radius": border-radius("lg"),
     "font-size": font-size("sm"),
     "icon-size": spacing(5),
-    "gap": spacing(2)
+    "gap": spacing(2),
   ),
   "md": (
     "padding": spacing(3),
@@ -611,7 +691,7 @@ $button-sizes: (
     "border-radius": border-radius("xl"),
     "font-size": font-size("base"),
     "icon-size": spacing(6),
-    "gap": spacing(2)
+    "gap": spacing(2),
   ),
   "lg": (
     "padding": spacing(4),
@@ -619,8 +699,8 @@ $button-sizes: (
     "border-radius": border-radius("2xl"),
     "font-size": font-size("xl"),
     "icon-size": spacing(6),
-    "gap": spacing(3)
-  )
+    "gap": spacing(3),
+  ),
 );
 
 @function button-padding($size, $include-gap) {
@@ -709,21 +789,25 @@ $elevations: (
       0px 42px 17px 0px rgb(112 66 206 / 3%),
       0px 24px 14px 0px rgb(112 66 206 / 8%),
       0px 11px 11px 0px rgb(112 66 206 / 14%),
-      0px 3px 6px 0px rgb(112 66 206 / 17%)
-    )
+      0px 3px 6px 0px rgb(112 66 206 / 17%),
+    ),
   ),
   default: (
     1: (
       0px 4px 6px -4px rgb(from black r g b / 10%),
-      0px 10px 15px -3px rgb(from black r g b / 10%)
+      0px 10px 15px -3px rgb(from black r g b / 10%),
     ),
     2: (
-      0px 29px 12px 0px light-dark(rgb(from #564848 r g b / 2%), rgb(from black r g b / 8%)),
-      0px 16px 10px 0px light-dark(rgb(from #564848 r g b / 6%), rgb(from black r g b / 12%)),
-      0px 7px 7px 0px light-dark(rgb(from #564848 r g b / 12%), rgb(from black r g b / 20%)),
-      0px 2px 4px 0px light-dark(rgb(from #564848 r g b / 14%), rgb(from black r g b / 30%))
-    )
-  )
+      0px 29px 12px 0px
+        light-dark(rgb(from #564848 r g b / 2%), rgb(from black r g b / 8%)),
+      0px 16px 10px 0px
+        light-dark(rgb(from #564848 r g b / 6%), rgb(from black r g b / 12%)),
+      0px 7px 7px 0px
+        light-dark(rgb(from #564848 r g b / 12%), rgb(from black r g b / 20%)),
+      0px 2px 4px 0px
+        light-dark(rgb(from #564848 r g b / 14%), rgb(from black r g b / 30%)),
+    ),
+  ),
 );
 
 @mixin elevation($elevation...) {

From c30735099ac4a6a4bf4c15814bbc9af60f3f30a5 Mon Sep 17 00:00:00 2001
From: PartyParrotGreg <2233348+partyparrotgreg@users.noreply.github.com>
Date: Fri, 24 Jan 2025 18:52:58 +0000
Subject: [PATCH 10/13] feat(insights): add CardTitle component to enhance
 PriceFeeds layout with improved title and icon integration

---
 .../components/CardTitle/index.module.scss    |  23 ++++
 .../src/components/CardTitle/index.tsx        |  20 +++
 .../src/components/PriceFeeds/index.tsx       |   7 +-
 .../PriceFeeds/price-feeds-card.tsx           | 128 +++++++++---------
 .../src/Card/index.module.scss                |  59 ++++----
 packages/component-library/src/Card/index.tsx |   7 +-
 .../src/Drawer/index.module.scss              |   4 +-
 .../src/Table/index.module.scss               |  16 +--
 8 files changed, 146 insertions(+), 118 deletions(-)
 create mode 100644 apps/insights/src/components/CardTitle/index.module.scss
 create mode 100644 apps/insights/src/components/CardTitle/index.tsx

diff --git a/apps/insights/src/components/CardTitle/index.module.scss b/apps/insights/src/components/CardTitle/index.module.scss
new file mode 100644
index 0000000000..85febdb1da
--- /dev/null
+++ b/apps/insights/src/components/CardTitle/index.module.scss
@@ -0,0 +1,23 @@
+@use "@pythnetwork/component-library/theme";
+
+.cardTitle {
+    display: flex;
+    flex-flow: row nowrap;
+    gap: theme.spacing(3);
+    align-items: center;
+    justify-content: start;
+    flex-grow: 1;
+    .title {
+        color: theme.color("heading");
+        display: flex;
+        flex-flow: row nowrap;
+        gap: theme.spacing(3);
+        align-items: center;
+        @include theme.text("lg", "semibold");
+    }
+    .icon {
+        font-size: theme.spacing(6);
+        height: theme.spacing(6);
+        color: theme.color("button", "primary", "background", "normal");
+    }
+}
diff --git a/apps/insights/src/components/CardTitle/index.tsx b/apps/insights/src/components/CardTitle/index.tsx
new file mode 100644
index 0000000000..902235689e
--- /dev/null
+++ b/apps/insights/src/components/CardTitle/index.tsx
@@ -0,0 +1,20 @@
+import clsx from "clsx";
+import type { ComponentProps, ReactNode } from "react";
+
+import styles from "./index.module.scss";
+
+type CardTitleProps = {
+    children: ReactNode;
+    icon?: ReactNode | undefined;
+    badge?: ReactNode;
+} & ComponentProps<"div">;
+
+export const CardTitle = ({ children, icon, badge, ...props }: CardTitleProps) => {
+    return (
+        <div className={clsx(styles.cardTitle, props.className)} {...props}>
+            {icon && <div className={styles.icon}>{icon}</div>}
+            <h2 className={styles.title}>{children}</h2>
+            {badge}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/apps/insights/src/components/PriceFeeds/index.tsx b/apps/insights/src/components/PriceFeeds/index.tsx
index fd9a797ea0..cb87a7804a 100644
--- a/apps/insights/src/components/PriceFeeds/index.tsx
+++ b/apps/insights/src/components/PriceFeeds/index.tsx
@@ -19,6 +19,7 @@ import styles from "./index.module.scss";
 import { PriceFeedsCard } from "./price-feeds-card";
 import { Cluster, getData } from "../../services/pyth";
 import { priceFeeds as priceFeedsStaticConfig } from "../../static-data/price-feeds";
+import { CardTitle } from "../CardTitle";
 import { YesterdaysPricesProvider, ChangePercent } from "../ChangePercent";
 import { LivePrice } from "../LivePrices";
 import { PriceFeedIcon } from "../PriceFeedIcon";
@@ -85,16 +86,14 @@ export const PriceFeeds = async () => {
           )}
         >
           <FeaturedFeedsCard
-            title="Recently Added"
-            icon={<StackPlus />}
+            title={<CardTitle icon={<StackPlus />}>Recently added</CardTitle>}
             feeds={featuredRecentlyAdded}
             showPrices
             linkFeeds
           />
         </YesterdaysPricesProvider>
         <FeaturedFeedsCard
-          title="Coming Soon"
-          icon={<ClockCountdown />}
+          title={<CardTitle icon={<ClockCountdown />}>Coming soon</CardTitle>}
           feeds={featuredComingSoon}
           action={
             <DrawerTrigger>
diff --git a/apps/insights/src/components/PriceFeeds/price-feeds-card.tsx b/apps/insights/src/components/PriceFeeds/price-feeds-card.tsx
index 5290c9c139..3d632740ed 100644
--- a/apps/insights/src/components/PriceFeeds/price-feeds-card.tsx
+++ b/apps/insights/src/components/PriceFeeds/price-feeds-card.tsx
@@ -16,9 +16,9 @@ import { useQueryState, parseAsString } from "nuqs";
 import { type ReactNode, Suspense, useCallback, useMemo } from "react";
 import { useFilter, useCollator } from "react-aria";
 
-import styles from "./index.module.scss";
 import { PriceFeedItems } from "./price-feed-items";
 import { useQueryParamFilterPagination } from "../../use-query-param-filter-pagination";
+import { CardTitle } from "../CardTitle";
 import { FeedKey } from "../FeedKey";
 import {
   SKELETON_WIDTH,
@@ -197,49 +197,45 @@ type PriceFeedsCardContents = Pick<Props, "id"> &
   (
     | { isLoading: true }
     | {
-        isLoading?: false;
-        numResults: number;
-        search: string;
-        sortDescriptor: SortDescriptor;
-        onSortChange: (newSort: SortDescriptor) => void;
-        assetClass: string;
-        assetClasses: string[];
-        numPages: number;
-        page: number;
-        pageSize: number;
-        onSearchChange: (newSearch: string) => void;
-        onAssetClassChange: (newAssetClass: string) => void;
-        onPageSizeChange: (newPageSize: number) => void;
-        onPageChange: (newPage: number) => void;
-        mkPageLink: (page: number) => string;
-        rows: RowConfig<
-          | "priceFeedName"
-          | "assetClass"
-          | "priceFeedId"
-          | "price"
-          | "confidenceInterval"
-          | "exponent"
-          | "numPublishers"
-        >[];
-      }
+      isLoading?: false;
+      numResults: number;
+      search: string;
+      sortDescriptor: SortDescriptor;
+      onSortChange: (newSort: SortDescriptor) => void;
+      assetClass: string;
+      assetClasses: string[];
+      numPages: number;
+      page: number;
+      pageSize: number;
+      onSearchChange: (newSearch: string) => void;
+      onAssetClassChange: (newAssetClass: string) => void;
+      onPageSizeChange: (newPageSize: number) => void;
+      onPageChange: (newPage: number) => void;
+      mkPageLink: (page: number) => string;
+      rows: RowConfig<
+        | "priceFeedName"
+        | "assetClass"
+        | "priceFeedId"
+        | "price"
+        | "confidenceInterval"
+        | "exponent"
+        | "numPublishers"
+      >[];
+    }
   );
 
 const PriceFeedsCardContents = ({ id, ...props }: PriceFeedsCardContents) => (
   <Card
     id={id}
-    icon={<ChartLine />}
     title={
-      <>
-        <span>Price Feeds</span>
-        {!props.isLoading && (
-          <Badge style="filled" variant="neutral" size="md">
-            {props.numResults}
-          </Badge>
-        )}
-      </>
+      <CardTitle icon={<ChartLine />} badge={!props.isLoading && (
+        <Badge style="filled" variant="neutral" size="md">
+          {props.numResults}
+        </Badge>
+      )}>Price Feeds</CardTitle>
     }
     toolbar={
-      <div className={styles.toolbarContainer}>
+      <>
         <SearchInput
           size="sm"
           width={50}
@@ -247,9 +243,9 @@ const PriceFeedsCardContents = ({ id, ...props }: PriceFeedsCardContents) => (
           {...(props.isLoading
             ? { isPending: true, isDisabled: true }
             : {
-                value: props.search,
-                onChange: props.onSearchChange,
-              })}
+              value: props.search,
+              onChange: props.onSearchChange,
+            })}
         />
         <Select<string>
           label="Asset Class"
@@ -259,20 +255,20 @@ const PriceFeedsCardContents = ({ id, ...props }: PriceFeedsCardContents) => (
           {...(props.isLoading
             ? { isPending: true, options: [], buttonLabel: "Asset Class" }
             : {
-                optionGroups: [
-                  { name: "All", options: [""] },
-                  { name: "Asset classes", options: props.assetClasses },
-                ],
-                hideGroupLabel: true,
-                show: (value) => (value === "" ? "All" : value),
-                placement: "bottom end",
-                buttonLabel:
-                  props.assetClass === "" ? "Asset Class" : props.assetClass,
-                selectedKey: props.assetClass,
-                onSelectionChange: props.onAssetClassChange,
-              })}
+              optionGroups: [
+                { name: "All", options: [""] },
+                { name: "Asset classes", options: props.assetClasses },
+              ],
+              hideGroupLabel: true,
+              show: (value) => (value === "" ? "All" : value),
+              placement: "bottom end",
+              buttonLabel:
+                props.assetClass === "" ? "Asset Class" : props.assetClass,
+              selectedKey: props.assetClass,
+              onSelectionChange: props.onAssetClassChange,
+            })}
         />
-      </div>
+      </>
     }
     {...(!props.isLoading && {
       footer: (
@@ -348,21 +344,21 @@ const PriceFeedsCardContents = ({ id, ...props }: PriceFeedsCardContents) => (
       ]}
       {...(props.isLoading
         ? {
-            isLoading: true,
-          }
+          isLoading: true,
+        }
         : {
-            rows: props.rows,
-            sortDescriptor: props.sortDescriptor,
-            onSortChange: props.onSortChange,
-            emptyState: (
-              <NoResults
-                query={props.search}
-                onClearSearch={() => {
-                  props.onSearchChange("");
-                }}
-              />
-            ),
-          })}
+          rows: props.rows,
+          sortDescriptor: props.sortDescriptor,
+          onSortChange: props.onSortChange,
+          emptyState: (
+            <NoResults
+              query={props.search}
+              onClearSearch={() => {
+                props.onSearchChange("");
+              }}
+            />
+          ),
+        })}
     />
   </Card>
 );
diff --git a/packages/component-library/src/Card/index.module.scss b/packages/component-library/src/Card/index.module.scss
index ca6034e176..b92295ad67 100644
--- a/packages/component-library/src/Card/index.module.scss
+++ b/packages/component-library/src/Card/index.module.scss
@@ -33,50 +33,53 @@
   }
 
   .header {
-    display: flex;
-    position: relative;
-    flex-direction: column;
-    padding: theme.spacing(4) theme.spacing(3);
-    gap: theme.spacing(4);
+    display: grid;
+    gap: theme.spacing(2);
+    grid-template-areas:
+      "title action"
+      "toolbar toolbar";
+    grid-template-columns: 1fr min-content;
+    padding: theme.spacing(3);
+    gap: theme.spacing(3);
 
     @include theme.breakpoint("lg") {
+      grid-template-columns: 1fr min-content min-content;
+      grid-template-areas: "title toolbar action";
+      align-items: flex-start;
       flex-direction: row;
-      padding: theme.spacing(3) theme.spacing(4);
+      padding: 0 theme.spacing(2);
+      height: theme.spacing(12);
     }
 
     .title {
-      color: theme.color("heading");
-      display: flex;
-      flex-flow: row nowrap;
-      gap: theme.spacing(3);
-      align-items: center;
-      flex-grow: 1;
-
-      @include theme.text("lg", "medium");
-
-      .icon {
-        font-size: theme.spacing(6);
-        height: theme.spacing(6);
-        color: theme.color("button", "primary", "background", "normal");
-      }
+      grid-area: title;
+      align-self: center;
     }
 
     .toolbar {
+      align-self: center;
+      grid-area: toolbar;
       &:empty {
         display: none;
       }
-
+      gap: theme.spacing(2);
       display: flex;
     }
 
     .action {
-      display: grid;
-      place-items: center;
-      height: 100%;
-      padding: 0 theme.spacing(2);
-      position: absolute;
-      top: 0;
-      right: 0;
+      align-self: center;
+      grid-area: action;
+      // display: grid;
+      // place-items: center;
+      // height: 100%;
+      // padding: 0 theme.spacing(2);
+      // position: absolute;
+      // top: 0;
+      // right: 0;
+      @include theme.breakpoint("md") {
+        position: static;
+        padding: 0;
+      }
     }
   }
 
diff --git a/packages/component-library/src/Card/index.tsx b/packages/component-library/src/Card/index.tsx
index ad48fc86e9..2d1b646552 100644
--- a/packages/component-library/src/Card/index.tsx
+++ b/packages/component-library/src/Card/index.tsx
@@ -71,11 +71,8 @@ const cardProps = <T extends ElementType>({
       <div className={styles.cardHoverBackground} />
       {(Boolean(icon) || Boolean(title) || Boolean(toolbar)) && (
         <div className={styles.header}>
-          <h2 className={styles.title}>
-            {icon && <div className={styles.icon}>{icon}</div>}
-            {title}
-          </h2>
-          <div className={styles.toolbar}>{toolbar}</div>
+          <div className={styles.title}>{title}</div>
+          {toolbar && <div className={styles.toolbar}>{toolbar}</div>}
           {action && <div className={styles.action}>{action}</div>}
         </div>
       )}
diff --git a/packages/component-library/src/Drawer/index.module.scss b/packages/component-library/src/Drawer/index.module.scss
index 2ee3f40258..039a26e6d5 100644
--- a/packages/component-library/src/Drawer/index.module.scss
+++ b/packages/component-library/src/Drawer/index.module.scss
@@ -21,7 +21,7 @@
       width: 80%;
       max-width: theme.spacing(160);
       outline: none;
-      border: 1px solid theme.color("border");
+      border: 1px solid theme.color("background", "secondary");
       border-radius: theme.border-radius("3xl");
       display: flex;
       flex-flow: column nowrap;
@@ -41,7 +41,7 @@
       align-items: center;
       color: theme.color("heading");
       flex: none;
-      border-bottom: 1px solid theme.color("border");
+      border-bottom: 1px solid theme.color("background", "secondary");
 
       @include theme.breakpoint("sm") {
         padding: theme.spacing(4);
diff --git a/packages/component-library/src/Table/index.module.scss b/packages/component-library/src/Table/index.module.scss
index d140c36e9e..0b2d17abd8 100644
--- a/packages/component-library/src/Table/index.module.scss
+++ b/packages/component-library/src/Table/index.module.scss
@@ -88,7 +88,7 @@
 
       .cell {
         position: relative;
-        border-bottom: 1px solid theme.color("border");
+        border-bottom: 1px solid theme.color("background", "secondary");
         font-weight: theme.font-weight("medium");
 
         .divider {
@@ -169,21 +169,11 @@
         }
 
         &[data-hovered] .cell {
-          background-color: theme.color(
-            "button",
-            "outline",
-            "background",
-            "hover"
-          );
+          background-color: theme.color("button", "outline", "background", "hover");
         }
 
         &[data-pressed] .cell {
-          background-color: theme.color(
-            "button",
-            "outline",
-            "background",
-            "active"
-          );
+          background-color: theme.color("button", "outline", "background", "active");
         }
       }
     }

From 9bf27b68c0e145e25eab7eea266dd16cca826c28 Mon Sep 17 00:00:00 2001
From: PartyParrotGreg <2233348+partyparrotgreg@users.noreply.github.com>
Date: Mon, 27 Jan 2025 13:22:20 +0000
Subject: [PATCH 11/13] feat(insights): implement PageTitle component to unify
 header styling across various components for consistent branding and
 usability

---
 .../components/CardTitle/index.module.scss    |   8 +-
 .../src/components/Overview/index.tsx         |   3 +-
 .../PageTitle/page-title.module.scss          |   7 +
 .../src/components/PageTitle/page-title.tsx   |   9 +
 .../src/components/PriceFeeds/index.tsx       |   3 +-
 .../src/components/Publisher/layout.tsx       | 447 +++++++++---------
 .../src/components/Publisher/performance.tsx  |   7 +-
 .../components/Publishers/index.module.scss   |  48 +-
 .../src/components/Publishers/index.tsx       | 103 ++--
 .../components/Publishers/publishers-card.tsx |  87 ++--
 .../src/components/Root/header.module.scss    |   3 -
 .../src/Badge/index.module.scss               |   5 +-
 .../src/Card/index.module.scss                |  30 +-
 .../src/MainNavTabs/index.module.scss         |  23 +-
 14 files changed, 398 insertions(+), 385 deletions(-)
 create mode 100644 apps/insights/src/components/PageTitle/page-title.module.scss
 create mode 100644 apps/insights/src/components/PageTitle/page-title.tsx

diff --git a/apps/insights/src/components/CardTitle/index.module.scss b/apps/insights/src/components/CardTitle/index.module.scss
index 85febdb1da..5ce8f4e6de 100644
--- a/apps/insights/src/components/CardTitle/index.module.scss
+++ b/apps/insights/src/components/CardTitle/index.module.scss
@@ -5,8 +5,7 @@
     flex-flow: row nowrap;
     gap: theme.spacing(3);
     align-items: center;
-    justify-content: start;
-    flex-grow: 1;
+    justify-content: flex-start;
     .title {
         color: theme.color("heading");
         display: flex;
@@ -14,6 +13,11 @@
         gap: theme.spacing(3);
         align-items: center;
         @include theme.text("lg", "semibold");
+        // trunctate text
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        height: 2rem;
     }
     .icon {
         font-size: theme.spacing(6);
diff --git a/apps/insights/src/components/Overview/index.tsx b/apps/insights/src/components/Overview/index.tsx
index 3185cbd16d..57e8538934 100644
--- a/apps/insights/src/components/Overview/index.tsx
+++ b/apps/insights/src/components/Overview/index.tsx
@@ -1,7 +1,8 @@
 import styles from "./index.module.scss";
+import { PageTitle } from "../PageTitle/page-title";
 
 export const Overview = () => (
   <div className={styles.overview}>
-    <h1 className={styles.header}>Overview</h1>
+    <PageTitle>Overview</PageTitle>
   </div>
 );
diff --git a/apps/insights/src/components/PageTitle/page-title.module.scss b/apps/insights/src/components/PageTitle/page-title.module.scss
new file mode 100644
index 0000000000..59bfa5fdfc
--- /dev/null
+++ b/apps/insights/src/components/PageTitle/page-title.module.scss
@@ -0,0 +1,7 @@
+@use "@pythnetwork/component-library/theme";
+
+.pageTitle {
+    @include theme.h3;
+    color: theme.color("heading");
+    font-weight: theme.font-weight("semibold");
+}
diff --git a/apps/insights/src/components/PageTitle/page-title.tsx b/apps/insights/src/components/PageTitle/page-title.tsx
new file mode 100644
index 0000000000..df5e3028e9
--- /dev/null
+++ b/apps/insights/src/components/PageTitle/page-title.tsx
@@ -0,0 +1,9 @@
+import type { ReactNode } from "react"
+
+import styles from "./page-title.module.scss"
+
+export const PageTitle = ({ children }: { children: ReactNode }) => {
+    return (
+        <h1 className={styles.pageTitle}>{children}</h1>
+    )
+}
\ No newline at end of file
diff --git a/apps/insights/src/components/PriceFeeds/index.tsx b/apps/insights/src/components/PriceFeeds/index.tsx
index cb87a7804a..6dc8b78d3e 100644
--- a/apps/insights/src/components/PriceFeeds/index.tsx
+++ b/apps/insights/src/components/PriceFeeds/index.tsx
@@ -22,6 +22,7 @@ import { priceFeeds as priceFeedsStaticConfig } from "../../static-data/price-fe
 import { CardTitle } from "../CardTitle";
 import { YesterdaysPricesProvider, ChangePercent } from "../ChangePercent";
 import { LivePrice } from "../LivePrices";
+import { PageTitle } from "../PageTitle/page-title";
 import { PriceFeedIcon } from "../PriceFeedIcon";
 import { PriceFeedTag } from "../PriceFeedTag";
 import { Stats } from "../Stats";
@@ -48,7 +49,7 @@ export const PriceFeeds = async () => {
 
   return (
     <div className={styles.priceFeeds}>
-      <h1 className={styles.header}>Price Feeds</h1>
+      <PageTitle>Price Feeds</PageTitle>
       <div className={styles.body}>
         <Stats>
           <StatCard
diff --git a/apps/insights/src/components/Publisher/layout.tsx b/apps/insights/src/components/Publisher/layout.tsx
index fc7cfc7bae..55df87dd79 100644
--- a/apps/insights/src/components/Publisher/layout.tsx
+++ b/apps/insights/src/components/Publisher/layout.tsx
@@ -40,6 +40,7 @@ import { PublisherKey } from "../PublisherKey";
 import { PublisherTag } from "../PublisherTag";
 import { ScoreHistory } from "../ScoreHistory";
 import { SemicircleMeter } from "../SemicircleMeter";
+import { Stats } from "../Stats";
 import { TabPanel, TabRoot, Tabs } from "../Tabs";
 import { TokenIcon } from "../TokenIcon";
 
@@ -110,264 +111,266 @@ export const PublishersLayout = async ({ children, params }: Props) => {
             />
           </div>
           <section className={styles.stats}>
-            <ChartCard
-              variant="primary"
-              header="Publisher Ranking"
-              lineClassName={styles.primarySparkChartLine}
-              corner={
-                <AlertTrigger>
-                  <Button
-                    variant="ghost"
-                    size="xs"
-                    beforeIcon={(props) => <Info weight="fill" {...props} />}
-                    rounded
-                    hideText
-                    className={styles.publisherRankingExplainButton ?? ""}
-                  >
-                    Explain Publisher Ranking
-                  </Button>
-                  <Alert title="Publisher Ranking" icon={<Lightbulb />}>
-                    <p className={styles.publisherRankingExplainDescription}>
-                      Each <b>Publisher</b> receives a <b>Ranking</b> which is
-                      derived from the number of price feeds the{" "}
-                      <b>Publisher</b> is actively publishing.
-                    </p>
-                  </Alert>
-                </AlertTrigger>
-              }
-              data={rankingHistory.map(({ timestamp, rank }) => ({
-                x: timestamp,
-                y: rank,
-                displayX: (
-                  <span className={styles.activeDate}>
-                    <FormattedDate value={timestamp} />
-                  </span>
-                ),
-              }))}
-              stat={currentRanking.rank}
-              {...(previousRanking && {
-                miniStat: (
-                  <ChangeValue
-                    direction={getChangeDirection(
-                      currentRanking.rank,
-                      previousRanking.rank,
-                    )}
-                  >
-                    {Math.abs(currentRanking.rank - previousRanking.rank)}
-                  </ChangeValue>
-                ),
-              })}
-            />
-            <DrawerTrigger>
+            <Stats>
               <ChartCard
-                header="Median Score"
-                chartClassName={styles.medianScoreChart}
-                lineClassName={styles.secondarySparkChartLine}
-                corner={<Info weight="fill" />}
-                data={medianScoreHistory.map(({ time, score }) => ({
-                  x: time,
-                  y: score,
+                variant="primary"
+                header="Publisher Ranking"
+                lineClassName={styles.primarySparkChartLine}
+                corner={
+                  <AlertTrigger>
+                    <Button
+                      variant="ghost"
+                      size="xs"
+                      beforeIcon={(props) => <Info weight="fill" {...props} />}
+                      rounded
+                      hideText
+                      className={styles.publisherRankingExplainButton ?? ""}
+                    >
+                      Explain Publisher Ranking
+                    </Button>
+                    <Alert title="Publisher Ranking" icon={<Lightbulb />}>
+                      <p className={styles.publisherRankingExplainDescription}>
+                        Each <b>Publisher</b> receives a <b>Ranking</b> which is
+                        derived from the number of price feeds the{" "}
+                        <b>Publisher</b> is actively publishing.
+                      </p>
+                    </Alert>
+                  </AlertTrigger>
+                }
+                data={rankingHistory.map(({ timestamp, rank }) => ({
+                  x: timestamp,
+                  y: rank,
                   displayX: (
                     <span className={styles.activeDate}>
-                      <FormattedDate value={time} />
+                      <FormattedDate value={timestamp} />
                     </span>
                   ),
-                  displayY: (
-                    <FormattedNumber
-                      maximumSignificantDigits={5}
-                      value={score}
-                    />
-                  ),
                 }))}
-                stat={
-                  <FormattedNumber
-                    maximumSignificantDigits={5}
-                    value={currentMedianScore.score}
-                  />
-                }
-                {...(previousMedianScore && {
+                stat={currentRanking.rank}
+                {...(previousRanking && {
                   miniStat: (
                     <ChangeValue
                       direction={getChangeDirection(
-                        previousMedianScore.score,
-                        currentMedianScore.score,
+                        currentRanking.rank,
+                        previousRanking.rank,
                       )}
                     >
-                      <FormattedNumber
-                        maximumSignificantDigits={2}
-                        value={
-                          (100 *
-                            Math.abs(
-                              currentMedianScore.score -
-                                previousMedianScore.score,
-                            )) /
-                          previousMedianScore.score
-                        }
-                      />
-                      %
+                      {Math.abs(currentRanking.rank - previousRanking.rank)}
                     </ChangeValue>
                   ),
                 })}
               />
-              <Drawer
-                title="Median Score"
-                className={styles.medianScoreDrawer ?? ""}
-                bodyClassName={styles.medianScoreDrawerBody}
-                footerClassName={styles.medianScoreDrawerFooter}
-                footer={
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    href="https://docs.pyth.network/home/oracle-integrity-staking/publisher-quality-ranking"
-                    target="_blank"
-                    beforeIcon={BookOpenText}
-                  >
-                    Documentation
-                  </Button>
-                }
-              >
-                <ScoreHistory isMedian scoreHistory={medianScoreHistory} />
-                <InfoBox icon={<Ranking />} header="Publisher Score">
-                  Each price feed a publisher provides has an associated score,
-                  which is determined by the component{"'"}s uptime, price
-                  deviation, and staleness. This panel shows the median for each
-                  score across all price feeds published by this publisher, as
-                  well as the overall median score across all those feeds.
-                </InfoBox>
-              </Drawer>
-            </DrawerTrigger>
-            <ActiveFeedsCard
-              publisherKey={key}
-              activeFeeds={
-                priceFeeds.filter((feed) => feed.status === Status.Active)
-                  .length
-              }
-              totalFeeds={totalFeedsCount}
-            />
-            <DrawerTrigger>
-              <StatCard
-                header="OIS Pool Allocation"
-                stat={
-                  <span
-                    className={styles.oisAllocation}
-                    data-is-overallocated={
-                      Number(oisStats.poolUtilization) > oisStats.maxPoolSize
-                        ? ""
-                        : undefined
-                    }
-                  >
+              <DrawerTrigger>
+                <ChartCard
+                  header="Median Score"
+                  chartClassName={styles.medianScoreChart}
+                  lineClassName={styles.secondarySparkChartLine}
+                  corner={<Info weight="fill" />}
+                  data={medianScoreHistory.map(({ time, score }) => ({
+                    x: time,
+                    y: score,
+                    displayX: (
+                      <span className={styles.activeDate}>
+                        <FormattedDate value={time} />
+                      </span>
+                    ),
+                    displayY: (
+                      <FormattedNumber
+                        maximumSignificantDigits={5}
+                        value={score}
+                      />
+                    ),
+                  }))}
+                  stat={
                     <FormattedNumber
-                      maximumFractionDigits={2}
-                      value={
-                        (100 * Number(oisStats.poolUtilization)) /
-                        oisStats.maxPoolSize
-                      }
+                      maximumSignificantDigits={5}
+                      value={currentMedianScore.score}
                     />
-                    %
-                  </span>
-                }
-                corner={<Info weight="fill" />}
-              >
-                <Meter
-                  value={Number(oisStats.poolUtilization)}
-                  maxValue={oisStats.maxPoolSize}
-                  label="OIS Pool"
-                  startLabel={
-                    <span className={styles.tokens}>
-                      <TokenIcon />
-                      <span>
-                        <FormattedTokens tokens={oisStats.poolUtilization} />
-                      </span>
-                    </span>
                   }
-                  endLabel={
-                    <span className={styles.tokens}>
-                      <TokenIcon />
-                      <span>
-                        <FormattedTokens
-                          tokens={BigInt(oisStats.maxPoolSize)}
+                  {...(previousMedianScore && {
+                    miniStat: (
+                      <ChangeValue
+                        direction={getChangeDirection(
+                          previousMedianScore.score,
+                          currentMedianScore.score,
+                        )}
+                      >
+                        <FormattedNumber
+                          maximumSignificantDigits={2}
+                          value={
+                            (100 *
+                              Math.abs(
+                                currentMedianScore.score -
+                                previousMedianScore.score,
+                              )) /
+                            previousMedianScore.score
+                          }
                         />
-                      </span>
-                    </span>
-                  }
+                        %
+                      </ChangeValue>
+                    ),
+                  })}
                 />
-              </StatCard>
-              <Drawer
-                title="OIS Pool Allocation"
-                className={styles.oisDrawer ?? ""}
-                bodyClassName={styles.oisDrawerBody}
-                footerClassName={styles.oisDrawerFooter}
-                footer={
-                  <>
-                    <Button
-                      variant="solid"
-                      size="sm"
-                      href="https://staking.pyth.network"
-                      target="_blank"
-                      beforeIcon={Browsers}
-                    >
-                      Open Staking App
-                    </Button>
+                <Drawer
+                  title="Median Score"
+                  className={styles.medianScoreDrawer ?? ""}
+                  bodyClassName={styles.medianScoreDrawerBody}
+                  footerClassName={styles.medianScoreDrawerFooter}
+                  footer={
                     <Button
                       variant="outline"
                       size="sm"
-                      href="https://docs.pyth.network/home/oracle-integrity-staking"
+                      href="https://docs.pyth.network/home/oracle-integrity-staking/publisher-quality-ranking"
                       target="_blank"
                       beforeIcon={BookOpenText}
                     >
                       Documentation
                     </Button>
-                  </>
-                }
-              >
-                <SemicircleMeter
-                  width={420}
-                  height={420}
-                  value={Number(oisStats.poolUtilization)}
-                  maxValue={oisStats.maxPoolSize}
-                  className={styles.oisMeter ?? ""}
-                  aria-label="OIS Pool Utilization"
+                  }
                 >
-                  <TokenIcon className={styles.oisMeterIcon} />
-                  <div className={styles.oisMeterLabel}>OIS Pool</div>
-                </SemicircleMeter>
+                  <ScoreHistory isMedian scoreHistory={medianScoreHistory} />
+                  <InfoBox icon={<Ranking />} header="Publisher Score">
+                    Each price feed a publisher provides has an associated score,
+                    which is determined by the component{"'"}s uptime, price
+                    deviation, and staleness. This panel shows the median for each
+                    score across all price feeds published by this publisher, as
+                    well as the overall median score across all those feeds.
+                  </InfoBox>
+                </Drawer>
+              </DrawerTrigger>
+              <ActiveFeedsCard
+                publisherKey={key}
+                activeFeeds={
+                  priceFeeds.filter((feed) => feed.status === Status.Active)
+                    .length
+                }
+                totalFeeds={totalFeedsCount}
+              />
+              <DrawerTrigger>
                 <StatCard
-                  header="Total Staked"
-                  variant="secondary"
-                  nonInteractive
+                  header="OIS Pool Allocation"
                   stat={
-                    <>
-                      <TokenIcon />
-                      <FormattedTokens tokens={oisStats.poolUtilization} />
-                    </>
+                    <span
+                      className={styles.oisAllocation}
+                      data-is-overallocated={
+                        Number(oisStats.poolUtilization) > oisStats.maxPoolSize
+                          ? ""
+                          : undefined
+                      }
+                    >
+                      <FormattedNumber
+                        maximumFractionDigits={2}
+                        value={
+                          (100 * Number(oisStats.poolUtilization)) /
+                          oisStats.maxPoolSize
+                        }
+                      />
+                      %
+                    </span>
                   }
-                />
-                <StatCard
-                  header="Pool Capacity"
-                  variant="secondary"
-                  nonInteractive
-                  stat={
+                  corner={<Info weight="fill" />}
+                >
+                  <Meter
+                    value={Number(oisStats.poolUtilization)}
+                    maxValue={oisStats.maxPoolSize}
+                    label="OIS Pool"
+                    startLabel={
+                      <span className={styles.tokens}>
+                        <TokenIcon />
+                        <span>
+                          <FormattedTokens tokens={oisStats.poolUtilization} />
+                        </span>
+                      </span>
+                    }
+                    endLabel={
+                      <span className={styles.tokens}>
+                        <TokenIcon />
+                        <span>
+                          <FormattedTokens
+                            tokens={BigInt(oisStats.maxPoolSize)}
+                          />
+                        </span>
+                      </span>
+                    }
+                  />
+                </StatCard>
+                <Drawer
+                  title="OIS Pool Allocation"
+                  className={styles.oisDrawer ?? ""}
+                  bodyClassName={styles.oisDrawerBody}
+                  footerClassName={styles.oisDrawerFooter}
+                  footer={
                     <>
-                      <TokenIcon />
-                      <FormattedTokens tokens={BigInt(oisStats.maxPoolSize)} />
+                      <Button
+                        variant="solid"
+                        size="sm"
+                        href="https://staking.pyth.network"
+                        target="_blank"
+                        beforeIcon={Browsers}
+                      >
+                        Open Staking App
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        href="https://docs.pyth.network/home/oracle-integrity-staking"
+                        target="_blank"
+                        beforeIcon={BookOpenText}
+                      >
+                        Documentation
+                      </Button>
                     </>
                   }
-                />
-                <OisApyHistory apyHistory={oisStats.apyHistory ?? []} />
-                <InfoBox
-                  icon={<ShieldChevron />}
-                  header="Oracle Integrity Staking (OIS)"
                 >
-                  OIS allows anyone to help secure Pyth and protect DeFi.
-                  Through decentralized staking rewards and slashing, OIS
-                  incentivizes Pyth publishers to maintain high-quality data
-                  contributions. PYTH holders can stake to publishers to further
-                  reinforce oracle security. Rewards are programmatically
-                  distributed to high quality publishers and the stakers
-                  supporting them to strengthen oracle integrity.
-                </InfoBox>
-              </Drawer>
-            </DrawerTrigger>
+                  <SemicircleMeter
+                    width={420}
+                    height={420}
+                    value={Number(oisStats.poolUtilization)}
+                    maxValue={oisStats.maxPoolSize}
+                    className={styles.oisMeter ?? ""}
+                    aria-label="OIS Pool Utilization"
+                  >
+                    <TokenIcon className={styles.oisMeterIcon} />
+                    <div className={styles.oisMeterLabel}>OIS Pool</div>
+                  </SemicircleMeter>
+                  <StatCard
+                    header="Total Staked"
+                    variant="secondary"
+                    nonInteractive
+                    stat={
+                      <>
+                        <TokenIcon />
+                        <FormattedTokens tokens={oisStats.poolUtilization} />
+                      </>
+                    }
+                  />
+                  <StatCard
+                    header="Pool Capacity"
+                    variant="secondary"
+                    nonInteractive
+                    stat={
+                      <>
+                        <TokenIcon />
+                        <FormattedTokens tokens={BigInt(oisStats.maxPoolSize)} />
+                      </>
+                    }
+                  />
+                  <OisApyHistory apyHistory={oisStats.apyHistory ?? []} />
+                  <InfoBox
+                    icon={<ShieldChevron />}
+                    header="Oracle Integrity Staking (OIS)"
+                  >
+                    OIS allows anyone to help secure Pyth and protect DeFi.
+                    Through decentralized staking rewards and slashing, OIS
+                    incentivizes Pyth publishers to maintain high-quality data
+                    contributions. PYTH holders can stake to publishers to further
+                    reinforce oracle security. Rewards are programmatically
+                    distributed to high quality publishers and the stakers
+                    supporting them to strengthen oracle integrity.
+                  </InfoBox>
+                </Drawer>
+              </DrawerTrigger>
+            </Stats>
           </section>
         </section>
         <TabRoot>
diff --git a/apps/insights/src/components/Publisher/performance.tsx b/apps/insights/src/components/Publisher/performance.tsx
index 37a629f23c..1d70171bf8 100644
--- a/apps/insights/src/components/Publisher/performance.tsx
+++ b/apps/insights/src/components/Publisher/performance.tsx
@@ -14,6 +14,7 @@ import { TopFeedsTable } from "./top-feeds-table";
 import { getPublishers } from "../../services/clickhouse";
 import { Cluster, getTotalFeedCount } from "../../services/pyth";
 import { Status } from "../../status";
+import { CardTitle } from "../CardTitle";
 import { NoResults } from "../NoResults";
 import { PriceFeedIcon } from "../PriceFeedIcon";
 import { PriceFeedTag } from "../PriceFeedTag";
@@ -47,7 +48,7 @@ export const Performance = async ({ params }: Props) => {
     notFound()
   ) : (
     <div className={styles.performance}>
-      <Card icon={<Broadcast />} title="Publishers Ranking">
+      <Card icon={<Broadcast />} title={<CardTitle>Publisher Ranking</CardTitle>}>
         <Table
           rounded
           fill
@@ -118,7 +119,7 @@ export const Performance = async ({ params }: Props) => {
           })}
         />
       </Card>
-      <Card icon={<Network />} title="High-Performing Feeds">
+      <Card title={<CardTitle icon={<Network />}>High-performing Feeds</CardTitle>}>
         <TopFeedsTable
           label="High-Performing Feeds"
           publisherScoreWidth={PUBLISHER_SCORE_WIDTH}
@@ -138,7 +139,7 @@ export const Performance = async ({ params }: Props) => {
           )}
         />
       </Card>
-      <Card icon={<Network />} title="Low-Performing Feeds">
+      <Card title={<CardTitle icon={<Network />}>Low-performing Feeds</CardTitle>}>
         <TopFeedsTable
           label="Low-Performing Feeds"
           publisherScoreWidth={PUBLISHER_SCORE_WIDTH}
diff --git a/apps/insights/src/components/Publishers/index.module.scss b/apps/insights/src/components/Publishers/index.module.scss
index a7568592a6..4dcf7628ad 100644
--- a/apps/insights/src/components/Publishers/index.module.scss
+++ b/apps/insights/src/components/Publishers/index.module.scss
@@ -4,28 +4,30 @@
 .publishers {
   @include theme.max-width;
 
-  .header {
-    @include theme.h3;
-
-    color: theme.color("heading");
-    font-weight: theme.font-weight("semibold");
-  }
-
   .body {
     display: flex;
-    flex-flow: row nowrap;
-    gap: theme.spacing(12);
-    align-items: flex-start;
-    margin-top: theme.spacing(6);
+    flex-flow: column nowrap;
+    width: 100%;
+
+    @include theme.breakpoint("lg") {
+      flex-flow: row nowrap;
+      align-items: flex-start;
+      gap: theme.spacing(12);
+      margin-top: theme.spacing(6);
+    }
 
     .stats {
-      display: grid;
-      grid-template-columns: repeat(2, minmax(0, 1fr));
+      outline: 1px solid red;
+      display: flex;
+      flex-flow: column;
       gap: theme.spacing(4);
-      align-items: center;
-      width: 40%;
-      position: sticky;
-      top: root.$header-height;
+      align-items: stretch;
+      flex-grow: 1;
+
+      @include theme.breakpoint("lg") {
+        position: sticky;
+        top: root.$header-height;
+      }
 
       .averageMedianScoreExplainButton {
         margin-top: -#{theme.button-padding("xs", false)};
@@ -33,8 +35,6 @@
       }
 
       .oisCard {
-        grid-column: span 2 / span 2;
-
         .oisPool {
           .title {
             font-size: theme.font-size("sm");
@@ -59,9 +59,15 @@
         }
 
         .oisStats {
-          display: grid;
-          grid-template-columns: repeat(2, minmax(0, 1fr));
+          display: flex;
+          flex-flow: column;
           gap: theme.spacing(1);
+
+          @include theme.breakpoint("lg") {
+            column-span: 2;
+            display: grid;
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+          }
         }
       }
     }
diff --git a/apps/insights/src/components/Publishers/index.tsx b/apps/insights/src/components/Publishers/index.tsx
index 1d53cc051c..151808514c 100644
--- a/apps/insights/src/components/Publishers/index.tsx
+++ b/apps/insights/src/components/Publishers/index.tsx
@@ -17,10 +17,13 @@ import {
   getClaimableRewards,
   getDistributedRewards,
 } from "../../services/staking";
+import { CardTitle } from "../CardTitle";
 import { FormattedTokens } from "../FormattedTokens";
+import { PageTitle } from "../PageTitle/page-title";
 import { PublisherIcon } from "../PublisherIcon";
 import { PublisherTag } from "../PublisherTag";
 import { SemicircleMeter, Label } from "../SemicircleMeter";
+import { Stats } from "../Stats";
 import { TokenIcon } from "../TokenIcon";
 
 const INITIAL_REWARD_POOL_SIZE = 60_000_000_000_000n;
@@ -34,63 +37,65 @@ export const Publishers = async () => {
 
   return (
     <div className={styles.publishers}>
-      <h1 className={styles.header}>Publishers</h1>
+      <PageTitle>Publishers</PageTitle>
       <div className={styles.body}>
         <section className={styles.stats}>
-          <StatCard
-            variant="primary"
-            header="Active Publishers"
-            stat={publishers.length}
-          />
-          <StatCard
-            header="Avg. Median Score"
-            corner={
-              <AlertTrigger>
-                <Button
-                  variant="ghost"
-                  size="xs"
-                  beforeIcon={(props) => <Info weight="fill" {...props} />}
-                  rounded
-                  hideText
-                  className={styles.averageMedianScoreExplainButton ?? ""}
-                >
-                  Explain Average Median Score
-                </Button>
-                <Alert title="Average Median Score" icon={<Lightbulb />}>
-                  <p className={styles.averageMedianScoreDescription}>
-                    Each <b>Price Feed Component</b> that a <b>Publisher</b>{" "}
-                    provides has an associated <b>Score</b>, which is determined
-                    by that component{"'"}s <b>Uptime</b>,{" "}
-                    <b>Price Deviation</b>, and <b>Staleness</b>. The publisher
-                    {"'"}s <b>Median Score</b> measures the 50th percentile of
-                    the <b>Score</b> across all of that publisher{"'"}s{" "}
-                    <b>Price Feed Components</b>. The{" "}
-                    <b>Average Median Score</b> is the average of the{" "}
-                    <b>Median Scores</b> of all publishers who contribute to the
-                    Pyth Network.
-                  </p>
+          <Stats>
+            <StatCard
+              variant="primary"
+              header="Active Publishers"
+              stat={publishers.length}
+            />
+            <StatCard
+              header="Avg. Median Score"
+              corner={
+                <AlertTrigger>
                   <Button
+                    variant="ghost"
                     size="xs"
-                    variant="solid"
-                    href="https://docs.pyth.network/home/oracle-integrity-staking/publisher-quality-ranking"
-                    target="_blank"
+                    beforeIcon={(props) => <Info weight="fill" {...props} />}
+                    rounded
+                    hideText
+                    className={styles.averageMedianScoreExplainButton ?? ""}
                   >
-                    Learn more
+                    Explain Average Median Score
                   </Button>
-                </Alert>
-              </AlertTrigger>
-            }
-            stat={(
-              publishers.reduce(
-                (sum, publisher) => sum + publisher.medianScore,
-                0,
-              ) / publishers.length
-            ).toFixed(2)}
-          />
+                  <Alert title="Average Median Score" icon={<Lightbulb />}>
+                    <p className={styles.averageMedianScoreDescription}>
+                      Each <b>Price Feed Component</b> that a <b>Publisher</b>{" "}
+                      provides has an associated <b>Score</b>, which is determined
+                      by that component{"'"}s <b>Uptime</b>,{" "}
+                      <b>Price Deviation</b>, and <b>Staleness</b>. The publisher
+                      {"'"}s <b>Median Score</b> measures the 50th percentile of
+                      the <b>Score</b> across all of that publisher{"'"}s{" "}
+                      <b>Price Feed Components</b>. The{" "}
+                      <b>Average Median Score</b> is the average of the{" "}
+                      <b>Median Scores</b> of all publishers who contribute to the
+                      Pyth Network.
+                    </p>
+                    <Button
+                      size="xs"
+                      variant="solid"
+                      href="https://docs.pyth.network/home/oracle-integrity-staking/publisher-quality-ranking"
+                      target="_blank"
+                    >
+                      Learn more
+                    </Button>
+                  </Alert>
+                </AlertTrigger>
+              }
+              stat={(
+                publishers.reduce(
+                  (sum, publisher) => sum + publisher.medianScore,
+                  0,
+                ) / publishers.length
+              ).toFixed(2)}
+            />
+          </Stats>
           <Card
-            title="Oracle Integrity Staking (OIS)"
+            title={<CardTitle>OIS</CardTitle>}
             className={styles.oisCard}
-            toolbar={
+            action={
               <Button
                 href="https://staking.pyth.network"
                 target="_blank"
diff --git a/apps/insights/src/components/Publishers/publishers-card.tsx b/apps/insights/src/components/Publishers/publishers-card.tsx
index 0d421575d3..b0fa44b758 100644
--- a/apps/insights/src/components/Publishers/publishers-card.tsx
+++ b/apps/insights/src/components/Publishers/publishers-card.tsx
@@ -14,6 +14,7 @@ import { type ReactNode, Suspense, useMemo } from "react";
 import { useFilter, useCollator } from "react-aria";
 
 import { useQueryParamFilterPagination } from "../../use-query-param-filter-pagination";
+import { CardTitle } from "../CardTitle";
 import { NoResults } from "../NoResults";
 import { PublisherTag } from "../PublisherTag";
 import { Ranking } from "../Ranking";
@@ -35,9 +36,9 @@ type Publisher = {
   inactiveFeeds: number;
   medianScore: number;
 } & (
-  | { name: string; icon: ReactNode }
-  | { name?: undefined; icon?: undefined }
-);
+    | { name: string; icon: ReactNode }
+    | { name?: undefined; icon?: undefined }
+  );
 
 export const PublishersCard = ({ publishers, ...props }: Props) => (
   <Suspense fallback={<PublishersCardContents isLoading {...props} />}>
@@ -155,22 +156,22 @@ type PublishersCardContentsProps = Pick<
   (
     | { isLoading: true }
     | {
-        isLoading?: false;
-        numResults: number;
-        search: string;
-        sortDescriptor: SortDescriptor;
-        numPages: number;
-        page: number;
-        pageSize: number;
-        onSearchChange: (newSearch: string) => void;
-        onSortChange: (newSort: SortDescriptor) => void;
-        onPageSizeChange: (newPageSize: number) => void;
-        onPageChange: (newPage: number) => void;
-        mkPageLink: (page: number) => string;
-        rows: RowConfig<
-          "ranking" | "name" | "activeFeeds" | "inactiveFeeds" | "medianScore"
-        >[];
-      }
+      isLoading?: false;
+      numResults: number;
+      search: string;
+      sortDescriptor: SortDescriptor;
+      numPages: number;
+      page: number;
+      pageSize: number;
+      onSearchChange: (newSearch: string) => void;
+      onSortChange: (newSort: SortDescriptor) => void;
+      onPageSizeChange: (newPageSize: number) => void;
+      onPageChange: (newPage: number) => void;
+      mkPageLink: (page: number) => string;
+      rows: RowConfig<
+        "ranking" | "name" | "activeFeeds" | "inactiveFeeds" | "medianScore"
+      >[];
+    }
   );
 
 const PublishersCardContents = ({
@@ -180,16 +181,12 @@ const PublishersCardContents = ({
 }: PublishersCardContentsProps) => (
   <Card
     className={className}
-    icon={<Broadcast />}
     title={
-      <>
-        <span>Publishers</span>
-        {!props.isLoading && (
-          <Badge style="filled" variant="neutral" size="md">
-            {props.numResults}
-          </Badge>
-        )}
-      </>
+      <CardTitle badge={!props.isLoading && (
+        <Badge style="filled" variant="neutral" size="md">
+          {props.numResults}
+        </Badge>
+      )} icon={<Broadcast />}>Publishers</CardTitle>
     }
     toolbar={
       <SearchInput
@@ -199,9 +196,9 @@ const PublishersCardContents = ({
         {...(props.isLoading
           ? { isPending: true, isDisabled: true }
           : {
-              value: props.search,
-              onChange: props.onSearchChange,
-            })}
+            value: props.search,
+            onChange: props.onSearchChange,
+          })}
       />
     }
     {...(!props.isLoading && {
@@ -264,21 +261,21 @@ const PublishersCardContents = ({
       ]}
       {...(props.isLoading
         ? {
-            isLoading: true,
-          }
+          isLoading: true,
+        }
         : {
-            rows: props.rows,
-            sortDescriptor: props.sortDescriptor,
-            onSortChange: props.onSortChange,
-            emptyState: (
-              <NoResults
-                query={props.search}
-                onClearSearch={() => {
-                  props.onSearchChange("");
-                }}
-              />
-            ),
-          })}
+          rows: props.rows,
+          sortDescriptor: props.sortDescriptor,
+          onSortChange: props.onSortChange,
+          emptyState: (
+            <NoResults
+              query={props.search}
+              onClearSearch={() => {
+                props.onSearchChange("");
+              }}
+            />
+          ),
+        })}
     />
   </Card>
 );
diff --git a/apps/insights/src/components/Root/header.module.scss b/apps/insights/src/components/Root/header.module.scss
index b1a6a20149..fea43a9ca9 100644
--- a/apps/insights/src/components/Root/header.module.scss
+++ b/apps/insights/src/components/Root/header.module.scss
@@ -5,8 +5,6 @@
   top: 0;
   width: 100%;
   background-color: theme.color("background", "primary");
-  border-bottom: 1px solid theme.color("background", "secondary");
-
   // TODO: This causes that navigation is not fixed
   // backdrop-filter: blur(32px);
 
@@ -87,7 +85,6 @@
   .desktopSupport,
   .desktopDocs {
     display: none;
-
     @include theme.breakpoint("md") {
       display: block;
     }
diff --git a/packages/component-library/src/Badge/index.module.scss b/packages/component-library/src/Badge/index.module.scss
index 8ce2c49fe9..891a98dbfd 100644
--- a/packages/component-library/src/Badge/index.module.scss
+++ b/packages/component-library/src/Badge/index.module.scss
@@ -1,7 +1,9 @@
 @use "../theme";
 
 .badge {
-  display: inline flow-root;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   border-radius: theme.border-radius("3xl");
   transition-property: color, background-color, border-color;
   transition-duration: 100ms;
@@ -9,6 +11,7 @@
   white-space: nowrap;
   border-width: 1px;
   border-style: solid;
+  flex-shrink: 1;
 
   &[data-size="xs"] {
     line-height: theme.spacing(4);
diff --git a/packages/component-library/src/Card/index.module.scss b/packages/component-library/src/Card/index.module.scss
index b92295ad67..7c6b5a010c 100644
--- a/packages/component-library/src/Card/index.module.scss
+++ b/packages/component-library/src/Card/index.module.scss
@@ -33,32 +33,22 @@
   }
 
   .header {
-    display: grid;
-    gap: theme.spacing(2);
-    grid-template-areas:
-      "title action"
-      "toolbar toolbar";
-    grid-template-columns: 1fr min-content;
+    position: relative;
+    display: flex;
     padding: theme.spacing(3);
     gap: theme.spacing(3);
+    flex-direction: column;
+    justify-content: flex-start;
 
     @include theme.breakpoint("lg") {
-      grid-template-columns: 1fr min-content min-content;
-      grid-template-areas: "title toolbar action";
-      align-items: flex-start;
-      flex-direction: row;
       padding: 0 theme.spacing(2);
       height: theme.spacing(12);
-    }
-
-    .title {
-      grid-area: title;
-      align-self: center;
+      justify-content: space-between;
+      flex-flow: row nowrap;
+      align-items: center;
     }
 
     .toolbar {
-      align-self: center;
-      grid-area: toolbar;
       &:empty {
         display: none;
       }
@@ -73,9 +63,9 @@
       // place-items: center;
       // height: 100%;
       // padding: 0 theme.spacing(2);
-      // position: absolute;
-      // top: 0;
-      // right: 0;
+      position: absolute;
+      top: theme.spacing(2.5);
+      right: theme.spacing(2.5);
       @include theme.breakpoint("md") {
         position: static;
         padding: 0;
diff --git a/packages/component-library/src/MainNavTabs/index.module.scss b/packages/component-library/src/MainNavTabs/index.module.scss
index f10cdc3dae..c82cc45c65 100644
--- a/packages/component-library/src/MainNavTabs/index.module.scss
+++ b/packages/component-library/src/MainNavTabs/index.module.scss
@@ -1,21 +1,20 @@
 @use "../theme";
 
 .mainNavTabs {
-  isolation: isolate;
   gap: theme.spacing(2);
+  z-index: 1;
 
   @include theme.row;
 
   .tab {
     width: 100%;
-
+    position: relative;
+    outline: none;
+    z-index: 1;
     @include theme.breakpoint("md") {
       width: auto;
     }
 
-    position: relative;
-    outline: none;
-
     .bubble {
       position: absolute;
       inset: 0;
@@ -46,21 +45,11 @@
         pointer-events: auto;
 
         &[data-hovered] .bubble {
-          background-color: theme.color(
-            "button",
-            "solid",
-            "background",
-            "hover"
-          );
+          background-color: theme.color("button", "solid", "background", "hover");
         }
 
         &[data-pressed] .bubble {
-          background-color: theme.color(
-            "button",
-            "solid",
-            "background",
-            "active"
-          );
+          background-color: theme.color("button", "solid", "background", "active");
         }
       }
     }

From c6a6c6f4ea91860da3c164be6be53a2c0017de17 Mon Sep 17 00:00:00 2001
From: PartyParrotGreg <2233348+partyparrotgreg@users.noreply.github.com>
Date: Mon, 27 Jan 2025 13:28:12 +0000
Subject: [PATCH 12/13] style(insights): update CardTitle and Publishers styles
 for improved text responsiveness and remove unnecessary outline in Publishers

---
 .../src/components/CardTitle/index.module.scss         | 10 ++++------
 .../src/components/Publishers/index.module.scss        |  1 -
 packages/component-library/src/Card/index.module.scss  |  4 ++--
 3 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/apps/insights/src/components/CardTitle/index.module.scss b/apps/insights/src/components/CardTitle/index.module.scss
index 5ce8f4e6de..ccb19f4b02 100644
--- a/apps/insights/src/components/CardTitle/index.module.scss
+++ b/apps/insights/src/components/CardTitle/index.module.scss
@@ -12,12 +12,10 @@
         flex-flow: row nowrap;
         gap: theme.spacing(3);
         align-items: center;
-        @include theme.text("lg", "semibold");
-        // trunctate text
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        height: 2rem;
+        @include theme.text("base", "semibold");
+        @include theme.breakpoint("md") {
+            @include theme.text("lg", "semibold");
+        }
     }
     .icon {
         font-size: theme.spacing(6);
diff --git a/apps/insights/src/components/Publishers/index.module.scss b/apps/insights/src/components/Publishers/index.module.scss
index 4dcf7628ad..310e441b4d 100644
--- a/apps/insights/src/components/Publishers/index.module.scss
+++ b/apps/insights/src/components/Publishers/index.module.scss
@@ -17,7 +17,6 @@
     }
 
     .stats {
-      outline: 1px solid red;
       display: flex;
       flex-flow: column;
       gap: theme.spacing(4);
diff --git a/packages/component-library/src/Card/index.module.scss b/packages/component-library/src/Card/index.module.scss
index 7c6b5a010c..dd79ee1e76 100644
--- a/packages/component-library/src/Card/index.module.scss
+++ b/packages/component-library/src/Card/index.module.scss
@@ -64,8 +64,8 @@
       // height: 100%;
       // padding: 0 theme.spacing(2);
       position: absolute;
-      top: theme.spacing(2.5);
-      right: theme.spacing(2.5);
+      top: theme.spacing(1.5);
+      right: theme.spacing(1.5);
       @include theme.breakpoint("md") {
         position: static;
         padding: 0;

From 60b85d301875e292c15509ab28959f8dab744bce Mon Sep 17 00:00:00 2001
From: PartyParrotGreg <2233348+partyparrotgreg@users.noreply.github.com>
Date: Mon, 27 Jan 2025 21:50:14 +0000
Subject: [PATCH 13/13] feat(insights): refactor Overview & PriceFeeds
 components to use PageLayout for consistent structure and remove deprecated
 PageTitle component

---
 .../src/components/Overview/index.tsx         |  11 +-
 .../PageLayout/page-layout.module.scss        |  24 +++
 .../src/components/PageLayout/page-layout.tsx |  15 ++
 .../PageTitle/page-title.module.scss          |   7 -
 .../src/components/PageTitle/page-title.tsx   |   9 -
 .../components/PriceFeeds/index.module.scss   |  97 ++++------
 .../src/components/PriceFeeds/index.tsx       | 173 +++++++++---------
 .../components/Publisher/layout.module.scss   |   3 +-
 .../Publisher/performance.module.scss         |  11 +-
 .../components/Publishers/index.module.scss   | 107 ++++++-----
 .../src/components/Publishers/index.tsx       |   7 +-
 11 files changed, 229 insertions(+), 235 deletions(-)
 create mode 100644 apps/insights/src/components/PageLayout/page-layout.module.scss
 create mode 100644 apps/insights/src/components/PageLayout/page-layout.tsx
 delete mode 100644 apps/insights/src/components/PageTitle/page-title.module.scss
 delete mode 100644 apps/insights/src/components/PageTitle/page-title.tsx

diff --git a/apps/insights/src/components/Overview/index.tsx b/apps/insights/src/components/Overview/index.tsx
index 57e8538934..1d9bf083d2 100644
--- a/apps/insights/src/components/Overview/index.tsx
+++ b/apps/insights/src/components/Overview/index.tsx
@@ -1,8 +1,9 @@
-import styles from "./index.module.scss";
-import { PageTitle } from "../PageTitle/page-title";
+import { Card } from "@pythnetwork/component-library/Card";
+
+import { PageLayout } from "../PageLayout/page-layout";
 
 export const Overview = () => (
-  <div className={styles.overview}>
-    <PageTitle>Overview</PageTitle>
-  </div>
+  <PageLayout title={"Overview"}>
+    <Card title="Overview"></Card>
+  </PageLayout>
 );
diff --git a/apps/insights/src/components/PageLayout/page-layout.module.scss b/apps/insights/src/components/PageLayout/page-layout.module.scss
new file mode 100644
index 0000000000..442bb61b8e
--- /dev/null
+++ b/apps/insights/src/components/PageLayout/page-layout.module.scss
@@ -0,0 +1,24 @@
+@use "@pythnetwork/component-library/theme";
+
+.pageLayout {
+    @include theme.max-width;
+    display: flex;
+    gap: theme.spacing(6);
+    flex-direction: column;
+
+    .pageTitleContainer {
+        display: flex;
+        flex-flow: row nowrap;
+        gap: theme.spacing(3);
+        width: 100%;
+        align-items: center;
+        justify-content: space-between;
+
+        .pageTitle {
+            @include theme.h3;
+            color: theme.color("heading");
+            font-weight: theme.font-weight("semibold");
+            flex-grow: 1;
+        }
+    }
+}
diff --git a/apps/insights/src/components/PageLayout/page-layout.tsx b/apps/insights/src/components/PageLayout/page-layout.tsx
new file mode 100644
index 0000000000..b70e04c255
--- /dev/null
+++ b/apps/insights/src/components/PageLayout/page-layout.tsx
@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+
+import styles from "./page-layout.module.scss";
+
+export const PageLayout = ({ children, title, actions }: { children: ReactNode; title: ReactNode, actions?: ReactNode }) => {
+    return (
+        <div className={styles.pageLayout}>
+            <div className={styles.pageTitleContainer}>
+                <h1 className={styles.pageTitle}>{title}</h1>
+                {actions && <div className={styles.actions}>{actions}</div>}
+            </div>
+            {children}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/apps/insights/src/components/PageTitle/page-title.module.scss b/apps/insights/src/components/PageTitle/page-title.module.scss
deleted file mode 100644
index 59bfa5fdfc..0000000000
--- a/apps/insights/src/components/PageTitle/page-title.module.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@use "@pythnetwork/component-library/theme";
-
-.pageTitle {
-    @include theme.h3;
-    color: theme.color("heading");
-    font-weight: theme.font-weight("semibold");
-}
diff --git a/apps/insights/src/components/PageTitle/page-title.tsx b/apps/insights/src/components/PageTitle/page-title.tsx
deleted file mode 100644
index df5e3028e9..0000000000
--- a/apps/insights/src/components/PageTitle/page-title.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { ReactNode } from "react"
-
-import styles from "./page-title.module.scss"
-
-export const PageTitle = ({ children }: { children: ReactNode }) => {
-    return (
-        <h1 className={styles.pageTitle}>{children}</h1>
-    )
-}
\ No newline at end of file
diff --git a/apps/insights/src/components/PriceFeeds/index.module.scss b/apps/insights/src/components/PriceFeeds/index.module.scss
index 83d0b32be3..dd081b90e7 100644
--- a/apps/insights/src/components/PriceFeeds/index.module.scss
+++ b/apps/insights/src/components/PriceFeeds/index.module.scss
@@ -1,76 +1,53 @@
 @use "@pythnetwork/component-library/theme";
 
-.priceFeeds {
-  @include theme.max-width;
+.toolbarContainer {
+  display: flex;
+  flex-flow: row nowrap;
+  gap: theme.spacing(2);
+}
 
-  .header {
-    @include theme.h3;
+.feedKey {
+  margin: 0 -#{theme.button-padding("xs", true)};
+}
 
-    color: theme.color("heading");
-    font-weight: theme.font-weight("semibold");
-  }
+.featuredFeeds {
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: stretch;
 
-  .toolbarContainer {
-    display: flex;
+  @include theme.breakpoint("md") {
     flex-flow: row nowrap;
-    gap: theme.spacing(2);
+
+    & > * {
+      flex: 1 1 0px;
+      width: 0;
+    }
   }
+}
+
+.featuredFeeds {
+  gap: theme.spacing(1);
 
-  .body {
+  .feedCardContents {
     display: flex;
     flex-flow: column nowrap;
+    justify-content: space-between;
+    align-items: stretch;
+    padding: theme.spacing(3);
     gap: theme.spacing(6);
-    margin-top: theme.spacing(6);
-
-    .feedKey {
-      margin: 0 -#{theme.button-padding("xs", true)};
-    }
 
-    .featuredFeeds,
-    .stats {
+    .prices {
       display: flex;
-      flex-flow: column nowrap;
-      align-items: stretch;
-
-      @include theme.breakpoint("md") {
-        flex-flow: row nowrap;
-
-        & > * {
-          flex: 1 1 0px;
-          width: 0;
-        }
-      }
-    }
-
-    .stats {
-      gap: theme.spacing(6);
-    }
-
-    .featuredFeeds {
-      gap: theme.spacing(1);
-
-      .feedCardContents {
-        display: flex;
-        flex-flow: column nowrap;
-        justify-content: space-between;
-        align-items: stretch;
-        padding: theme.spacing(3);
-        gap: theme.spacing(6);
-
-        .prices {
-          display: flex;
-          flex-flow: row nowrap;
-          justify-content: space-between;
-          align-items: center;
-          color: theme.color("heading");
-          font-weight: theme.font-weight("medium");
-          line-height: 1;
-          font-size: theme.font-size("base");
-
-          .changePercent {
-            font-size: theme.font-size("sm");
-          }
-        }
+      flex-flow: row nowrap;
+      justify-content: space-between;
+      align-items: center;
+      color: theme.color("heading");
+      font-weight: theme.font-weight("medium");
+      line-height: 1;
+      font-size: theme.font-size("base");
+
+      .changePercent {
+        font-size: theme.font-size("sm");
       }
     }
   }
diff --git a/apps/insights/src/components/PriceFeeds/index.tsx b/apps/insights/src/components/PriceFeeds/index.tsx
index 6dc8b78d3e..05f5d1f35a 100644
--- a/apps/insights/src/components/PriceFeeds/index.tsx
+++ b/apps/insights/src/components/PriceFeeds/index.tsx
@@ -22,7 +22,7 @@ import { priceFeeds as priceFeedsStaticConfig } from "../../static-data/price-fe
 import { CardTitle } from "../CardTitle";
 import { YesterdaysPricesProvider, ChangePercent } from "../ChangePercent";
 import { LivePrice } from "../LivePrices";
-import { PageTitle } from "../PageTitle/page-title";
+import { PageLayout } from "../PageLayout/page-layout";
 import { PriceFeedIcon } from "../PriceFeedIcon";
 import { PriceFeedTag } from "../PriceFeedTag";
 import { Stats } from "../Stats";
@@ -48,97 +48,94 @@ export const PriceFeeds = async () => {
   );
 
   return (
-    <div className={styles.priceFeeds}>
-      <PageTitle>Price Feeds</PageTitle>
-      <div className={styles.body}>
-        <Stats>
-          <StatCard
-            variant="primary"
-            header="Active Feeds"
-            stat={priceFeeds.activeFeeds.length}
-            href={`#${PRICE_FEEDS_ANCHOR}`}
-            corner={<ArrowLineDown />}
-          />
-          <StatCard
-            header="Frequency"
-            stat={priceFeedsStaticConfig.updateFrequency}
-          />
+    <PageLayout title={"Price Feeds"}>
+      <Stats>
+        <StatCard
+          variant="primary"
+          header="Active Feeds"
+          stat={priceFeeds.activeFeeds.length}
+          href={`#${PRICE_FEEDS_ANCHOR}`}
+          corner={<ArrowLineDown />}
+        />
+        <StatCard
+          header="Frequency"
+          stat={priceFeedsStaticConfig.updateFrequency}
+        />
+        <StatCard
+          header="Active Chains"
+          stat={priceFeedsStaticConfig.activeChains}
+          href="https://docs.pyth.network/price-feeds/contract-addresses"
+          target="_blank"
+          corner={<ArrowSquareOut weight="fill" />}
+        />
+        <AssetClassesDrawer numFeedsByAssetClass={numFeedsByAssetClass}>
           <StatCard
-            header="Active Chains"
-            stat={priceFeedsStaticConfig.activeChains}
-            href="https://docs.pyth.network/price-feeds/contract-addresses"
-            target="_blank"
-            corner={<ArrowSquareOut weight="fill" />}
+            header="Asset Classes"
+            stat={Object.keys(numFeedsByAssetClass).length}
+            corner={<Info weight="fill" />}
           />
-          <AssetClassesDrawer numFeedsByAssetClass={numFeedsByAssetClass}>
-            <StatCard
-              header="Asset Classes"
-              stat={Object.keys(numFeedsByAssetClass).length}
-              corner={<Info weight="fill" />}
-            />
-          </AssetClassesDrawer>
-        </Stats>
-        <YesterdaysPricesProvider
-          feeds={Object.fromEntries(
-            featuredRecentlyAdded.map(({ symbol, product }) => [
-              symbol,
-              product.price_account,
-            ]),
-          )}
-        >
-          <FeaturedFeedsCard
-            title={<CardTitle icon={<StackPlus />}>Recently added</CardTitle>}
-            feeds={featuredRecentlyAdded}
-            showPrices
-            linkFeeds
-          />
-        </YesterdaysPricesProvider>
+        </AssetClassesDrawer>
+      </Stats>
+      <YesterdaysPricesProvider
+        feeds={Object.fromEntries(
+          featuredRecentlyAdded.map(({ symbol, product }) => [
+            symbol,
+            product.price_account,
+          ]),
+        )}
+      >
         <FeaturedFeedsCard
-          title={<CardTitle icon={<ClockCountdown />}>Coming soon</CardTitle>}
-          feeds={featuredComingSoon}
-          action={
-            <DrawerTrigger>
-              <Button size="sm" variant="outline">
-                Show all
-              </Button>
-              <Drawer
-                fill
-                className={styles.comingSoonCard ?? ""}
-                title={
-                  <>
-                    <span>Coming Soon</span>
-                    <Badge>{priceFeeds.comingSoon.length}</Badge>
-                  </>
-                }
-              >
-                <ComingSoonList
-                  comingSoonFeeds={priceFeeds.comingSoon.map((feed) => ({
-                    id: feed.product.price_account,
-                    displaySymbol: feed.product.display_symbol,
-                    assetClass: feed.product.asset_type,
-                    icon: (
-                      <PriceFeedIcon symbol={feed.product.display_symbol} />
-                    ),
-                  }))}
-                />
-              </Drawer>
-            </DrawerTrigger>
-          }
-        />
-        <PriceFeedsCard
-          id={PRICE_FEEDS_ANCHOR}
-          priceFeeds={priceFeeds.activeFeeds.map((feed) => ({
-            symbol: feed.symbol,
-            icon: <PriceFeedIcon symbol={feed.product.display_symbol} />,
-            id: feed.product.price_account,
-            displaySymbol: feed.product.display_symbol,
-            assetClass: feed.product.asset_type,
-            exponent: feed.price.exponent,
-            numQuoters: feed.price.numQuoters,
-          }))}
+          title={<CardTitle icon={<StackPlus />}>Recently added</CardTitle>}
+          feeds={featuredRecentlyAdded}
+          showPrices
+          linkFeeds
         />
-      </div>
-    </div>
+      </YesterdaysPricesProvider>
+      <FeaturedFeedsCard
+        title={<CardTitle icon={<ClockCountdown />}>Coming soon</CardTitle>}
+        feeds={featuredComingSoon}
+        action={
+          <DrawerTrigger>
+            <Button size="sm" variant="outline">
+              Show all
+            </Button>
+            <Drawer
+              fill
+              className={styles.comingSoonCard ?? ""}
+              title={
+                <>
+                  <span>Coming Soon</span>
+                  <Badge>{priceFeeds.comingSoon.length}</Badge>
+                </>
+              }
+            >
+              <ComingSoonList
+                comingSoonFeeds={priceFeeds.comingSoon.map((feed) => ({
+                  id: feed.product.price_account,
+                  displaySymbol: feed.product.display_symbol,
+                  assetClass: feed.product.asset_type,
+                  icon: (
+                    <PriceFeedIcon symbol={feed.product.display_symbol} />
+                  ),
+                }))}
+              />
+            </Drawer>
+          </DrawerTrigger>
+        }
+      />
+      <PriceFeedsCard
+        id={PRICE_FEEDS_ANCHOR}
+        priceFeeds={priceFeeds.activeFeeds.map((feed) => ({
+          symbol: feed.symbol,
+          icon: <PriceFeedIcon symbol={feed.product.display_symbol} />,
+          id: feed.product.price_account,
+          displaySymbol: feed.product.display_symbol,
+          assetClass: feed.product.asset_type,
+          exponent: feed.price.exponent,
+          numQuoters: feed.price.numQuoters,
+        }))}
+      />
+    </PageLayout>
   );
 };
 
diff --git a/apps/insights/src/components/Publisher/layout.module.scss b/apps/insights/src/components/Publisher/layout.module.scss
index 81697a4ec2..be96824372 100644
--- a/apps/insights/src/components/Publisher/layout.module.scss
+++ b/apps/insights/src/components/Publisher/layout.module.scss
@@ -84,8 +84,7 @@
 
   .body {
     @include theme.max-width;
-
-    padding-top: theme.spacing(6);
+    margin-top: theme.spacing(6);
   }
 }
 
diff --git a/apps/insights/src/components/Publisher/performance.module.scss b/apps/insights/src/components/Publisher/performance.module.scss
index e5e5fd6bad..32ef3b26f9 100644
--- a/apps/insights/src/components/Publisher/performance.module.scss
+++ b/apps/insights/src/components/Publisher/performance.module.scss
@@ -2,11 +2,14 @@
 
 .performance {
   display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: theme.spacing(12) theme.spacing(6);
+  grid-template-columns: 1fr;
+  gap: theme.spacing(6);
   align-items: flex-start;
 
-  > *:first-child {
-    grid-column: span 2 / span 2;
+  @include theme.breakpoint("md") {
+    grid-template-columns: 1fr 1fr;
+    > *:first-child {
+      grid-column: span 2 / span 2;
+    }
   }
 }
diff --git a/apps/insights/src/components/Publishers/index.module.scss b/apps/insights/src/components/Publishers/index.module.scss
index 310e441b4d..8e5871e68b 100644
--- a/apps/insights/src/components/Publishers/index.module.scss
+++ b/apps/insights/src/components/Publishers/index.module.scss
@@ -1,79 +1,74 @@
 @use "@pythnetwork/component-library/theme";
 @use "../Root/index.module.scss" as root;
 
-.publishers {
-  @include theme.max-width;
+.body {
+  display: flex;
+  flex-flow: column nowrap;
+  width: 100%;
 
-  .body {
+  @include theme.breakpoint("lg") {
+    flex-flow: row nowrap;
+    align-items: flex-start;
+    gap: theme.spacing(6);
+  }
+
+  .stats {
     display: flex;
-    flex-flow: column nowrap;
-    width: 100%;
+    flex-flow: column;
+    gap: theme.spacing(6);
+    align-items: stretch;
+    flex-grow: 1;
 
     @include theme.breakpoint("lg") {
-      flex-flow: row nowrap;
-      align-items: flex-start;
-      gap: theme.spacing(12);
-      margin-top: theme.spacing(6);
+      position: sticky;
+      top: root.$header-height;
     }
 
-    .stats {
-      display: flex;
-      flex-flow: column;
-      gap: theme.spacing(4);
-      align-items: stretch;
-      flex-grow: 1;
-
-      @include theme.breakpoint("lg") {
-        position: sticky;
-        top: root.$header-height;
-      }
-
-      .averageMedianScoreExplainButton {
-        margin-top: -#{theme.button-padding("xs", false)};
-        margin-right: -#{theme.button-padding("xs", false)};
-      }
+    .averageMedianScoreExplainButton {
+      margin-top: -#{theme.button-padding("xs", false)};
+      margin-right: -#{theme.button-padding("xs", false)};
+    }
 
-      .oisCard {
-        .oisPool {
-          .title {
-            font-size: theme.font-size("sm");
-            font-weight: theme.font-weight("normal");
-            color: theme.color("heading");
-            margin: 0;
-          }
+    .oisCard {
+      .oisPool {
+        .title {
+          font-size: theme.font-size("sm");
+          font-weight: theme.font-weight("normal");
+          color: theme.color("heading");
+          margin: 0;
+        }
 
-          .poolUsed {
-            margin: 0;
-            color: theme.color("heading");
+        .poolUsed {
+          margin: 0;
+          color: theme.color("heading");
 
-            @include theme.h3;
-          }
+          @include theme.h3;
+        }
 
-          .poolTotal {
-            margin: 0;
-            color: theme.color("muted");
-            font-size: theme.font-size("sm");
-            font-weight: theme.font-weight("normal");
-          }
+        .poolTotal {
+          margin: 0;
+          color: theme.color("muted");
+          font-size: theme.font-size("sm");
+          font-weight: theme.font-weight("normal");
         }
+      }
 
-        .oisStats {
-          display: flex;
-          flex-flow: column;
-          gap: theme.spacing(1);
+      .oisStats {
+        display: flex;
+        flex-flow: column;
+        gap: theme.spacing(1);
 
-          @include theme.breakpoint("lg") {
-            column-span: 2;
-            display: grid;
-            grid-template-columns: repeat(2, minmax(0, 1fr));
-          }
+        @include theme.breakpoint("lg") {
+          column-span: 2;
+          display: grid;
+          grid-template-columns: repeat(2, minmax(0, 1fr));
         }
       }
     }
+  }
 
-    .publishersCard {
-      width: 60%;
-    }
+  .publishersCard {
+    width: 60%;
   }
 }
 
diff --git a/apps/insights/src/components/Publishers/index.tsx b/apps/insights/src/components/Publishers/index.tsx
index 151808514c..c84b8655c6 100644
--- a/apps/insights/src/components/Publishers/index.tsx
+++ b/apps/insights/src/components/Publishers/index.tsx
@@ -19,7 +19,7 @@ import {
 } from "../../services/staking";
 import { CardTitle } from "../CardTitle";
 import { FormattedTokens } from "../FormattedTokens";
-import { PageTitle } from "../PageTitle/page-title";
+import { PageLayout } from "../PageLayout/page-layout";
 import { PublisherIcon } from "../PublisherIcon";
 import { PublisherTag } from "../PublisherTag";
 import { SemicircleMeter, Label } from "../SemicircleMeter";
@@ -36,8 +36,7 @@ export const Publishers = async () => {
   ]);
 
   return (
-    <div className={styles.publishers}>
-      <PageTitle>Publishers</PageTitle>
+    <PageLayout title={"Publishers"}>
       <div className={styles.body}>
         <section className={styles.stats}>
           <Stats>
@@ -174,7 +173,7 @@ export const Publishers = async () => {
           )}
         />
       </div>
-    </div>
+    </PageLayout >
   );
 };