diff --git a/apps/dashboard/src/@/components/pagination-buttons.stories.tsx b/apps/dashboard/src/@/components/pagination-buttons.stories.tsx
index 401598d7241..a04b882abe3 100644
--- a/apps/dashboard/src/@/components/pagination-buttons.stories.tsx
+++ b/apps/dashboard/src/@/components/pagination-buttons.stories.tsx
@@ -25,7 +25,8 @@ function Story() {
     <div className="container flex max-w-[1000px] flex-col gap-8 py-10">
       <Variant label="10 Pages" totalPages={10} />
       <Variant label="100 Pages" totalPages={100} />
-      <Variant label="3 Pages" totalPages={2} />
+      <Variant label="2 Pages" totalPages={2} />
+      <Variant label="3 Pages" totalPages={3} />
       <Variant label="6 Pages" totalPages={6} />
       <Variant label="1 Page - nothing rendered" totalPages={1} />
     </div>
diff --git a/apps/dashboard/src/@/components/pagination-buttons.tsx b/apps/dashboard/src/@/components/pagination-buttons.tsx
index a8142024279..0e64602da1d 100644
--- a/apps/dashboard/src/@/components/pagination-buttons.tsx
+++ b/apps/dashboard/src/@/components/pagination-buttons.tsx
@@ -48,6 +48,7 @@ export const PaginationButtons = (props: {
         <PaginationContent>
           <PaginationItem>
             <PaginationPrevious
+              className="rounded-full"
               disabled={activePage === 1}
               onClick={() => {
                 setPage(activePage - 1);
@@ -56,6 +57,7 @@ export const PaginationButtons = (props: {
           </PaginationItem>
           <PaginationItem>
             <PaginationNext
+              className="rounded-full"
               disabled={activePage === totalPages}
               onClick={() => {
                 setPage(activePage + 1);
@@ -76,6 +78,7 @@ export const PaginationButtons = (props: {
           {pages.map((page) => (
             <PaginationItem key={page}>
               <PaginationLink
+                className="rounded-full"
                 isActive={activePage === page}
                 onClick={() => {
                   setPage(page);
@@ -95,6 +98,7 @@ export const PaginationButtons = (props: {
       <PaginationContent>
         <PaginationItem>
           <PaginationPrevious
+            className="rounded-full"
             disabled={activePage === 1}
             onClick={() => {
               setPage(activePage - 1);
@@ -107,6 +111,7 @@ export const PaginationButtons = (props: {
           <>
             <PaginationItem>
               <PaginationLink
+                className="rounded-full"
                 onClick={() => {
                   setPage(1);
                 }}
@@ -116,7 +121,7 @@ export const PaginationButtons = (props: {
             </PaginationItem>
 
             <PaginationItem>
-              <PaginationEllipsis className="max-sm:w-3" />
+              <PaginationEllipsis className="max-sm:w-3 rounded-full" />
             </PaginationItem>
           </>
         )}
@@ -124,6 +129,7 @@ export const PaginationButtons = (props: {
         {activePage - 1 > 0 && (
           <PaginationItem className="max-sm:hidden">
             <PaginationLink
+              className="rounded-full"
               onClick={() => {
                 setPage(activePage - 1);
               }}
@@ -134,12 +140,15 @@ export const PaginationButtons = (props: {
         )}
 
         <PaginationItem>
-          <PaginationLink isActive>{activePage}</PaginationLink>
+          <PaginationLink className="rounded-full" isActive>
+            {activePage}
+          </PaginationLink>
         </PaginationItem>
 
         {activePage + 1 <= totalPages && (
           <PaginationItem className="max-sm:hidden">
             <PaginationLink
+              className="rounded-full"
               onClick={() => {
                 setPage(activePage + 1);
               }}
@@ -153,11 +162,12 @@ export const PaginationButtons = (props: {
         {activePage + 3 <= totalPages && (
           <>
             <PaginationItem>
-              <PaginationEllipsis className="max-sm:w-3" />
+              <PaginationEllipsis className="max-sm:w-3 rounded-full" />
             </PaginationItem>
 
             <PaginationItem>
               <PaginationLink
+                className="rounded-full"
                 onClick={() => {
                   setPage(totalPages);
                 }}
@@ -170,6 +180,7 @@ export const PaginationButtons = (props: {
 
         <PaginationItem>
           <PaginationNext
+            className="rounded-full"
             disabled={activePage === totalPages}
             onClick={() => {
               setPage(activePage + 1);
@@ -180,7 +191,7 @@ export const PaginationButtons = (props: {
         <div className="relative flex items-center">
           <Input
             className={cn(
-              "w-[60px] bg-transparent [appearance:textfield] max-sm:placeholder:text-sm lg:w-[100px] lg:pr-8 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
+              "w-[60px] bg-transparent [appearance:textfield] max-sm:placeholder:text-sm lg:w-[100px] lg:pr-8 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none rounded-full",
               inputHasError && "text-red-500",
             )}
             onChange={(e) => {
@@ -197,7 +208,7 @@ export const PaginationButtons = (props: {
             value={pageNumberInput}
           />
           <Button
-            className="absolute right-1 h-auto w-auto p-2 max-sm:hidden"
+            className="absolute right-1 h-auto w-auto rounded-full p-2 max-sm:hidden"
             onClick={handlePageInputSubmit}
             variant="ghost"
           >
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/_components/Changelog.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/_components/Changelog.tsx
index baac7e5bde7..9ba78481c30 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/_components/Changelog.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/_components/Changelog.tsx
@@ -1,47 +1,84 @@
 import { formatDistance } from "date-fns";
-import { ArrowRightIcon } from "lucide-react";
+import { ArrowRightIcon, FileTextIcon } from "lucide-react";
 import { unstable_cache } from "next/cache";
 import Link from "next/link";
+import { Img } from "@/components/blocks/Img";
+import { Button } from "@/components/ui/button";
 
 type ChangelogItem = {
   published_at: string;
   title: string;
   url: string;
+  feature_image: string;
 };
 
 export async function Changelog() {
   const changelog = await getChangelog();
 
   return (
-    <div className="relative flex flex-col gap-6 border-border border-l py-2">
-      {changelog.map((item) => (
-        <div className="flex flex-row gap-2" key={item.title}>
-          <div className="-translate-x-1/2 size-2.5 shrink-0 translate-y-1/2 rounded-full bg-border" />
+    <div className="relative flex grow flex-col">
+      <div className="mb-4 flex items-center justify-between gap-4">
+        <div>
+          <h2 className="mb-1 font-semibold text-2xl tracking-tight">
+            Changelog
+          </h2>
+          <p className="text-muted-foreground text-sm">
+            View the latest updates to thirdweb products and services
+          </p>
+        </div>
+
+        <Button
+          asChild
+          className="gap-2 rounded-full bg-card"
+          variant="outline"
+        >
+          <Link
+            href="https://blog.thirdweb.com/changelog?utm_source=thirdweb&utm_campaign=changelog"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            View All <ArrowRightIcon className="size-4" />
+          </Link>
+        </Button>
+      </div>
+
+      <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
+        {changelog.map((item) => (
+          <div
+            className="relative overflow-hidden rounded-xl border bg-card hover:border-active-border"
+            key={item.title}
+          >
+            <Img
+              alt={item.title}
+              className="aspect-video w-full object-cover"
+              fallback={
+                <div className="flex items-center justify-center bg-gradient-to-b from-card to-accent">
+                  <div className="rounded-full border p-3">
+                    <FileTextIcon className="size-5 text-muted-foreground" />
+                  </div>
+                </div>
+              }
+              src={item.feature_image}
+            />
 
-          <div className="flex flex-col">
-            <Link
-              className="line-clamp-2 text-foreground text-sm hover:underline"
-              href={`${item.url}?utm_source=thirdweb&utm_campaign=changelog`}
-              target="_blank"
-            >
-              {item.title}
-            </Link>
-            <div className="mt-1 text-muted-foreground text-xs">
-              {formatDistance(new Date(item.published_at), Date.now(), {
-                addSuffix: true,
-              })}
+            <div className="border-t px-3 py-4">
+              <Link
+                className="mb-2 line-clamp-2 font-medium text-base text-foreground before:absolute before:inset-0"
+                href={`${item.url}?utm_source=thirdweb&utm_campaign=changelog`}
+                target="_blank"
+              >
+                {item.title}
+              </Link>
+
+              <div className="text-muted-foreground text-sm">
+                {formatDistance(new Date(item.published_at), Date.now(), {
+                  addSuffix: true,
+                })}
+              </div>
             </div>
           </div>
-        </div>
-      ))}
-      <Link
-        className="flex items-center gap-2 pl-5 text-foreground text-sm hover:underline"
-        href="https://blog.thirdweb.com/changelog?utm_source=thirdweb&utm_campaign=changelog"
-        rel="noopener noreferrer"
-        target="_blank"
-      >
-        View More <ArrowRightIcon className="size-4" />
-      </Link>
+        ))}
+      </div>
     </div>
   );
 }
@@ -49,7 +86,7 @@ export async function Changelog() {
 const getChangelog = unstable_cache(
   async () => {
     const res = await fetch(
-      "https://thirdweb.ghost.io/ghost/api/content/posts/?key=49c62b5137df1c17ab6b9e46e3&fields=title,url,published_at&filter=tag:changelog&visibility:public&limit=10",
+      "https://thirdweb.ghost.io/ghost/api/content/posts/?key=49c62b5137df1c17ab6b9e46e3&fields=title,url,published_at,feature_image&filter=tag:changelog&visibility:public&limit=12",
     );
     if (!res.ok) {
       return [];
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/_components/invite-team-members-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/_components/invite-team-members-button.tsx
index a9d9c777526..ac578f50612 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/_components/invite-team-members-button.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/_components/invite-team-members-button.tsx
@@ -6,7 +6,7 @@ import { Button } from "@/components/ui/button";
 
 export function InviteTeamMembersButton(props: { teamSlug: string }) {
   return (
-    <Button asChild className="gap-2" variant="outline">
+    <Button asChild className="gap-2 rounded-full bg-card" variant="outline">
       <Link href={`/team/${props.teamSlug}/~/settings/members`}>
         <UserPlusIcon className="size-4" />
         <span>Invite Team Members</span>
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/page.tsx
index 3befed42873..13d3bb75280 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/page.tsx
@@ -43,7 +43,7 @@ export default async function Page(props: {
   return (
     <div className="flex grow flex-col">
       <div className="border-border border-b">
-        <div className="container flex flex-col items-start gap-3 py-10 md:flex-row md:items-center">
+        <div className="container flex max-w-6xl flex-col items-start gap-3 py-10 md:flex-row md:items-center">
           <div className="flex-1">
             <h1 className="font-semibold text-3xl tracking-tight">
               Team Overview
@@ -53,37 +53,24 @@ export default async function Page(props: {
         </div>
       </div>
 
-      <div className="container flex grow flex-col gap-4 lg:flex-row">
-        {/* left */}
-        <div className="flex grow flex-col gap-6 pt-8 lg:pb-20">
-          {team.billingPlan === "free" ? (
-            <FreePlanUpsellBannerUI
-              highlightPlan="growth"
-              teamSlug={team.slug}
-            />
-          ) : (
-            <DismissibleAlert
-              description="Engines, contracts, project settings, and more are now managed within projects. Open or create a project to access them."
-              localStorageId={`${team.id}-engines-alert`}
-              title="Looking for Engines?"
-            />
-          )}
+      <div className="container flex max-w-6xl flex-col gap-10 py-6 pb-20">
+        <TeamProjectsPage
+          client={client}
+          projects={projectsWithTotalWallets}
+          team={team}
+        />
 
-          <TeamProjectsPage
-            client={client}
-            projects={projectsWithTotalWallets}
-            team={team}
+        {team.billingPlan === "free" ? (
+          <FreePlanUpsellBannerUI highlightPlan="growth" teamSlug={team.slug} />
+        ) : (
+          <DismissibleAlert
+            description="Engines, contracts, project settings, and more are now managed within projects. Open or create a project to access them."
+            localStorageId={`${team.id}-engines-alert`}
+            title="Looking for Engines?"
           />
-        </div>
-
-        {/* right */}
-        <div className="w-full px-4 py-8 lg:w-[300px]">
-          <h2 className="mb-3 font-semibold text-2xl tracking-tight">
-            Changelog
-          </h2>
+        )}
 
-          <Changelog />
-        </div>
+        <Changelog />
       </div>
     </div>
   );
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/projects/TeamProjectsPage.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/projects/TeamProjectsPage.tsx
index 36d0d696d0f..29b892f5d09 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/projects/TeamProjectsPage.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/projects/TeamProjectsPage.tsx
@@ -2,7 +2,15 @@
 
 import { LazyCreateProjectDialog } from "components/settings/ApiKeys/Create/LazyCreateAPIKeyDialog";
 import { format } from "date-fns";
-import { ArrowDownNarrowWideIcon, PlusIcon, SearchIcon } from "lucide-react";
+import {
+  ArrowUpDownIcon,
+  CalendarIcon,
+  CheckIcon,
+  LetterTextIcon,
+  PlusIcon,
+  SearchIcon,
+  UsersIcon,
+} from "lucide-react";
 import Link from "next/link";
 import { useMemo, useState } from "react";
 import type { ThirdwebClient } from "thirdweb";
@@ -12,13 +20,14 @@ import { ProjectAvatar } from "@/components/blocks/Avatars/ProjectAvatar";
 import { PaginationButtons } from "@/components/pagination-buttons";
 import { Button } from "@/components/ui/button";
 import { CopyTextButton } from "@/components/ui/CopyTextButton";
-import { Input } from "@/components/ui/input";
 import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-} from "@/components/ui/select";
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
 import {
   Table,
   TableBody,
@@ -83,7 +92,7 @@ export function TeamProjectsPage(props: {
     return _projectsToShow;
   }, [searchTerm, sortBy, projects]);
 
-  const pageSize = 10;
+  const pageSize = 5;
   const [page, setPage] = useState(1);
   const paginatedProjects = sortedProjects.slice(
     (page - 1) * pageSize,
@@ -93,54 +102,73 @@ export function TeamProjectsPage(props: {
   const showPagination = sortedProjects.length > pageSize;
   const totalPages = Math.ceil(sortedProjects.length / pageSize);
 
+  const hasActiveFilters = searchTerm !== "" || sortBy !== "monthlyActiveUsers";
+
   return (
-    <div className="flex grow flex-col">
-      <div className="relative flex flex-col gap-5 rounded-t-lg pb-4 lg:flex-row lg:items-center lg:justify-between lg:border lg:border-b-0 lg:bg-card lg:px-6 lg:py-6">
-        <h2 className="font-semibold text-2xl tracking-tight">Projects</h2>
+    <div>
+      <div className="relative flex flex-col gap-5 pb-4 lg:flex-row lg:items-center lg:justify-between">
+        <div>
+          <h2 className="mb-1 font-semibold text-2xl tracking-tight">
+            Projects
+          </h2>
+          <p className="text-muted-foreground text-sm">
+            Create and manage your projects for your team
+          </p>
+        </div>
 
         {/* Filters + Add New */}
         <div className="flex flex-col gap-3 md:flex-row md:items-center">
-          <SearchInput
-            onValueChange={(v) => {
-              setSearchTerm(v);
-              setPage(1);
-            }}
-            value={searchTerm}
-          />
-          <div className="flex gap-3">
-            <SelectBy
-              onChange={(v) => {
+          <div className="flex items-center gap-3">
+            <div className="relative max-sm:grow lg:w-60">
+              <Input
+                className="rounded-full bg-card pl-10"
+                onChange={(e) => {
+                  setSearchTerm(e.target.value);
+                  setPage(1);
+                }}
+                placeholder="Name or Client ID"
+                value={searchTerm}
+              />
+              <SearchIcon className="-translate-y-1/2 absolute top-1/2 left-4 size-4 text-muted-foreground" />
+            </div>
+            <SortDropdown
+              hasActiveFilters={hasActiveFilters}
+              onSortChange={(v) => {
                 setSortBy(v);
                 setPage(1);
               }}
-              value={sortBy}
-            />
-            <AddNewButton
-              createProject={() => setIsCreateProjectDialogOpen(true)}
-              teamMembersSettingsPath={`/team/${props.team.slug}/~/settings/members`}
+              sortBy={sortBy}
             />
           </div>
+
+          <Button
+            className="gap-1.5 rounded-full"
+            onClick={() => setIsCreateProjectDialogOpen(true)}
+          >
+            <PlusIcon className="size-4" />
+            Create Project
+          </Button>
         </div>
       </div>
 
       {/* Projects Table */}
       {paginatedProjects.length === 0 ? (
         searchTerm !== "" ? (
-          <div className="flex min-h-[450px] grow items-center justify-center border border-border bg-card">
+          <div className="flex min-h-[375px] grow items-center justify-center border border-dashed bg-card rounded-lg">
             <div className="flex flex-col items-center">
               <p className="mb-5 text-center">No projects found</p>
             </div>
           </div>
         ) : (
-          <div className="flex min-h-[450px] grow items-center justify-center rounded-b-lg border border-border bg-card">
+          <div className="flex min-h-[375px] grow items-center justify-center border rounded-lg border-dashed bg-card">
             <div className="flex flex-col items-center">
               <p className="mb-5 text-center font-semibold text-lg">
                 No projects created
               </p>
               <Button
-                className="gap-2 bg-background"
+                className="gap-2"
                 onClick={() => setIsCreateProjectDialogOpen(true)}
-                variant="outline"
+                variant="default"
               >
                 <PlusIcon className="size-4" />
                 Create Project
@@ -149,13 +177,8 @@ export function TeamProjectsPage(props: {
           </div>
         )
       ) : (
-        <div>
-          <TableContainer
-            className={cn(
-              "lg:rounded-t-none",
-              showPagination && "rounded-b-none",
-            )}
-          >
+        <div className="flex grow flex-col">
+          <TableContainer className={cn(showPagination && "rounded-b-none")}>
             <Table>
               <TableHeader>
                 <TableRow>
@@ -242,44 +265,16 @@ export function TeamProjectsPage(props: {
   );
 }
 
-function SearchInput(props: {
-  value: string;
-  onValueChange: (value: string) => void;
-}) {
-  return (
-    <div className="relative grow">
-      <Input
-        className="bg-background pl-9 lg:w-[320px]"
-        onChange={(e) => props.onValueChange(e.target.value)}
-        placeholder="Project name or Client ID"
-        value={props.value}
-      />
-      <SearchIcon className="-translate-y-1/2 absolute top-1/2 left-3 size-4 text-muted-foreground" />
-    </div>
-  );
-}
-
-function AddNewButton(props: {
-  createProject: () => void;
-  teamMembersSettingsPath: string;
-}) {
-  return (
-    <Button
-      className="absolute top-0 right-0 gap-2 lg:static"
-      onClick={props.createProject}
-      variant="default"
-    >
-      <PlusIcon className="size-4" />
-      <span>
-        <span className="hidden lg:inline">Create</span> Project
-      </span>
-    </Button>
-  );
-}
+const sortByIcon: Record<SortById, React.FC<{ className?: string }>> = {
+  createdAt: CalendarIcon,
+  monthlyActiveUsers: UsersIcon,
+  name: LetterTextIcon,
+};
 
-function SelectBy(props: {
-  value: SortById;
-  onChange: (value: SortById) => void;
+function SortDropdown(props: {
+  sortBy: SortById;
+  onSortChange: (value: SortById) => void;
+  hasActiveFilters: boolean;
 }) {
   const values: SortById[] = ["name", "createdAt", "monthlyActiveUsers"];
   const valueToLabel: Record<SortById, string> = {
@@ -289,25 +284,49 @@ function SelectBy(props: {
   };
 
   return (
-    <Select
-      onValueChange={(v) => {
-        props.onChange(v as SortById);
-      }}
-      value={props.value}
-    >
-      <SelectTrigger className="min-w-[200px] bg-background capitalize">
-        <div className="flex items-center gap-2">
-          <ArrowDownNarrowWideIcon className="size-4 text-muted-foreground" />
-          {valueToLabel[props.value]}
-        </div>
-      </SelectTrigger>
-      <SelectContent>
-        {values.map((value) => (
-          <SelectItem key={value} value={value}>
-            {valueToLabel[value]}
-          </SelectItem>
-        ))}
-      </SelectContent>
-    </Select>
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button className="gap-1.5 rounded-full bg-card" variant="outline">
+          <ArrowUpDownIcon className="size-4 text-muted-foreground" />
+          <span className="hidden lg:inline">Sort by</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align="end"
+        className="w-60 rounded-xl p-1.5 shadow-lg"
+        sideOffset={10}
+      >
+        <DropdownMenuRadioGroup
+          className="flex flex-col gap-1"
+          onValueChange={(v) => props.onSortChange(v as SortById)}
+          value={props.sortBy}
+        >
+          {values.map((value) => {
+            const Icon = sortByIcon[value];
+            return (
+              <DropdownMenuItem
+                className={cn(
+                  "flex cursor-pointer items-center justify-between gap-2 rounded-lg py-2",
+                  props.sortBy === value && "bg-accent",
+                )}
+                key={value}
+                onClick={() => props.onSortChange(value)}
+              >
+                <div className="flex items-center gap-2">
+                  <Icon className="size-4 text-muted-foreground" />
+                  {valueToLabel[value]}
+                </div>
+
+                {props.sortBy === value ? (
+                  <CheckIcon className="size-4 text-foreground" />
+                ) : (
+                  <div className="size-4" />
+                )}
+              </DropdownMenuItem>
+            );
+          })}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
 }