diff --git a/apps/dashboard/src/@/components/blocks/project-page/header/link-group.tsx b/apps/dashboard/src/@/components/blocks/project-page/header/link-group.tsx
index eb7844c2fc6..bbddd8d5fc9 100644
--- a/apps/dashboard/src/@/components/blocks/project-page/header/link-group.tsx
+++ b/apps/dashboard/src/@/components/blocks/project-page/header/link-group.tsx
@@ -4,9 +4,8 @@ import { Button } from "@workspace/ui/components/button";
 import {
   BookTextIcon,
   BoxIcon,
-  EllipsisVerticalIcon,
-  NetworkIcon,
-  SettingsIcon,
+  ChevronDownIcon,
+  CodeIcon,
   WebhookIcon,
 } from "lucide-react";
 import Link from "next/link";
@@ -17,17 +16,14 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { ToolTipLabel } from "@/components/ui/tooltip";
-import { useIsMobile } from "@/hooks/use-mobile";
 
-type LinkType = "api" | "docs" | "playground" | "webhooks" | "settings";
+type LinkType = "api" | "docs" | "playground" | "webhooks";
 
 const linkTypeToLabel: Record<LinkType, string> = {
   api: "API Reference",
   docs: "Documentation",
   playground: "Playground",
   webhooks: "Webhooks",
-  settings: "Settings",
 };
 
 const linkTypeToOrder: Record<LinkType, number> = {
@@ -35,15 +31,13 @@ const linkTypeToOrder: Record<LinkType, number> = {
   playground: 1,
   api: 3,
   webhooks: 4,
-  settings: 5,
 };
 
 const linkTypeToIcon: Record<LinkType, React.FC<{ className?: string }>> = {
-  api: NetworkIcon,
+  api: CodeIcon,
   docs: BookTextIcon,
   playground: BoxIcon,
   webhooks: WebhookIcon,
-  settings: SettingsIcon,
 };
 
 function orderLinks(links: ActionLink[]) {
@@ -60,52 +54,43 @@ export type ActionLink = {
 };
 
 export function LinkGroup(props: { links: ActionLink[] }) {
-  const isMobile = useIsMobile();
-  const maxLinks = isMobile ? 1 : 2;
   const orderedLinks = useMemo(() => orderLinks(props.links), [props.links]);
 
-  // case where we just render directly
-  if (props.links.length <= maxLinks) {
+  if (orderedLinks.length === 1 && orderedLinks[0]) {
+    const link = orderedLinks[0];
+    const Icon = linkTypeToIcon[link.type];
     return (
-      <div className="flex flex-row items-center gap-2">
-        {orderedLinks.map((link) => {
-          const isExternal = link.href.startsWith("http");
-          const Icon = linkTypeToIcon[link.type];
-          return (
-            <ToolTipLabel key={link.type} label={linkTypeToLabel[link.type]}>
-              <Button
-                asChild
-                size="icon"
-                variant="secondary"
-                className="rounded-full border"
-              >
-                <Link
-                  href={link.href}
-                  target={isExternal ? "_blank" : undefined}
-                  rel={isExternal ? "noopener noreferrer" : undefined}
-                  className="flex flex-row items-center gap-2"
-                >
-                  <Icon className="size-4 text-foreground" />
-                </Link>
-              </Button>
-            </ToolTipLabel>
-          );
-        })}
-      </div>
+      <Link
+        href={link.href}
+        target={link.href.startsWith("http") ? "_blank" : undefined}
+      >
+        <Button
+          variant="outline"
+          size="sm"
+          className="rounded-full border gap-2 bg-card"
+        >
+          <Icon className="size-3.5 text-muted-foreground" />
+          {linkTypeToLabel[link.type]}
+        </Button>
+      </Link>
     );
   }
 
-  // case where we render a dropdown
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button size="icon" variant="secondary" className="rounded-full border">
-          <EllipsisVerticalIcon className="size-4 text-foreground" />
+        <Button
+          variant="outline"
+          size="sm"
+          className="rounded-full border gap-2 bg-card [&[data-state=open]>svg]:rotate-180"
+        >
+          Resources
+          <ChevronDownIcon className="size-4 transition-transform duration-200 text-muted-foreground" />
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent
-        align="center"
-        className="gap-1 flex flex-col md:w-48 rounded-lg"
+        align="end"
+        className="gap-1 flex flex-col w-48 rounded-xl"
         sideOffset={10}
       >
         {orderedLinks.map((link) => {
@@ -115,7 +100,7 @@ export function LinkGroup(props: { links: ActionLink[] }) {
             <DropdownMenuItem
               key={link.type}
               asChild
-              className="flex flex-row items-center gap-2 cursor-pointer py-2"
+              className="flex flex-row items-center gap-2 cursor-pointer py-1.5"
             >
               <Link
                 href={link.href}
diff --git a/apps/dashboard/src/@/components/blocks/project-page/project-page-header.tsx b/apps/dashboard/src/@/components/blocks/project-page/project-page-header.tsx
index 022f33ba9d0..768eb10e0c7 100644
--- a/apps/dashboard/src/@/components/blocks/project-page/project-page-header.tsx
+++ b/apps/dashboard/src/@/components/blocks/project-page/project-page-header.tsx
@@ -1,9 +1,8 @@
 import { Button } from "@workspace/ui/components/button";
-import { ArrowUpRightIcon } from "lucide-react";
+import { ArrowUpRightIcon, Settings2Icon } from "lucide-react";
 import Link from "next/link";
 import type { ThirdwebClient } from "thirdweb";
 import { cn } from "@/lib/utils";
-import { ProjectAvatar } from "../avatar/project-avatar";
 import { type ActionLink, LinkGroup } from "./header/link-group";
 
 type Action =
@@ -58,12 +57,17 @@ export type ProjectPageHeaderProps = {
   title: string;
   description?: React.ReactNode;
   imageUrl?: string | null;
+  icon: React.FC<{ className?: string }>;
+  isProjectIcon?: boolean;
   actions: {
     primary: Action;
     secondary?: Action;
   } | null;
 
   links?: ActionLink[];
+  settings?: {
+    href: string;
+  };
 
   // TODO: add task card component
   task?: never;
@@ -71,50 +75,81 @@ export type ProjectPageHeaderProps = {
 
 export function ProjectPageHeader(props: ProjectPageHeaderProps) {
   return (
-    <header className="flex flex-col gap-4 container max-w-7xl py-6">
-      {/* main row */}
-      <div className="flex flex-row items-center justify-between">
-        {/* left */}
-        <div className="flex flex-col gap-4">
-          {/* image */}
-          {props.imageUrl !== undefined && (
-            <ProjectAvatar
-              className="size-12"
-              client={props.client}
-              src={props.imageUrl ?? undefined}
-            />
+    <header className="container max-w-7xl py-6 relative">
+      {/* top row */}
+      <div className="flex justify-between items-start mb-4">
+        {/* left - icon */}
+        <div className="flex">
+          {props.isProjectIcon ? (
+            <props.icon />
+          ) : (
+            <div className="border rounded-full p-2.5 bg-card">
+              <props.icon className="size-5 text-muted-foreground" />
+            </div>
           )}
-          {/* title */}
-          <div className="flex flex-col gap-1 max-w-3xl">
-            <h2 className="text-3xl font-semibold tracking-tight line-clamp-1">
-              {props.title}
-            </h2>
-            <p className="text-sm text-muted-foreground line-clamp-3 md:line-clamp-2">
-              {props.description}
-            </p>
-          </div>
         </div>
 
-        {/* right */}
-        {/* TODO: add "current task" card component */}
-      </div>
+        {/* right - buttons */}
+        <div className="flex items-center gap-3">
+          <div className="flex items-center gap-3">
+            {props.links && props.links.length > 0 && (
+              <LinkGroup links={props.links} />
+            )}
 
-      {/* actions row */}
-      {props.actions && (
-        <div className="flex flex-row items-center justify-between">
-          {/* left actions */}
-          <div className="flex flex-row items-center gap-3">
-            {props.actions.primary && <Action action={props.actions.primary} />}
-            {props.actions.secondary && (
-              <Action action={props.actions.secondary} variant="secondary" />
+            {props.settings && (
+              <Link href={props.settings.href}>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="rounded-full gap-2 bg-card"
+                >
+                  <Settings2Icon className="size-4 text-muted-foreground" />
+                  Settings
+                </Button>
+              </Link>
             )}
           </div>
-          {/* right actions */}
-          {props.links && props.links.length > 0 && (
-            <LinkGroup links={props.links} />
+
+          {/* hide on mobile */}
+          {props.actions && (
+            <div className="hidden lg:flex items-center gap-3">
+              {props.actions.secondary && (
+                <Action action={props.actions.secondary} variant="secondary" />
+              )}
+
+              {props.actions.primary && (
+                <Action action={props.actions.primary} />
+              )}
+            </div>
           )}
         </div>
-      )}
+      </div>
+
+      <div className="space-y-4">
+        {/* mid row */}
+        <div className="space-y-1 max-w-3xl">
+          <h2 className="text-3xl font-semibold tracking-tight">
+            {props.title}
+          </h2>
+          {/* description */}
+          <p className="text-sm text-muted-foreground line-clamp-3 md:line-clamp-2">
+            {props.description}
+          </p>
+        </div>
+
+        {/* bottom row - hidden on desktop */}
+        {props.actions && (
+          <div className="flex items-center gap-3 lg:hidden">
+            {props.actions?.primary && (
+              <Action action={props.actions.primary} />
+            )}
+
+            {props.actions?.secondary && (
+              <Action action={props.actions.secondary} variant="secondary" />
+            )}
+          </div>
+        )}
+      </div>
     </header>
   );
 }
diff --git a/apps/dashboard/src/@/components/contracts/import-contract/modal.tsx b/apps/dashboard/src/@/components/contracts/import-contract/modal.tsx
index 6a225b0a979..c4cbc25af04 100644
--- a/apps/dashboard/src/@/components/contracts/import-contract/modal.tsx
+++ b/apps/dashboard/src/@/components/contracts/import-contract/modal.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
-import { ExternalLinkIcon, ImportIcon } from "lucide-react";
+import { ArrowDownToLineIcon, ExternalLinkIcon } from "lucide-react";
 import Link from "next/link";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -234,7 +234,7 @@ function ImportForm(props: {
               {addContractToProject.isPending ? (
                 <Spinner className="size-4" />
               ) : (
-                <ImportIcon className="size-4" />
+                <ArrowDownToLineIcon className="size-4" />
               )}
 
               {addContractToProject.isPending ? "Importing" : "Import"}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/account-abstraction/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/account-abstraction/page.tsx
index c15962d7813..6ca23d1d256 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/account-abstraction/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/account-abstraction/page.tsx
@@ -11,6 +11,7 @@ import {
 } from "@/components/analytics/date-range-selector";
 import { ProjectPage } from "@/components/blocks/project-page/project-page";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
+import { SmartAccountIcon } from "@/icons/SmartAccountIcon";
 import { getAbsoluteUrl } from "@/utils/vercel";
 import { AccountAbstractionSummary } from "./AccountAbstractionAnalytics/AccountAbstractionSummary";
 import { SmartWalletsBillingAlert } from "./Alerts";
@@ -93,22 +94,14 @@ export default async function Page(props: {
   return (
     <ProjectPage
       header={{
+        icon: SmartAccountIcon,
         client,
         title: "Account Abstraction",
         description:
           "Integrate EIP-7702 and EIP-4337 compliant smart accounts for gasless sponsorships and more.",
-
-        actions: {
-          primary: {
-            label: "Documentation",
-            href: "https://portal.thirdweb.com/transactions/sponsor",
-            external: true,
-          },
-          secondary: {
-            label: "Playground",
-            href: "https://playground.thirdweb.com/account-abstraction/eip-7702",
-            external: true,
-          },
+        actions: null,
+        settings: {
+          href: `/team/${params.team_slug}/${params.project_slug}/settings/account-abstraction`,
         },
         links: [
           {
@@ -119,10 +112,6 @@ export default async function Page(props: {
             type: "playground",
             href: "https://playground.thirdweb.com/account-abstraction/eip-7702",
           },
-          {
-            type: "settings",
-            href: `/team/${params.team_slug}/${params.project_slug}/settings/account-abstraction`,
-          },
         ],
       }}
     >
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/page.tsx
index eb45c74c176..0ccf60dafbe 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/page.tsx
@@ -6,6 +6,7 @@ import type { DurationId } from "@/components/analytics/date-range-selector";
 import { ResponsiveTimeFilters } from "@/components/analytics/responsive-time-filters";
 import { ProjectPage } from "@/components/blocks/project-page/project-page";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
+import { NebulaIcon } from "@/icons/NebulaIcon";
 import { getFiltersFromSearchParams } from "@/lib/time";
 import { loginRedirect } from "@/utils/redirects";
 import { AiAnalytics } from "./analytics/chart";
@@ -57,21 +58,11 @@ export default async function Page(props: {
     <ResponsiveSearchParamsProvider value={searchParams}>
       <ProjectPage
         header={{
+          icon: NebulaIcon,
           client,
           title: "AI",
           description: "Interact with any EVM chain with natural language",
-          actions: {
-            primary: {
-              label: "Documentation",
-              href: "https://portal.thirdweb.com/ai/chat",
-              external: true,
-            },
-            secondary: {
-              label: "API Reference",
-              href: "https://api.thirdweb.com/reference#tag/ai/post/ai/chat",
-              external: true,
-            },
-          },
+          actions: null,
           links: [
             {
               href: "https://portal.thirdweb.com/ai/chat",
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsx
index 6f29a24138a..72ade8bec84 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsx
@@ -7,7 +7,7 @@ import {
   HomeIcon,
   LockIcon,
   RssIcon,
-  SettingsIcon,
+  Settings2Icon,
   WebhookIcon,
 } from "lucide-react";
 import { FullWidthSidebarLayout } from "@/components/blocks/full-width-sidebar-layout";
@@ -138,7 +138,7 @@ export function ProjectSidebarLayout(props: {
         },
         {
           href: `${props.layoutPath}/settings`,
-          icon: SettingsIcon,
+          icon: Settings2Icon,
           label: "Project Settings",
         },
         {
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/contracts/import-contract-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/contracts/import-contract-button.tsx
index d2299c60f37..0fbb568c4f0 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/contracts/import-contract-button.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/contracts/import-contract-button.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { ImportIcon } from "lucide-react";
+import { ArrowDownToLineIcon } from "lucide-react";
 import { useState } from "react";
 import type { ThirdwebClient } from "thirdweb";
 import { ImportModal } from "@/components/contracts/import-contract/modal";
@@ -31,14 +31,14 @@ export function ImportContractButton(props: {
       />
 
       <Button
-        className="gap-2 rounded-full border"
+        className="gap-2 rounded-full bg-card"
         size="sm"
         onClick={() => {
           setImportModalOpen(true);
         }}
-        variant="secondary"
+        variant="outline"
       >
-        <ImportIcon className="size-4" />
+        <ArrowDownToLineIcon className="size-3.5 text-muted-foreground" />
         Import contract
       </Button>
     </>
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/contracts/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/contracts/page.tsx
index 5db37eb8599..e01390aee85 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/contracts/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/contracts/page.tsx
@@ -1,10 +1,11 @@
-import { RocketIcon } from "lucide-react";
+import { ArrowUpFromLineIcon } from "lucide-react";
 import { redirect } from "next/navigation";
 import { getAuthToken } from "@/api/auth-token";
 import { getProject } from "@/api/project/projects";
 import { getTeamBySlug } from "@/api/team/get-team";
 import { ProjectPage } from "@/components/blocks/project-page/project-page";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
+import { ContractIcon } from "@/icons/ContractIcon";
 import { loginRedirect } from "@/utils/redirects";
 import { DeployedContractsPage } from "./DeployedContractsPage";
 import { ImportContractButton } from "./import-contract-button";
@@ -42,6 +43,7 @@ export default async function Page(props: {
       header={{
         client,
         title: "Contracts",
+        icon: ContractIcon,
         description: (
           <>
             Read, write, and deploy smart contracts on any EVM compatible
@@ -53,7 +55,7 @@ export default async function Page(props: {
           primary: {
             label: "Deploy Contract",
             href: "/explore",
-            icon: <RocketIcon className="size-4" />,
+            icon: <ArrowUpFromLineIcon className="size-3.5" />,
           },
           secondary: {
             component: (
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/import/import-engine-dialog.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/import/import-engine-dialog.tsx
index ea879a79982..c188ccc9c8e 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/import/import-engine-dialog.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/import/import-engine-dialog.tsx
@@ -3,10 +3,9 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation } from "@tanstack/react-query";
 import {
+  ArrowDownToLineIcon,
   CircleAlertIcon,
-  DownloadIcon,
   ExternalLinkIcon,
-  ImportIcon,
 } from "lucide-react";
 import Link from "next/link";
 import { useForm } from "react-hook-form";
@@ -108,11 +107,11 @@ export function ImportEngineButton(props: {
         <Dialog>
           <DialogTrigger asChild>
             <Button
-              className="gap-2 rounded-full border"
+              className="gap-2 rounded-full bg-card"
               size="sm"
-              variant="secondary"
+              variant="outline"
             >
-              <ImportIcon className="size-4" />
+              <ArrowDownToLineIcon className="size-3.5" />
               Import Engine
             </Button>
           </DialogTrigger>
@@ -188,7 +187,7 @@ export function ImportEngineButton(props: {
                 {importMutation.isPending ? (
                   <Spinner className="size-4" />
                 ) : (
-                  <DownloadIcon className="size-4" />
+                  <ArrowDownToLineIcon className="size-4" />
                 )}
                 Import
               </Button>
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/overview/engine-instances-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/overview/engine-instances-table.tsx
index 00b5f060c5e..05c5bf03f47 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/overview/engine-instances-table.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/overview/engine-instances-table.tsx
@@ -132,7 +132,7 @@ export function DedicatedEngineSubscriptionButton(props: { team: Team }) {
 
   const trigger = (
     <Button className="gap-2 rounded-full" size="sm">
-      <PlusIcon className="size-4" />
+      <PlusIcon className="size-3.5" />
       Deploy Dedicated Engine
     </Button>
   );
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/page.tsx
index 4b7cb6a1b68..32d15755850 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/(general)/page.tsx
@@ -1,3 +1,4 @@
+import { DatabaseIcon } from "lucide-react";
 import { redirect } from "next/navigation";
 import { getAuthToken } from "@/api/auth-token";
 import { getTeamBySlug } from "@/api/team/get-team";
@@ -56,6 +57,7 @@ export default async function Page(props: {
     <ProjectPage
       header={{
         client,
+        icon: DatabaseIcon,
         title: "Engine",
         description: "Manage your deployed Engine instances.",
         actions: {
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/insight/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/insight/page.tsx
index 78d6bfcfa2f..a1d141b0828 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/insight/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/insight/page.tsx
@@ -5,6 +5,7 @@ import { getAuthToken } from "@/api/auth-token";
 import { getProject } from "@/api/project/projects";
 import { ProjectPage } from "@/components/blocks/project-page/project-page";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
+import { InsightIcon } from "@/icons/InsightIcon";
 import { getFiltersFromSearchParams } from "@/lib/time";
 import { loginRedirect } from "@/utils/redirects";
 import { InsightAnalytics } from "./components/InsightAnalytics";
@@ -49,22 +50,11 @@ export default async function Page(props: {
     <ProjectPage
       header={{
         client,
+        icon: InsightIcon,
         title: "Insight",
         description:
           "APIs to retrieve blockchain data from any EVM chain, enrich it with metadata, and transform it using custom logic.",
-
-        actions: {
-          primary: {
-            label: "Documentation",
-            href: "https://portal.thirdweb.com/insight",
-            external: true,
-          },
-          secondary: {
-            label: "Playground",
-            href: "https://playground.thirdweb.com/insight",
-            external: true,
-          },
-        },
+        actions: null,
         links: [
           {
             type: "docs",
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
index a395e4a22f0..be9e0dce2f0 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
@@ -26,6 +26,7 @@ import type {
 } from "@/components/analytics/date-range-selector";
 import { LoadingChartState } from "@/components/analytics/empty-chart-state";
 import { ResponsiveTimeFilters } from "@/components/analytics/responsive-time-filters";
+import { ProjectAvatar } from "@/components/blocks/avatar/project-avatar";
 import { ProjectPage } from "@/components/blocks/project-page/project-page";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
 import { getFiltersFromSearchParams } from "@/lib/time";
@@ -108,9 +109,16 @@ export default async function ProjectOverviewPage(props: PageProps) {
       <ProjectPage
         header={{
           client,
+          isProjectIcon: true,
+          icon: () => (
+            <ProjectAvatar
+              className="size-12"
+              client={client}
+              src={project.image ?? ""}
+            />
+          ),
           title: project.name,
           description: "Your project's overview and analytics",
-          imageUrl: project.image,
           // explicitly NO actions on the overview page
           actions: null,
         }}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx
index 471154ad86b..56cfb2d1e1c 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx
@@ -6,6 +6,7 @@ import { getAuthToken } from "@/api/auth-token";
 import { getProject } from "@/api/project/projects";
 import { ProjectPage } from "@/components/blocks/project-page/project-page";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
+import { PayIcon } from "@/icons/PayIcon";
 import { loginRedirect } from "@/utils/redirects";
 import { AdvancedSection } from "./components/AdvancedSection.client";
 import { PayAnalytics } from "./components/PayAnalytics";
@@ -56,6 +57,7 @@ export default async function Page(props: {
       header={{
         client,
         title: "Payments",
+        icon: PayIcon,
         description: (
           <>
             Payments allow you to create advanced payment flows to monetize your
@@ -77,11 +79,9 @@ export default async function Page(props: {
               </CreatePaymentLinkButton>
             ),
           },
-          secondary: {
-            label: "Documentation",
-            href: "https://portal.thirdweb.com/payments",
-            external: true,
-          },
+        },
+        settings: {
+          href: `/team/${params.team_slug}/${params.project_slug}/settings/payments`,
         },
         links: [
           {
@@ -100,10 +100,10 @@ export default async function Page(props: {
             type: "webhooks",
             href: `/team/${params.team_slug}/${params.project_slug}/webhooks/payments`,
           },
-          {
-            type: "settings",
-            href: `/team/${params.team_slug}/${params.project_slug}/settings/payments`,
-          },
+          // {
+          //   type: "settings",
+          //   href: `/team/${params.team_slug}/${params.project_slug}/settings/payments`,
+          // },
         ],
       }}
       footer={{
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/rpc/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/rpc/page.tsx
index c74aa80f1dd..cd5b226f1d0 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/rpc/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/rpc/page.tsx
@@ -1,3 +1,4 @@
+import { RssIcon } from "lucide-react";
 import { redirect } from "next/navigation";
 import { ResponsiveSearchParamsProvider } from "responsive-rsc";
 import { getAuthToken } from "@/api/auth-token";
@@ -47,17 +48,17 @@ export default async function Page(props: {
   return (
     <ProjectPage
       header={{
+        icon: RssIcon,
         client,
         title: "RPC",
-        description:
-          "Remote Procedure Call (RPC) provides reliable access to querying data and interacting with the blockchain through global edge RPCs.",
-        actions: {
-          primary: {
-            label: "Documentation",
-            href: "https://portal.thirdweb.com/infrastructure/rpc-edge/overview",
-            external: true,
-          },
-        },
+        description: (
+          <>
+            Remote Procedure Call (RPC) provides reliable access to{" "}
+            <br className="max-sm:hidden" /> querying data and interacting with
+            the blockchain through global edge RPCs
+          </>
+        ),
+        actions: null,
         links: [
           {
             type: "docs",
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/layout.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/layout.tsx
index 620aa72ddc2..635c38e7240 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/layout.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/layout.tsx
@@ -1,3 +1,5 @@
+import { Settings2Icon } from "lucide-react";
+
 export default async function Layout(props: {
   children: React.ReactNode;
   params: Promise<{
@@ -7,11 +9,21 @@ export default async function Layout(props: {
 }) {
   return (
     <div className="flex grow flex-col">
-      <div className="border-b py-12">
+      <div className="border-b py-8">
         <div className="container max-w-7xl">
-          <h1 className="font-semibold text-2xl tracking-tight lg:text-3xl">
-            Project Settings
-          </h1>
+          <div className="mb-4 flex">
+            <div className="p-2.5 rounded-full bg-card border">
+              <Settings2Icon className="size-5 text-muted-foreground" />
+            </div>
+          </div>
+          <div className="space-y-1">
+            <h1 className="font-semibold tracking-tight text-3xl">
+              Project Settings
+            </h1>
+            <p className="text-sm text-muted-foreground">
+              Configure your project's settings and services
+            </p>
+          </div>
         </div>
       </div>
       <div className="container max-w-7xl pt-6 pb-20">{props.children}</div>
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/cards.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/cards.tsx
index 3d081837c0e..18bcf5daf10 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/cards.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/cards.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { Button } from "@workspace/ui/components/button";
-import { CoinsIcon, ImagesIcon, ImportIcon } from "lucide-react";
+import { ArrowDownToLineIcon, CoinsIcon, ImagesIcon } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
 import type { ThirdwebClient } from "thirdweb";
@@ -23,15 +23,15 @@ export function ImportTokenButton(props: {
   return (
     <>
       <Button
-        variant="secondary"
-        className="gap-1.5 rounded-full border"
+        variant="outline"
+        className="gap-2 rounded-full bg-card"
         size="sm"
         onClick={() => {
           reportAssetImportStarted();
           setImportModalOpen(true);
         }}
       >
-        <ImportIcon className="size-4" />
+        <ArrowDownToLineIcon className="size-3.5 text-muted-foreground" />
         Import Token
       </Button>
 
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/page.tsx
index 28a22b62364..74ff22780d9 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/page.tsx
@@ -19,6 +19,7 @@ import {
   DialogTrigger,
 } from "@/components/ui/dialog";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
+import { TokenIcon } from "@/icons/TokenIcon";
 import { loginRedirect } from "@/utils/redirects";
 import { Cards, ImportTokenButton } from "./cards";
 
@@ -53,6 +54,7 @@ export default async function Page(props: {
   return (
     <ProjectPage
       header={{
+        icon: TokenIcon,
         client,
         title: "Tokens",
         description: "Create and manage tokens for your project",
@@ -61,8 +63,8 @@ export default async function Page(props: {
             component: (
               <Dialog>
                 <DialogTrigger asChild>
-                  <Button className="gap-1.5 rounded-full" size="sm">
-                    <PlusIcon className="size-4" />
+                  <Button className="gap-2 rounded-full" size="sm">
+                    <PlusIcon className="size-3.5" />
                     Create Token
                   </Button>
                 </DialogTrigger>
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/page.tsx
index d92cfa21346..deeaddbefe4 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/page.tsx
@@ -1,4 +1,5 @@
 import { createVaultClient, listEoas } from "@thirdweb-dev/vault-sdk";
+import { ArrowLeftRightIcon } from "lucide-react";
 import { notFound, redirect } from "next/navigation";
 import { getAuthToken } from "@/api/auth-token";
 import { getProject } from "@/api/project/projects";
@@ -91,6 +92,7 @@ export default async function TransactionsAnalyticsPage(props: {
     <ProjectPage
       header={{
         client,
+        icon: ArrowLeftRightIcon,
         title: "Transactions",
         description: (
           <>
@@ -99,18 +101,7 @@ export default async function TransactionsAnalyticsPage(props: {
             server wallets, sponsor gas, monitor transaction status, and more
           </>
         ),
-        actions: {
-          primary: {
-            label: "Documentation",
-            href: "https://portal.thirdweb.com/transactions",
-            external: true,
-          },
-          secondary: {
-            label: "API Reference",
-            href: "https://api.thirdweb.com/reference#tag/transactions",
-            external: true,
-          },
-        },
+        actions: null,
         links: [
           {
             type: "docs",
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/vault/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/vault/page.tsx
index 731af61b640..6c4455e2e1d 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/vault/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/vault/page.tsx
@@ -1,3 +1,4 @@
+import { LockIcon } from "lucide-react";
 import { notFound } from "next/navigation";
 import { getAuthToken } from "@/api/auth-token";
 import { getProject } from "@/api/project/projects";
@@ -35,15 +36,10 @@ export default async function VaultPage(props: {
       header={{
         client,
         title: "Vault",
+        icon: LockIcon,
         description:
           "Secure, non-custodial key management system for your server wallets.",
-        actions: {
-          primary: {
-            label: "Documentation",
-            href: "https://portal.thirdweb.com/vault",
-            external: true,
-          },
-        },
+        actions: null,
         links: [
           {
             type: "docs",
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/page.tsx
index 460bebfae83..fad8863cd37 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/page.tsx
@@ -7,6 +7,7 @@ import { ResponsiveTimeFilters } from "@/components/analytics/responsive-time-fi
 import { ProjectPage } from "@/components/blocks/project-page/project-page";
 import { InAppWalletUsersPageContent } from "@/components/in-app-wallet-users-content/in-app-wallet-users-content";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
+import { WalletProductIcon } from "@/icons/WalletProductIcon";
 import { getFiltersFromSearchParams } from "@/lib/time";
 import { loginRedirect } from "@/utils/redirects";
 import { InAppWalletAnalytics } from "./analytics/chart";
@@ -54,6 +55,7 @@ export default async function Page(props: {
     <ResponsiveSearchParamsProvider value={searchParams}>
       <ProjectPage
         header={{
+          icon: WalletProductIcon,
           client,
           title: "Wallets",
           description: (
@@ -64,17 +66,9 @@ export default async function Page(props: {
               verification, OAuth, passkeys, or external wallet connections
             </>
           ),
-          actions: {
-            primary: {
-              label: "Documentation",
-              href: "https://portal.thirdweb.com/wallets",
-              external: true,
-            },
-            secondary: {
-              label: "API Reference",
-              href: "https://api.thirdweb.com/reference#tag/wallets",
-              external: true,
-            },
+          actions: null,
+          settings: {
+            href: `/team/${params.team_slug}/${params.project_slug}/settings/wallets`,
           },
           links: [
             {
@@ -89,10 +83,6 @@ export default async function Page(props: {
               type: "api",
               href: "https://api.thirdweb.com/reference#tag/wallets",
             },
-            {
-              type: "settings",
-              href: `/team/${params.team_slug}/${params.project_slug}/settings/wallets`,
-            },
           ],
         }}
       >
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/CreateWebhookModal.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/CreateWebhookModal.tsx
index 053b46218c3..4493537a97d 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/CreateWebhookModal.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/CreateWebhookModal.tsx
@@ -235,7 +235,7 @@ export function CreateContractWebhookButton({
           size="sm"
           onClick={handleOpenModal}
         >
-          <PlusIcon className="size-4" />
+          <PlusIcon className="size-3.5" />
           Create Webhook
         </Button>
       </DialogTrigger>
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/contracts/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/contracts/page.tsx
index 91b2360d0e2..73602269897 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/contracts/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/contracts/page.tsx
@@ -1,3 +1,4 @@
+import { WebhookIcon } from "lucide-react";
 import { notFound } from "next/navigation";
 import { getAuthToken } from "@/api/auth-token";
 import { getSupportedWebhookChains } from "@/api/insight/webhooks";
@@ -33,6 +34,7 @@ export default async function ContractsPage(props: {
     <ProjectPage
       header={{
         client,
+        icon: WebhookIcon,
         title: "Webhooks",
         description:
           "Get notified about blockchain events, transactions and more.",
@@ -46,12 +48,13 @@ export default async function ContractsPage(props: {
               />
             ),
           },
-          secondary: {
-            label: "Documentation",
-            href: "https://portal.thirdweb.com/insight/webhooks",
-            external: true,
-          },
         },
+        links: [
+          {
+            type: "docs",
+            href: "https://portal.thirdweb.com/payments/webhooks",
+          },
+        ],
       }}
       tabs={[
         {
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/payments/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/payments/page.tsx
index 5477f4981d6..5efcb34720b 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/payments/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/payments/page.tsx
@@ -1,5 +1,5 @@
 import { Button } from "@workspace/ui/components/button";
-import { PlusIcon } from "lucide-react";
+import { PlusIcon, WebhookIcon } from "lucide-react";
 import { notFound } from "next/navigation";
 import { getAuthToken } from "@/api/auth-token";
 import { getProject } from "@/api/project/projects";
@@ -33,6 +33,7 @@ export default async function Page(props: {
     <ProjectPage
       header={{
         client,
+        icon: WebhookIcon,
         title: "Webhooks",
         description: "Get notified for Bridge, Swap and Onramp events.",
         actions: {
@@ -42,19 +43,20 @@ export default async function Page(props: {
                 clientId={project.publishableKey}
                 teamId={project.teamId}
               >
-                <Button className="gap-1.5 rounded-full">
-                  <PlusIcon className="size-4" />
+                <Button className="gap-2 rounded-full" size="sm">
+                  <PlusIcon className="size-3.5" />
                   <span>Create Webhook</span>
                 </Button>
               </CreatePaymentWebhookButton>
             ),
           },
-          secondary: {
-            label: "Documentation",
+        },
+        links: [
+          {
+            type: "docs",
             href: "https://portal.thirdweb.com/payments/webhooks",
-            external: true,
           },
-        },
+        ],
       }}
       tabs={[
         {